HTML 5 视频无法在 Android 设备上呈现

Question

我正在尝试渲染整页背景视频。

以下代码适用于桌面版 Chrome、Safari 和 Firefox，以及适用于 iOS 11 的 Safari 和 Chrome。

但是，此代码不适用于任何 Android 设备。这里有什么问题？

代码：-

<video 
    muted 
    ref={(video) => { this.videoPlayer = video; }}
    className='video' 
    playsInline
    autoPlay 
    onLoadedData = {this.startPlaying}
    onPlaying = {this.startedPlaying}
    onEnded ={this.onEnd}
>
 <source src="/video/myvideo.mp4" type="video/mp4"/>
</video>

/*Functions*/

onEnd = () => {
    console.log('ended');
    this.setState({
        showTimer: true
    });
}

startedPlaying = () => {
    console.log('started');
    this.setState({
        videoLoaded: true
    });
}

startPlaying = () => {
    console.log('loaded');
    this.videoPlayer.play();
}

Answer 1

尝试使用视频元素本身的src 属性指定视频源