222

pages/component/commonComponents/video/ios.nvue

@@ -1,12 +1,12 @@
 <template>
   <view class="container" style="background-color: #000; position: relative">
     <view style="width: 100%; height: 200px">
-     
       <video
         style="width: 100%; height: 100%"
         id="video1"
         class="video"
-        :src="videoData.type==1?videoData.m3u8Url:videoData.videoUrl"
+        :title="videoTitle"
+        :src="videoData.type == 1 ? videoData.m3u8Url : videoData.videoUrl"
         autoplay="true"
         duration=""
         enable-danmu="true"
@@ -21,18 +21,7 @@
         @waiting="waiting"
         @timeupdate="timeupdate"
         @fullscreenchange="fullscreenchange"
-      >
-
-      <cover-view style="position: absolute;top: 128rpx;right: 60rpx;" @click="doubleSpeed">倍速</cover-view>
-            
-        <!-- <cover-view
-        
-          class="video-view"
-          :style="{ width: '100%', height: '100%' }"
-        >
-          <view>倍速</view>
-        </cover-view> -->
-      </video>
+      ></video>
 
       <!-- <div
         class=""
@@ -93,9 +82,28 @@ import { mapState, mapMutations } from "vuex";
 
 // importScripts('@/static/aliplayer/aliplayer-min.js')
 export default {
-  props: ["currentVideo", "currentVideoList"],
+  props: ["currentVideo", "currentVideoList", "videoTitle"],
   data() {
     return {
+      speedList: [
+        {
+          name: "0.5X",
+          value: 0.5,
+        },
+        {
+          name: "正常",
+          value: 1,
+        },
+        {
+          name: "1.25X",
+          value: 1.25,
+        },
+        {
+          name: "1.5X",
+          value: 1.5,
+        },
+      ],
+      isShowSpeed: false,
       platform: null,
       isShowVideoview: false,
       //当前是否是全屏模式
@@ -104,7 +112,7 @@ export default {
       isChange: false,
       isControl: true,
       timer: null,
-      videoTitle: "",
+
       videoList: [],
       firstTime: 0,
       options: {},
@@ -132,7 +140,6 @@ export default {
       immediate: true,
       handler(newRoute) {
         if (this.curTime) {
-        console.log('this.curTime at line 131:', this.curTime)
           this.recordTime({
             time: this.curTime,
           });
@@ -175,6 +182,12 @@ export default {
   onLoad(options) {},
 
   methods: {
+    openSpeed() {
+      this.isShowSpeed = !this.isShowSpeed;
+    },
+    changeSpeed(e) {
+      console.log("e at line 201:", e);
+    },
     onstart(e) {
       console.log("onstart:" + JSON.stringify(e));
     },
@@ -195,7 +208,6 @@ export default {
       console.log("waiting:" + JSON.stringify(e));
     },
     timeupdate(e) {
-      
       console.log("timeupdate:" + JSON.stringify(e));
       this.videoTimer = null;
       this.videoTimer = setInterval(() => {
@@ -1368,16 +1380,28 @@ cover-image {
   z-index: 999;
 }
 
-  .speed {
-        position: absolute;
-        right: 20rpx;
-        top: 16rpx;
-
-        .doubleSpeed {
-            color: #fff;
-            font-size: 14rpx;
-            background-color: rgba(0, 0, 0, 0.6);
-            padding: 4rpx 6rpx;
-        }
-    }
+.cover-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.speed {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 50px;
+  height: 30px;
+  color: #fff;
+  /* background-color: red; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>