我想在reactjs中没有任何用户手势进行视频自动播放。我知道根据最近的谷歌和苹果网络视频政策,我们无法自动播放没有用户手势的音频视频。但我看到很少有网站仍在现代网络浏览器中自动播放视频。
我在stackoverflow上遇到了很多与此问题相关的问题,但没有人帮助过我。
这是我尝试过的。
试试1。
<video id="miniVideo" preLoad="yes" autoPlay="autoplay" loop width="100%" height="auto" playsInline>
<source src="/mini/video/cooper.mp4" type="video/mp4" />
<source src="/mini/video/cooper.webm" type="video/webm" />
</video>
试试2。
<iframe playsInline id="miniVideo" src="/mini/video/cooper.mp4" width="100%"
height="400px"
allow="autoplay; fullscreen"></iframe>
试试3。
componentDidMount(){
var videoTimer = document.getElementById("miniVideo");
videoTimer.play();
}
<video id="miniVideo" width="100%" height="100%">
<source src="/video/cooper.mp4" type="video/mp4" />
<p>This browser does not support the video element.</p>
</video>
非常感谢您的帮助。谢谢
我不确定Safari,但Chrome已更改了自动播放政策。看这里:https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
为了自动播放,添加归因于muted
标签的video
。
例如:
import React, { Component } from 'react';
class Player extends Component {
constructor(props) {
super(props);
this.state = {
isVideoMuted: true
};
}
handleMuteState = () => {
this.setState(prevState => ({
isVideoMuted: !prevState.isVideoMuted
}));
}
render() {
return (
<div>
<video muted={this.state.isVideoMuted} src="./video.mp4" />
<button onClick={this.handleMuteState}>{this.state.isVideoMuted ? 'Unmute' : 'Mute'}</button >
</div>
);
}
}
export default Player;