video.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <div>
  3. <canvas id="videoCanvas" width="600" height="480" tabindex="0"/>
  4. <div id="video"></div>
  5. </div>
  6. </template>
  7. <script lang="ts">
  8. import { SGraphScene, SGraphView, SGraphItem } from "@persagy-web/graph";
  9. import { Component, Vue } from "vue-property-decorator";
  10. import { SPainter, SRect } from "@persagy-web/draw";
  11. class SVideoItem extends SGraphItem {
  12. /** 图片 dom */
  13. VObject: any;
  14. /** 图片加载是否完成 */
  15. isLoadOver: boolean = false;
  16. /** 图片地址 */
  17. private _url: string = "";
  18. get url(): string {
  19. return this._url;
  20. }
  21. set url(v: string) {
  22. this._url = v;
  23. this.VObject = document.createElement('VIDEO');
  24. this.VObject.setAttribute('width', '600');
  25. this.VObject.setAttribute('height', '480');
  26. this.VObject.setAttribute('autoplay', 'autoplay');
  27. this.VObject.setAttribute('src', v);
  28. let VBox = document.getElementById(this.box);
  29. if (VBox) {
  30. VBox.innerHTML = '';
  31. VBox.appendChild(this.VObject);
  32. }
  33. this.VObject.style.display = 'none';
  34. }
  35. /** item 宽 */
  36. private _width: number = 600;
  37. get width(): number {
  38. return this._width;
  39. }
  40. set width(v: number) {
  41. if (v == this._width) {
  42. return;
  43. }
  44. this._width = v;
  45. this.update();
  46. }
  47. /** item 高 */
  48. private _height: number = 480;
  49. get height(): number {
  50. return this._height;
  51. }
  52. set height(v: number) {
  53. if (v == this._height) {
  54. return;
  55. }
  56. this._height = v;
  57. this.update();
  58. }
  59. /** 视频播放容器 id */
  60. box: string = '';
  61. /**
  62. * 构造函数
  63. *
  64. * @param parent 父类
  65. * @param url 视频路径
  66. * @param box 视频播放容器 id
  67. */
  68. constructor(parent: SGraphItem | null, url: string, box: string) {
  69. super(parent);
  70. if (url && box) {
  71. this.url = url;
  72. this.box = box;
  73. }
  74. }
  75. /**
  76. * Item 对象边界区域
  77. *
  78. * @return 边界区域
  79. */
  80. boundingRect(): SRect {
  81. return new SRect(0, 0, this.width, this.height);
  82. }
  83. /**
  84. * Item 绘制操作
  85. *
  86. * @param painter 绘制对象
  87. */
  88. onDraw(painter: SPainter): void {
  89. if (this.VObject) {
  90. // @ts-ignore
  91. painter.drawImage(this.VObject, 0, 0, this.width, this.height);
  92. }
  93. }
  94. }
  95. @Component
  96. export default class videoCanvas extends Vue {
  97. timer: any = null;
  98. mounted(): void {
  99. const view = new SGraphView('videoCanvas');
  100. const scene = new SGraphScene();
  101. const item = new SVideoItem(null, `https://www.w3cschool.cn/statics/demosource/mov_bbb.mp4`, 'video');
  102. scene.addItem(item);
  103. view.scene = scene;
  104. view.fitSceneToView(1);
  105. setInterval(() => {
  106. view.update();
  107. },60)
  108. view.scalable = false;
  109. }
  110. beforeDestroy(): void {
  111. this.timer && clearInterval(this.timer);
  112. this.timer = null;
  113. }
  114. }
  115. </script>
  116. <style scoped>
  117. </style>