# Video (`VideoSprite`) (/start/canvas-video)



The [`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite) component extends the [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite) component, so you can use all the methods and properties of [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite). It is used to display a single video on the canvas.

<CodeBlockTabs defaultValue="main.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/assets/manifest.gen.json">
      src/assets/manifest.gen.json
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="main.ts">
    ```ts
    import { canvas, VideoSprite } from "@drincs/pixi-vn";

    let video = new VideoSprite(
        {
            anchor: { x: 0.5, y: 0.5 },
            x: 100,
            y: 100,
        },
        "film",
    );

    await video.load();
    canvas.add("my_video", video);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/assets/manifest.gen.json">
    ```json
    {
        "bundles": [
            {
                "name": "video",
                "assets": [
                    {
                        "alias": "film",
                        "src": "https://pixijs.com/assets/video.mp4"
                    }
                ]
            }
        ]
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Compared to the [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite) component, [`VideoSprite`](/jsdoc/pixi-vn/index/classes/VideoSprite) adds the following features:

* [`loop`](/jsdoc/pixi-vn/index/classes/VideoSprite#loop): Indicates if the video should loop after it finishes.
* [`paused`](/jsdoc/pixi-vn/index/classes/VideoSprite#paused): Indicates if the video is paused.
* [`pause`](/jsdoc/pixi-vn/index/classes/VideoSprite#pause): Method to pause the video.
* [`play`](/jsdoc/pixi-vn/index/classes/VideoSprite#play): Method to play the video.
* [`currentTime`](/jsdoc/pixi-vn/index/classes/VideoSprite#currenttime): The current time of the video.
* [`restart`](/jsdoc/pixi-vn/index/classes/VideoSprite#restart): Method to restart the video from the beginning.

## Show [#show]

The simplest way to show a video on the canvas is to use the [`showVideo`](/jsdoc/pixi-vn/index/functions/showVideo) function. This function combines [`load`](/jsdoc/pixi-vn/index/classes/ImageSprite#load) and [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add).

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { newLabel, showVideo } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            // Show the videos on the canvas
            let video1 = await showVideo("video");
            // Show the video with a different alias and position
            let video2 = await showVideo("video2", "video", {
                xAlign: 0.5,
            });
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="video/video-sprite-show" />

## Add [#add]

To add an video to the canvas, use the [`addVideo`](/jsdoc/pixi-vn/index/functions/addVideo) function. This function only adds the component to the canvas; it does **not** show it or load its texture. It uses [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add) to add the component to the canvas.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { addVideo, canvas, VideoSprite, newLabel } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        () => {
            // Add the videos to the canvas
            let video1 = addVideo("video");
            // Add the video with a different alias and position
            let video2 = addVideo("video2", "video", {
                xAlign: 0.5,
            });
        },
        async () => {
            let video1 = canvas.find<VideoSprite>("video");
            let video2 = canvas.find<VideoSprite>("video2");
            // Load the textures
            video1 && (await video1.load());
            video2 && (await video2.load());
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="video/video-sprite-add" />

## Remove [#remove]

As with other canvas components, you can remove this component using the [`canvas.remove`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#remove) function.

## Play and pause [#play-and-pause]

Use [`play`](/jsdoc/pixi-vn/index/classes/VideoSprite#play) and [`pause`](/jsdoc/pixi-vn/index/classes/VideoSprite#pause) methods, or set the [`paused`](/jsdoc/pixi-vn/index/classes/VideoSprite#paused) property.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import {
        canvas,
        narration,
        newLabel,
        showVideo,
        VideoSprite,
    } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            narration.dialogue = "add video";
            await showVideo("video");
        },
        async () => {
            narration.dialogue = "pause video";
            let video = canvas.find<VideoSprite>("video");
            if (video) {
                video.pause();
                // or: video.paused = true
            }
        },
        async () => {
            narration.dialogue = "resume video";
            let video = canvas.find<VideoSprite>("video");
            if (video) {
                video.play();
                // or: video.paused = false
            }
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="video/video-sprite-play-pause" />

## Looping [#looping]

Set the [`loop`](/jsdoc/pixi-vn/index/classes/VideoSprite#loop) property to make the video repeat.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { newLabel, showVideo } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            let video = await showVideo("video");
            video.loop = true;
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="video/video-sprite-looping" />

## Restart [#restart]

Use the [`restart`](/jsdoc/pixi-vn/index/classes/VideoSprite#restart) method to restart playback.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import {
        canvas,
        narration,
        newLabel,
        showVideo,
        VideoSprite,
    } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            narration.dialogue = "add video";
            await showVideo("video");
        },
        async () => {
            narration.dialogue = "restart video";
            let video = canvas.find<VideoSprite>("video");
            if (video) {
                video.restart();
            }
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "video",
                        src: "https://pixijs.com/assets/video.mp4",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="video/video-sprite-restart" />