How to realize automatic playback of H5 video

State in advance , This article is only for <video> label .

Now in the project, we often encounter in H5 Embedded video in the page , Sometimes you have to play it automatically , I didn't think it was a difficult point before , But in practice, it's a chicken feather . I found various strategies on the Internet , After stepping on various pits , Several points are summarized , I hope I can give you a reference .

I won't say more about various methods of stepping on pits , Just say that the actual measurement is effective , So as not to delay everyone's time

First of all PC End ,PC The end is relatively easy , The browser to <video> The compatibility of labels is still very good , First you need to set autoplay by true

But if you only set autoplay Is unable to achieve the effect of automatic playback , You also need to set muted by true, Mute playback

In this way, simple automatic video playback can be realized .

The second is mobile terminal , Automatic video playback is forbidden on the mobile terminal , To avoid wasting user traffic . Therefore, the mobile terminal needs an interactive event to control video playback .

First create and return video Context videoContext object , has uni For example ：

this.videoContext = uni.createVideoContext('myVideo');

Then the monitoring event triggers

this.videoContext.play();

It is worth noting that ,touch Touching related events cannot control video playback , Only tap and click Events can , It's just that , If you can't realize it directly, you can only detour .

Although the above content is very simple , But there is no need to step on the pit , Real machine measurement , If you want to pass only <video> Tag to realize automatic playback , At least the information I searched cannot be perfectly realized , If there is a better way , I hope you can give me some advice .