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

Question

I am trying to render out a full page background video.

The following code works on Chrome, Safari and Firefox for Desktop and on Safari and Chrome for iOS 11.

However this code is not working on any Android device. What is wrong here?

Code:-

<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

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