前言
这篇文章主要介绍
微信h5对安卓视频播放不友好的问题
开发环境:macOS
手机系统:安卓9
先贴下基础代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> video{ width: 375px; } </style> </head> <body> <video width="375" src="视频链接" controls></video> </body> </html>
|
安卓手机播放全屏自动全屏问题
上述代码在安卓微信访问后会自动显示全屏。
在video标签代码改为:
1
| <video width="375" src="视频链接" x-webkit-airplay="true" x5-playsinline="true" playsinline="true" x5-video-player-type="web" x5-video-player-fullscreeen="false" controls></video>
|
安卓手机全屏播放完后会有广告问题
上述代码点击全屏播放,到视频结束后。会弹出一堆腾讯广告。
添加如下代码:
1 2 3 4 5 6 7 8 9 10 11
| <script> window.onload = function() { var _video = document.querySelector("video"); _video.onended = function() { _video.play(); setTimeout(function() { _video.pause(); }, 100); }; }; </script>
|
在视频播放结束后让视频,重新播放,并暂停即可。
最后贴下完整代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> video{ width: 375px; } </style> </head> <body> <video width="375" src="视频地址" x-webkit-airplay="true" x5-playsinline="true" playsinline="true" x5-video-player-type="web" x5-video-player-fullscreeen="false" controls></video> <script> window.onload = function() { var _video = document.querySelector("video"); _video.onended = function() { _video.play(); setTimeout(function() { _video.pause(); }, 100); }; }; </script> </body> </html>
|