驾次;视频默认画中画播放

src/views/farmlandProtection/gdzl/wrjxx.vue

@@ -20,7 +20,7 @@
             v-model="uavit.show"
             @change="(val) => showpath(val, uavit)"
           >
-          驾次路线
+            驾次路线
           </el-checkbox>
           <i
             class="el-icon-s-promotion"
@@ -41,7 +41,7 @@
           controls
           v-for="vitem in uavit.videoDtoList"
           :key="vitem.id"
-          @click.prevent="enablePiP(`video${uavit.id}_${vitem.id}`)"
+          @play="enablePiP(`video${uavit.id}_${vitem.id}`)"
         >
           <span>{{ i + 1 }}</span>
           <source :src="geturl(vitem.video_path)" type="video/mp4" />
@@ -108,15 +108,15 @@ export default {
     },
     enablePiP(name) {
       var video = document.getElementById(name);
-      if (video.requestPictureInPicture) {
-        video.requestPictureInPicture().catch(function (error) {
-          console.error("Error attempting to enable Picture-in-Picture", error);
-        });
-      } else {
-        console.error(
-          "Picture-in-Picture mode is not supported in this browser."
-        );
-      }
+      video.addEventListener("loadedmetadata", () => {
+        if (video.requestPictureInPicture) {
+          video.requestPictureInPicture().catch((error) => {
+            this.$message.error("视频画中画播放失败" + error);
+          });
+        } else {
+          this.$message.warning("系统不支持画中画播放!");
+        }
+      });
     },
     clickImg(i) {
       this.bigimg = true;
@@ -357,9 +357,9 @@ export default {
     overflow-x: hidden;
     overflow-y: auto;
     // background-color: rgba(255, 192, 203, 0.372);
-    .videoDiv{
+    .videoDiv {
       width: 46%;
-      height: 180px;
+      height: 140px;
       margin-right: 10px;
       // background-color: rgba(0, 255, 255, 0.413);
       position: relative;