视频点击才播放

super-screen/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"
-                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>
+            {
+                play == false ?
+                    <div style={{
+                        height: width || 300, width: width || 400, position: 'absolute', top: 0, background: '#000',
+                        display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff'
+                    }}>
+                        <PlayCircleTwoTone style={{ fontSize: 48 }} onClick={() => {
+                            setPlay(true)
+                        }} />
+                    </div>
+                    :
+                    <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={{