视频要被动播放

web/client/src/components/ysPlayerIframe.js

@@ -4,30 +4,49 @@
  */
 'use strict';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
+import { PlayCircleTwoTone } from '@ant-design/icons'
 
 const YSIframePlayer = props => {
 
     const { containerId, height, width, url, autoplay, audio, videoState, ysToken } = props;
+
+
+    const [play, setPlay] = useState(false)
+
     const at = ysToken
     if (!url || !at) return null;
-    const src = `https://open.ys7.com/ezopen/h5/iframe?audio=${audio ? '1' : '0'}&url=${url}&autoplay=${autoplay || 1}&accessToken=${at}`
+    // const src = `https://open.ys7.com/ezopen/h5/iframe?audio=${audio ? '1' : '0'}&url=${url}&autoplay=${autoplay || 1}&accessToken=${at}`
     // const src = `https://open.ys7.com/ezopen/h5/iframe?audio=1&url=${url}&autoplay=${autoplay || 1}&accessToken=${at}`
+    const src = `https://open.ys7.com/ezopen/h5/iframe?audio=${audio ? '1' : '0'}&url=${url}&autoplay=${play ? '1' : "0"}&accessToken=${at}`
+
     return (
         <div
             style={{ position: 'relative', height: '100%', width: '100%' }}>
-            <iframe
+            {
-                frameBorder="0"
+                play == false ?
-                id={containerId || 'myPlayer'}
+                    <div style={{
-                src={src}
+                        height: width || 300, width: width || 400, position: 'absolute', top: 0, background: '#000',
-                // https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
+                        display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff'
-                width={width || 400}
+                    }}>
-                height={height || 300}
+                        <PlayCircleTwoTone style={{ fontSize: 48 }} onClick={() => {
-                allowFullScreen
+                            setPlay(true)
-                wmode="transparent"
+                        }} />
-            >
+                    </div>
-            </iframe>
+                    :
+                    <iframe
+                        frameBorder="0"
+                        id={containerId || 'myPlayer'}
+                        src={src}
+                        // https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
+                        width={width || 400}
+                        height={height || 300}
+                        allowFullScreen
+                        wmode="transparent"
+                    >
+                    </iframe>
+            }
             {
                 videoState && videoState.status == 0 ?
                     <div style={{

web/client/src/sections/quanju/containers/footer/build/videoMonitor.js

@@ -26,14 +26,14 @@ const videoMonitor = (props) => {
    }
 
    useEffect(() => {
-      const timer = setInterval(() => {
+    //   const timer = setInterval(() => {
-         if (pageLeft + 1 < Math.ceil(videoCenterList?.length / 3)) {
+    //      if (pageLeft + 1 < Math.ceil(videoCenterList?.length / 3)) {
-            setPageLeft(pageLeft + 1)
+    //         setPageLeft(pageLeft + 1)
-         } else {
+    //      } else {
-            setPageLeft(0)
+    //         setPageLeft(0)
-         }
+    //      }
-      }, 1000 * 60 * 5);
+    //   }, 1000 * 60 * 5);
-      return () => clearInterval(timer);
+    //   return () => clearInterval(timer);
    }, [pageLeft]);
 
 

web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js

@@ -28,16 +28,16 @@ const Leftcenter = ({ videoCenterList }) => {
     }, [videoCenterList])
 
     useEffect(() => {
-        const timer = setInterval(() => {
+        // const timer = setInterval(() => {
-            if (num == list.length) {
+        //     if (num == list.length) {
-                setNum(1);
+        //         setNum(1);
-                // setTu(list[0].img);
+        //         // setTu(list[0].img);
-            } else {
+        //     } else {
-                setNum(num + 1);
+        //         setNum(num + 1);
-                // setTu(list[num].img);
+        //         // setTu(list[num].img);
-            }
+        //     }
-        }, 1000 * 60 * 5);
+        // }, 1000 * 60 * 5);
-        return () => clearInterval(timer);
+        // return () => clearInterval(timer);
     }, [num]);
 
     const renderBody = () => {
@@ -98,6 +98,7 @@ const Leftcenter = ({ videoCenterList }) => {
                                         // height={410}
                                         // width={310}
                                         url={`ezopen://open.ys7.com/${item.deviceSerial}/${item.channelNo || '1'}.hd.live`}
+                                        // url={`ezopen://open.ys7.com/${item.deviceSerial}/${item.channelNo || '1'}.live`}
                                         audio="0"
                                         ysToken={item.token}
                                         videoState={{

web/client/src/sections/quanju/containers/footer/leadership/right/hudongVideo.js

@@ -163,13 +163,13 @@ class ReactCarousel extends Component {
         clearInterval(timer);
     }
     start = () => { //开始
-        let { timer } = this.state;
+        // let { timer } = this.state;
-        timer = setInterval(() => {
+        // timer = setInterval(() => {
-            this.next();
+        //     this.next();
-        }, 1000 * 60 * 5);
+        // }, 1000 * 60 * 5);
-        this.setState({
+        // this.setState({
-            timer
+        //     timer
-        })
+        // })
     }
     change = (index) => { //点击下面的按钮切换当前显示的图片
         let { showIndex } = this.state;