upp

Code/public/index.html

@@ -9,6 +9,8 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
     <script src="./myData/myData.js"></script>
     <script src="./myData/hot.js"></script>
+    <script src="./myData/jsmpeg.min.js"></script>
+    <script src="./myData/f-video.js"></script>
 
     <style>
       @font-face {

Code/public/myData/f-video.js

@@ -0,0 +1,81 @@
+/* f-video.js */
+let F_Video;
+(function () {
+  F_Video = function (url, option) {
+    const u = window.navigator.userAgent.toLowerCase();
+    const isAndroid = u.indexOf("android") > -1;
+    let player = new Object();
+
+
+ let newCanvas = document.createElement("canvas");
+      let params = {
+        canvas: newCanvas,
+        loop: option.loop || false,
+        autoplay: option.autoplay || false,
+        onEnded: () => {
+          option.onEnded && option.onEnded();
+          player.currentTime = 0;
+        },
+      };
+
+      newCanvas.style.width = "100%";
+      newCanvas.style.height = "100%";
+      newCanvas.style.objectFit = option.objectFit || "cover";
+
+      player = new JSMpeg.Player(url.replace(".mp4", ".ts"), {
+        ...option,
+        ...params,
+      });
+      player.domElement = newCanvas;
+
+    // if (isAndroid) {
+    //   let newCanvas = document.createElement("canvas");
+    //   let params = {
+    //     canvas: newCanvas,
+    //     loop: option.loop || false,
+    //     autoplay: option.autoplay || false,
+    //     onEnded: () => {
+    //       option.onEnded && option.onEnded();
+    //       player.currentTime = 0;
+    //     },
+    //   };
+
+    //   newCanvas.style.width = "100%";
+    //   newCanvas.style.height = "100%";
+    //   newCanvas.style.objectFit = option.objectFit || "cover";
+
+    //   player = new JSMpeg.Player(url.replace(".mp4", ".ts"), {
+    //     ...option,
+    //     ...params,
+    //   });
+    //   player.domElement = newCanvas;
+    // } else {
+    //   let newVideo = document.createElement("video");
+    //   newVideo.setAttribute("x5-video-player-type", "h5");
+    //   newVideo.setAttribute("x-webkit-airplay", "true");
+    //   newVideo.setAttribute("airplay", "allow");
+    //   newVideo.setAttribute("playsinline", "");
+    //   newVideo.setAttribute("webkit-playsinline", "");
+    //   newVideo.setAttribute("src", url);
+    //   option.loop && newVideo.setAttribute("loop", "loop");
+    //   !option.autoplay && newVideo.setAttribute("preload", "auto");
+    //   option.autoplay &&
+    //     window.WeixinJSBridge &&
+    //     window.WeixinJSBridge.invoke("getNetworkType", {}, (e) => {
+    //       player.play();
+    //     });
+
+    //   newVideo.style.width = "100%";
+    //   newVideo.style.height = "100%";
+    //   newVideo.style.objectFit = option.objectFit || "cover";
+
+    //   player = newVideo;
+    //   player.domElement = newVideo;
+
+    //   option.onPlay && player.addEventListener("play", option.onPlay);
+    //   option.onPause && player.addEventListener("pause", option.onPause);
+    //   option.onEnded && player.addEventListener("ended", option.onEnded);
+    // }
+    return player;
+  };
+})();

Code/src/pages/A2visit2/index.tsx

@@ -35,18 +35,6 @@ function A2visit2() {
   // 底部按钮选中
   const [btnAc, setBtnAc] = useState('贵宾')
 
-  // 3个视频切换
-  const [videoPlay, setVideoPlay] = useState(false)
-  const videoRef = useRef<HTMLVideoElement>(null)
-
-  useEffect(() => {
-    if (loding >= 100) {
-      setTimeout(() => {
-        if (videoRef.current) videoRef.current.play()
-      }, 100)
-    }
-  }, [loding])
-
   //  进入院落 全景图显示
   const [panoShow, setPanoShow] = useState(window.location.href.includes('?v=v2') ? true : false)
 
@@ -64,6 +52,21 @@ function A2visit2() {
   // 打开其他热点
   const [acName, setAcName] = useState('')
 
+  // 微信浏览器不让自动播放视频 转为画布
+  useEffect(() => {
+    const params = {
+      objectFit: 'cover', // 视频的object-fit样式, 默认 cover
+      loop: false, // 是否循环, 默认false
+      autoplay: true, // 自动播放, 默认false
+      onPlay: () => {}, // 触发播放事件
+      onPause: () => {}, // 触发暂停事件
+      onEnded: () => {} // 触发播放结束事件
+    }
+    const player = F_Video('./myData/play.ts', params)
+    const dom = document.querySelector('.A22video')!
+    dom.append(player.domElement)
+  }, [])
+
   return (
     <div className={styles.A2visit2}>
       {window.location.href.includes('?v=v2') ? null : (
@@ -132,11 +135,11 @@ function A2visit2() {
           {/* 右上角地图 */}
           <Zmap src='visit2' />
 
-          {/* 3个视频 */}
-          <div className='A22videoBox' style={{ zIndex: videoPlay ? '2' : '0' }}>
+          {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
+          <div className='A22videoBox' style={{ zIndex: 2 }}>
             {myData.visit2.btnArr.map((item, index) => (
               <div key={index} className='A22video' style={{ opacity: btnAc === item ? 1 : 0 }}>
-                <video
+                {/* <video
                   ref={btnAc === item ? videoRef : null}
                   playsInline
                   muted
@@ -147,7 +150,7 @@ function A2visit2() {
                 >
                   <source type='video/mp4' src={`${baseURL}visit2/${item}.mp4`} />
                   Your browser does not support the video tag.
-                </video>
+                </video> */}
               </div>
             ))}
           </div>

Code/src/types/declaration.d.ts

@@ -16,6 +16,9 @@ declare const otherUrlTemp: string
 declare const myHotInfo: any
 declare const apiUrlTemp: string
 
+// 微信浏览器--视频转画布
+declare const F_Video: any
+
 type MyDataType = {
   isLdong: boolean
   home: {