当前位置:网站首页>How to realize automatic playback of H5 video
How to realize automatic playback of H5 video
2022-07-06 04:19:00 【echozly】
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 .
边栏推荐
- Comprehensive ability evaluation system
- 1291_Xshell日志中增加时间戳的功能
- Lambda expression learning
- Record an excel xxE vulnerability
- pd. to_ numeric
- Fedora/REHL 安装 semanage
- MLAPI系列 - 04 - 网络变量和网络序列化【网络同步】
- 拉格朗日插值法
- asp. Core is compatible with both JWT authentication and cookies authentication
- How to solve the problem of slow downloading from foreign NPM official servers—— Teach you two ways to switch to Taobao NPM image server
猜你喜欢
Easyrecovery靠谱不收费的数据恢复电脑软件
10 exemples les plus courants de gestion du trafic istio, que savez - vous?
[Zhao Yuqiang] deploy kubernetes cluster with binary package
[Zhao Yuqiang] deploy kubernetes cluster with binary package
What is the difference between gateway address and IP address in tcp/ip protocol?
Yyds dry goods inventory hcie security Day11: preliminary study of firewall dual machine hot standby and vgmp concepts
解决“C2001:常量中有换行符“编译问题
Figure application details
DM8 archive log file manual switching
How to solve the problem of slow downloading from foreign NPM official servers—— Teach you two ways to switch to Taobao NPM image server
随机推荐
The global and Chinese market of negative pressure wound therapy unit (npwtu) 2022-2028: Research Report on technology, participants, trends, market size and share
Global and Chinese markets for fire resistant conveyor belts 2022-2028: Research Report on technology, participants, trends, market size and share
2/13 review Backpack + monotonic queue variant
Global and Chinese markets for medical gas manifolds 2022-2028: Research Report on technology, participants, trends, market size and share
Python book learning notes - Chapter 09 section 01 create and use classes
lora网关以太网传输
80% of the diseases are caused by bad living habits. There are eight common bad habits, which are both physical and mental
Fedora/REHL 安装 semanage
Lora gateway Ethernet transmission
One question per day (Mathematics)
图应用详解
QML和QWidget混合开发(初探)
VNCTF2022 WriteUp
2/12 didn't learn anything
When debugging after pycharm remote server is connected, trying to add breakpoint to file that does not exist: /data appears_ sda/d:/segmentation
Solve the compilation problem of "c2001: line breaks in constants"
MLAPI系列 - 04 - 网络变量和网络序列化【网络同步】
【leetcode】22. bracket-generating
牛顿插值法
2328. Number of incremental paths in the grid graph (memory search)