视频点击才播放

super-screen/client/src/components/ysPlayerIframe.js

@@ -4,19 +4,37 @@
  */
 '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%' }}>
+            {
+                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'}
@@ -28,6 +46,7 @@ const YSIframePlayer = props => {
                         wmode="transparent"
                     >
                     </iframe>
+            }
             {
                 videoState && videoState.status == 0 ?
                     <div style={{