persagy-web-doc/docs/.vuepress/components/scene/items/video.vue

<template>
    <div>
        <canvas id="videoCanvas" width="600" height="480" tabindex="0"/>
        <div id="video"></div>
    </div>
</template>

<script lang="ts">
    import { SGraphScene, SGraphView, SGraphItem } from "@persagy-web/graph";
    import { Component, Vue } from "vue-property-decorator";
    import { SPainter, SRect } from "@persagy-web/draw";

    class SVideoItem extends SGraphItem {
        /** 图片 dom */
        VObject: any;
        /** 图片加载是否完成 */
        isLoadOver: boolean = false;
        /** 图片地址 */
        private _url: string = "";
        get url(): string {
            return this._url;
        }
        set url(v: string) {
            this._url = v;

            this.VObject = document.createElement('VIDEO');
            this.VObject.setAttribute('width', '600');
            this.VObject.setAttribute('height', '480');
            // 设置自动播放
            this.VObject.setAttribute('autoplay', 'autoplay');
            // 设置视频路径
            this.VObject.setAttribute('src', v);
            // 设置循环播放
            this.VObject.setAttribute('loop', 'loop');
            // 添加到对应的容器中
            let VBox = document.getElementById(this.box);
            if (VBox) {
                // 先清空
                VBox.innerHTML = '';
                VBox.appendChild(this.VObject);
            }
            // 隐藏video标签
            this.VObject.style.display = 'none';
        }
        /** item 宽 */
        private _width: number = 600;
        get width(): number {
            return this._width;
        }
        set width(v: number) {
            if (v == this._width) {
                return;
            }
            this._width = v;
            this.update();
        }
        /** item 高 */
        private _height: number = 480;
        get height(): number {
            return this._height;
        }
        set height(v: number) {
            if (v == this._height) {
                return;
            }
            this._height = v;
            this.update();
        }

        /** 视频播放容器 id */
        box: string = '';

        /**
         * 构造函数
         *
         * @param parent 父类
         * @param url    视频路径
         * @param box    视频播放容器 id
         */
        constructor(parent: SGraphItem | null, url: string, box: string) {
            super(parent);
            if (url && box) {
                this.url = url;
                this.box = box;
            }
        }

        /**
         * Item 对象边界区域
         *
         * @return 边界区域
         */
        boundingRect(): SRect {
            return new SRect(0, 0, this.width, this.height);
        }

        /**
         * Item 绘制操作
         *
         * @param painter   绘制对象
         */
        onDraw(painter: SPainter): void {
            if (this.VObject) {
                // @ts-ignore
                painter.drawImage(this.VObject, 0, 0, this.width, this.height);
            }
        }
    }

    @Component
    export default class videoCanvas extends Vue {
        timer: any = null;
        mounted(): void {
            const view = new SGraphView('videoCanvas');
            const scene = new SGraphScene();
            const item = new SVideoItem(null, `https://www.w3cschool.cn/statics/demosource/mov_bbb.mp4`, 'video');
            scene.addItem(item);
            view.scene = scene;
            view.fitSceneToView(1);
            setInterval(() => {
                view.update();
            },60)

            view.scalable = false;
        }
        beforeDestroy(): void {
            this.timer && clearInterval(this.timer);
            this.timer = null;
        }
    }
</script>

<style scoped>

</style>