修改

src/views/intention-questionnaire/initVideo.ts

@@ -2,136 +2,143 @@ import TCPlayer from 'tcplayer.js';
 import 'tcplayer.js/dist/tcplayer.css';
 
 export const _initVideo = (type: string, forms: any, videoRef: any) => {
-    let player = type === 'one' ? forms.player1 : forms.player2;
-    // _initVideo('one', forms, forms.player1, videoIntervalRef, forms.introductionVideo, forms.coverImg, forms.player1Speed, forms.videoLoading1)
-    const videoUrl = type === 'one' ? forms.introductionVideo : forms.introductionVideo2;
-    const coverImg = type === 'one' ? forms.coverImg : forms.coverImg2;
-    let playerSpeed = type === 'one' ? forms.playerSpeed1 : forms.playerSpeed2;
-    let videoLoading = type === 'one' ? forms.videoLoading1 : forms.videoLoading2;
-    const videoId = type === 'one' ? 'register-video' : 'register-video2'
-    const Button = TCPlayer.getComponent('Button');
-    const BigPlayButton = TCPlayer.getComponent('BigPlayButton');
-    BigPlayButton.prototype.createEl = function () {
-      const el = Button.prototype.createEl.call(this);
-      const _html =
-        '<button><svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="播放/播放" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="椭圆形" stroke="#FFFFFF" stroke-width="1.20385619" fill-opacity="0.3" fill="#000000" stroke-linecap="square" cx="25" cy="25" r="24.4114519"></circle><g id="视频/暂停" transform="translate(17.2619, 13.0952)" fill="#FFFFFF"><path d="M12.1943373,5.31370674 L19.8894148,18.3953385 C20.5636212,19.5414893 20.1810346,21.0171804 19.0348838,21.6913868 C18.6648746,21.9090393 18.2434029,22.0238095 17.8141251,22.0238095 L2.42397011,22.0238095 C1.09422728,22.0238095 0.0162577307,20.94584 0.0162577307,19.6160971 C0.0162577307,19.1868194 0.131027981,18.7653477 0.34868043,18.3953385 L8.04375794,5.31370674 C8.71796432,4.1675559 10.1936554,3.78496932 11.3398063,4.4591757 C11.6926653,4.66673986 11.9867731,4.96084767 12.1943373,5.31370674 Z" id="三角形" transform="translate(10.119, 11.9048) rotate(-270) translate(-10.119, -11.9048)"></path></g></g></svg></button>';
+  let player = type === 'one' ? forms.player1 : forms.player2;
+  // _initVideo('one', forms, forms.player1, videoIntervalRef, forms.introductionVideo, forms.coverImg, forms.player1Speed, forms.videoLoading1)
+  const videoUrl =
+    type === 'one' ? forms.introductionVideo : forms.introductionVideo2;
+  const coverImg = type === 'one' ? forms.coverImg : forms.coverImg2;
+  let playerSpeed = type === 'one' ? forms.playerSpeed1 : forms.playerSpeed2;
+  let videoLoading = type === 'one' ? forms.videoLoading1 : forms.videoLoading2;
+  const videoId = type === 'one' ? 'register-video' : 'register-video2';
+  const Button = TCPlayer.getComponent('Button');
+  const BigPlayButton = TCPlayer.getComponent('BigPlayButton');
+  BigPlayButton.prototype.createEl = function () {
+    const el = Button.prototype.createEl.call(this);
+    const _html =
+      '<button><svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="播放/播放" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="椭圆形" stroke="#FFFFFF" stroke-width="1.20385619" fill-opacity="0.3" fill="#000000" stroke-linecap="square" cx="25" cy="25" r="24.4114519"></circle><g id="视频/暂停" transform="translate(17.2619, 13.0952)" fill="#FFFFFF"><path d="M12.1943373,5.31370674 L19.8894148,18.3953385 C20.5636212,19.5414893 20.1810346,21.0171804 19.0348838,21.6913868 C18.6648746,21.9090393 18.2434029,22.0238095 17.8141251,22.0238095 L2.42397011,22.0238095 C1.09422728,22.0238095 0.0162577307,20.94584 0.0162577307,19.6160971 C0.0162577307,19.1868194 0.131027981,18.7653477 0.34868043,18.3953385 L8.04375794,5.31370674 C8.71796432,4.1675559 10.1936554,3.78496932 11.3398063,4.4591757 C11.6926653,4.66673986 11.9867731,4.96084767 12.1943373,5.31370674 Z" id="三角形" transform="translate(10.119, 11.9048) rotate(-270) translate(-10.119, -11.9048)"></path></g></g></svg></button>';
 
-      el.appendChild(
-        TCPlayer.dom.createEl('div', {
-          className: 'vjs-button-icon',
-          innerHTML: _html
-        })
-      );
-      return el;
-    };
-    player = TCPlayer(videoId, {
-      appID: '',
-      controls: true,
-      plugins: {}
-    }); // player-container-id 为播放器容器 ID，必须与 html 中一致
-    if (player) {
-      player.src(videoUrl); // url 播放地址
-      player.poster(coverImg || '');
+    el.appendChild(
+      TCPlayer.dom.createEl('div', {
+        className: 'vjs-button-icon',
+        innerHTML: _html
+      })
+    );
+    return el;
+  };
+  player = TCPlayer(videoId, {
+    appID: '',
+    controls: true,
+    plugins: {}
+  }); // player-container-id 为播放器容器 ID，必须与 html 中一致
+  if (player) {
+    player.src(videoUrl); // url 播放地址
+    player.poster(coverImg || '');
 
-      // player.on('loadstart', () => {})
-      player.on('ready', (item: any) => {
-        console.log('ready', item);
+    // player.on('loadstart', () => {})
+    player.on('ready', (item: any) => {
+      console.log('ready', item);
 
-        // player.pause()
-      });
-      player.on('loadedmetadata', () => {
-        console.log('loadedmetadata');
-        videoLoading = false;
-        if (type === 'one') {
-            forms.videoLoading1 = false
-        } else {
-            forms.videoLoading2 = false
-        }
-      });
+      // player.pause()
+    });
+    player.on('loadedmetadata', () => {
+      console.log('loadedmetadata');
+      videoLoading = false;
+      if (type === 'one') {
+        forms.videoLoading1 = false;
+      } else {
+        forms.videoLoading2 = false;
+      }
+    });
 
-      // 速度变化时
-      player.on('ratechange', () => {
-        playerSpeed =
-          playerSpeed < player.playbackRate()
-            ? player.playbackRate()
-            : playerSpeed;
-      });
+    // 速度变化时
+    player.on('ratechange', () => {
+      playerSpeed =
+        playerSpeed < player.playbackRate()
+          ? player.playbackRate()
+          : playerSpeed;
+    });
 
-      player.on('seeking', () => {
-        console.log('seeking');
-        videoRef.isActive.value && videoRef.pause();
-      });
+    player.on('seeking', () => {
+      console.log('seeking');
+      videoRef.isActive.value && videoRef.pause();
+    });
 
-      // // 拖动结束时
-      player.on('seeked', () => {
-        console.log('seeked');
-        videoRef.isActive.value && videoRef.pause();
-      });
+    // // 拖动结束时
+    player.on('seeked', () => {
+      console.log('seeked');
+      videoRef.isActive.value && videoRef.pause();
+    });
 
-      // 正在搜索中
-      player.on('waiting', () => {
-        // console.log('waiting pause')
-        videoRef.isActive.value && videoRef.pause();
-      });
+    // 正在搜索中
+    player.on('waiting', () => {
+      // console.log('waiting pause')
+      videoRef.isActive.value && videoRef.pause();
+    });
 
-      // 如何视频在缓存不会触发
-      player.on('timeupdate', () => {
-        // console.log('timeupdate', player.currentTime())
-        // 判断视频计时器是否暂停，如果暂停则恢复
-        // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
-        if (
-          !videoRef.isActive.value &&
-          player.currentTime() > 0 &&
-          !player.paused()
-        ) {
-          // console.log('timeupdate play')
-          videoRef.resume();
-        }
-      });
-
-      // 视屏播放时暂停
-      player.on('ended', () => {
-        player.pause();
-      });
-
-      // 开始播放
-      player.on('play', () => {
-          // 视频一播放
-          if (player.id() === 'register-video') {
-            forms.player2.pause()
-          }
-          // 视频二播放
-          if (player.id() === 'register-video2') {
-            forms.player1.pause()
-          }
-        // console.log('play');
-        // 判断视频计时器是否暂停，如果暂停则恢复
+    // 如何视频在缓存不会触发
+    player.on('timeupdate', () => {
+      // console.log('timeupdate', player.currentTime())
+      // 判断视频计时器是否暂停，如果暂停则恢复
+      // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
+      if (
+        !videoRef.isActive.value &&
+        player.currentTime() > 0 &&
+        !player.paused()
+      ) {
+        // console.log('timeupdate play')
         videoRef.resume();
-      });
+      }
+    });
+
+    // 视屏播放时暂停
+    player.on('ended', () => {
+      player.pause();
+    });
 
-      // 暂停播放
-      player.on('pause', () => {
-        // console.log('pause', videoRef.isActive.value);
+    // 开始播放
+    player.on('play', () => {
+      // 视频一播放
+      if (player.id() === 'register-video') {
+        forms.player2.pause();
+      }
+      // 视频二播放
+      if (player.id() === 'register-video2') {
+        forms.player1.pause();
+      }
+      // console.log('play');
+      // 判断视频计时器是否暂停，如果暂停则恢复
+      videoRef.resume();
+    });
 
-        videoRef.pause();
-      });
+    // 暂停播放
+    player.on('pause', () => {
+      // console.log('pause', videoRef.isActive.value);
 
-      player.on('fullscreenchange', () => {
-        if (player.isFullscreen()) {
-          console.log('fullscreen');
-          const i = document.createElement('i');
-          i.id = 'fullscreen-back';
-          i.className = 'van-icon van-icon-arrow-left video-back';
-          i.addEventListener('click', () => {
-            player.exitFullscreen();
-          });
-          document.getElementsByClassName('video-js')[0].appendChild(i);
-        } else {
-          console.log('exitfullscreen');
-          const i = document.getElementById('fullscreen-back');
-          i && i.remove();
-        }
-      });
-      return player
-    }
-}
+      videoRef.pause();
+    });
+    let isFullscreen = false;
+    player.on('fullscreenchange', () => {
+      console.log('fullscreen fullscreenchange', player.isFullscreen());
+      // if (player.isFullscreen()) {
+      if (isFullscreen) {
+        isFullscreen = false;
+        const i = document.getElementById('fullscreen-back');
+        i && i.remove();
+      } else {
+        isFullscreen = true;
+        const i = document.createElement('i');
+        i.id = 'fullscreen-back';
+        i.className = 'van-icon van-icon-arrow-left video-back';
+        i.addEventListener('click', () => {
+          player.exitFullscreen();
+        });
+        document.getElementById(videoId)?.appendChild(i);
+      }
+      // } else {
+      //   const i = document.getElementById('fullscreen-back');
+      //   i && i.remove();
+      // }
+    });
+    return player;
+  }
+};