大家好，又见面了，我是你们的朋友全栈君。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
这是很正常的video写法，我们查看微信是什么样式
这样种video控件样式并不是我们想要的。所有我们需要自己来写视频封面的样式。
常用的方式：自己来设置视频封面的样式。
第一步：找一张视频封面，设置大小。
第二步：video隐藏。
第三步： 用js来监听用户是否点击图片。用户点击图片，则video显示，并且play()方法播放（jq获取的元素无法调用此方法）。
第四步：监听video是否退出，如果退出则隐藏video。（因为微信视频 ios和部分安卓是全屏播放视频的）。
var video = document.getElementById('');
video.addEventListener('pause',function () {
video.style.display = 'none'
});
jq调用视频播放事件。可用$(‘#video’).trigger(‘play’) 此方法调用。
以上就是模拟视频播放。
但是微信的video视频是恶心到家了，有的安卓手机（例如360手机）是内联播放。
什么是内联播放：指视频不是全屏的，而在设置video的宽高度之内播放。
部分安卓手机：
是全屏播放的。
360手机：
这种播放是内联播放（也称嵌入播放），我设置的video 宽高为 300* 360的。
要解决有两种方法：
第一：所有手机都内联播放
设置一下三个属性即可内联播放。
playsinline webkit-playsinline x5-playsinline
第二：手机全部全屏播放
看到上面部分手机是默认全屏。360不全屏怎么能让全屏。可以使用video.js (此方法是我的解决方法）。
我们引入video.js文件
<link rel="stylesheet" href="css/video-js.css">
<script src="js/video.min.js"></script>
<video width='300' height='300' id='video' playsinline webkit-playsinline x5-playsinline>
<source src="heibao.mp3" type="video/mp4">
</video>
<script>
var myPlayer = videojs('video');
myPlayer.requestFullscreen();
</script>
这样解决了各个手机视频的不统一。但是!!!微信的android恶心的地方又来了
我没有设置controls控价属性，那么视频下面怎么还有进度条、暂停、全屏等空间。我查阅了一些资料（如果有大佬，请不要喷我 – – ）。 android的video标签其实被微信给劫持了，video标签的控件用应该是
这样的，微信视频播放的控件明显不一样，所以我认为微信把video劫持了，把视频放到微信自己的播放器里播放。
废话不多说怎么把微信视频的控件去掉：以下此属性不支持ios。（想要设置进度条的样式，基本上都是采用的x5同层播放，把微信的进度条去掉，自己添加进度条）
想要去掉微信的控件，可以使用x5的同层模式。 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"
这是用了 x5同层的播放器样式。没有了微信端控件，详情可以看 https://x5.tencent.com/tbs/guide/video.html 官网内容。
后来我采用的是第一种，所有手机全屏播放视频。没有研究video的视频。x5同层播放用的还是挺方便的。我也没有太深的研究。
由于才刚写博客，所以文章的文采不好，请见谅。
转载于:https://www.cnblogs.com/xf-zhao/p/8559037.html
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/125078.html原文链接：https://javaforall.net
![GOBY扫描篇[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
