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

Question

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

以下代码适用于Chrome，Safari和Firefox for Desktop以及适用于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属性指定视频源