提交

src/view/allMedia/videoProcessing/detail.vue

@@ -13,14 +13,20 @@
           style="border-right: 2px solid #e4e4e4; padding: 0 26px"
         >
           <div v-text="detail.title" style="margin-bottom: 1em"></div>
-          <video
-            autoplay
-            controls
-            ref="video"
-            style="margin-bottom: 3em; width: 100%"
-            @loadedmetadata="loadedmetadata"
-            :src="detail.url"
-          ></video>
+          <div class="video_content">
+              <!--  -->
+            <video
+              autoplay
+              controls
+              ref="video"
+              style="width: 100%"
+              @timeupdate="timeupdate"
+              :src="detail.url"
+            ></video>
+
+            <!-- <div class="progress"></div> -->
+          </div>
+
           <el-button
             :type="status[detail.reviewResult.label]"
             style="margin: 0 auto; display: block"
@@ -62,7 +68,13 @@
                 </div>
                 <img
                   :src="p.evidence.thumbnail"
-                  style="width: 100%; max-width: 373px; border-radius: 5px;display: block;margin: 0 auto;"
+                  style="
+                    width: 100%;
+                    max-width: 373px;
+                    border-radius: 5px;
+                    display: block;
+                    margin: 0 auto;
+                  "
                 />
               </div>
             </el-tab-pane>
@@ -104,8 +116,10 @@ detail?.reviewResult?.results?.map(v => {
 
 console.log(detail);
 
-function loadedmetadata(p) {
-  console.log(p.srcElement);
+function timeupdate(p) {
+  console.log(p.target.duration);
+  console.log(p.target.currentTime);
+  console.log((p.target.currentTime / p.target.duration).toFixed(4) * 100);
 }
 
 function changeTime(T) {
@@ -158,4 +172,18 @@ function play(p, i) {
 .err_act {
   background-color: #e8effc;
 }
+
+.progress {
+  border-radius: 2em;
+  background-color: #fff;
+  position: absolute;
+  bottom: 1.5em;
+  width: 90%;
+  left: 5%;
+  height: 4px;
+}
+.video_content {
+    position: relative;
+    margin-bottom: 3em;
+}
 </style>