|
@@ -0,0 +1,129 @@
|
|
|
+<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);
|
|
|
+
|
|
|
+ let VBox = document.getElementById(this.box);
|
|
|
+ if (VBox) {
|
|
|
+ VBox.innerHTML = '';
|
|
|
+ VBox.appendChild(this.VObject);
|
|
|
+ }
|
|
|
+ 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>
|