Browse Source

视频点击才播放

master
wenlele 1 year ago
parent
commit
7b461646c4
  1. 45
      super-screen/client/src/components/ysPlayerIframe.js

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

@ -4,30 +4,49 @@
*/ */
'use strict'; 'use strict';
import React from 'react'; import React, { useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { PlayCircleTwoTone } from '@ant-design/icons'
const YSIframePlayer = props => { const YSIframePlayer = props => {
const { containerId, height, width, url, autoplay, audio, videoState, ysToken } = props; const { containerId, height, width, url, autoplay, audio, videoState, ysToken } = props;
const [play, setPlay] = useState(false)
const at = ysToken const at = ysToken
if (!url || !at) return null; 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=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 ( return (
<div <div
style={{ position: 'relative', height: '100%', width: '100%' }}> 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 ? videoState && videoState.status == 0 ?
<div style={{ <div style={{

Loading…
Cancel
Save