视频播放

src/views/xsjsdb/detailRwbd.vue

 <!--
  * @Author: your name
  * @Date: 2021-09-11 10:30:42
- * @LastEditTime: 2021-09-11 17:55:48
+ * @LastEditTime: 2021-09-11 18:25:06
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\views\xsjsdb\detailRwbd.vue
@@ -112,14 +112,16 @@
       width="40%"
       @opened="opened"
     >
-      <video
-        id="myVideo"
-        class="video-js video"
-        style="object-fit: fill; width: 100%; height: 95%"
-      >
-        <source :src="src" type="video/mp4" />
-        您的浏览器不支持 video 标签。
-      </video>
+      <div id="videoBox" ref="videoBox" style="width: 100%; height: 95%">
+        <video
+          id="myVideo"
+          class="video-js video"
+          style="object-fit: fill; width: 100%; height: 95%"
+        >
+          <source :src="src" type="video/mp4" />
+          您的浏览器不支持 video 标签。
+        </video>
+      </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
       </span>
@@ -343,6 +345,7 @@ export default {
       title: "标题",
       myVideo: "",
       xxzjbh: "",
+      index: 1,
     };
   },
   methods: {
@@ -359,7 +362,9 @@ export default {
     //比对任务详情附件
     getThanTaskFile() {
       let _this = this;
-      selectRwxffj({ bdrwbh: "440000000000202109100031697783" }).then((res) => {
+      let formData = new FormData();
+      formData.append("bdrwbh", "440000000000202109100031697783");
+      selectRwxffj(formData).then((res) => {
         if (res.success && res.code == 200) {
           _this.fileList = res.data.rows.map((i) => ({
             label: i.fjDzwjmc,
@@ -418,22 +423,42 @@ export default {
         this.dialogVisible = true;
       }
     },
+    reset() {
+      let _this = this;
+      if (_this.myVideo) {
+        _this.myVideo.reset(); //重置 video
+        _this.myVideo.src([
+          {
+            type: "video/mp4",
+            src: _this.src,
+          },
+        ]);
+        _this.myVideo.load();
+        _this.myVideo.play();
+      }
+    },
     opened() {
       let _this = this;
-      //视频
-      setTimeout(() => {
-        _this.myVideo = this.$video("myVideo", {
-          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
-          controls: true,
-          loop: true,
-          //自动播放属性,muted:静音播放
-          autoplay: true,
-          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
-          preload: "auto",
-          //设置视频播放器的显示宽度（以像素为单位）
-        });
-        // console.log(_this.myVideo);
-      }, 300);
+      _this.reset();
+      if (this.index == 1) {
+        //视频
+        setTimeout(() => {
+          _this.myVideo = this.$video("myVideo", {
+            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
+            controls: true,
+            loop: true,
+            //自动播放属性,muted:静音播放
+            autoplay: true,
+            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
+            preload: "auto",
+            //设置视频播放器的显示宽度（以像素为单位）
+          });
+          setTimeout(() => {
+            _this.reset();
+          }, 200);
+          _this.index = 0;
+        }, 300);
+      }
     },
     /**
      * @description: 改变页数回调函数