微信video 视频

全栈程序员-站长 • 2022年4月4日下午8:35 • 未分类 • 阅读 54

大家好，又见面了，我是你们的朋友全栈君。

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

这是很正常的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的宽高度之内播放。

部分安卓手机：

微信video 视频　　是全屏播放的。

360手机：

微信video 视频这种播放是内联播放（也称嵌入播放），我设置的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恶心的地方又来了

微信video 视频

我没有设置controls控价属性，那么视频下面怎么还有进度条、暂停、全屏等空间。我查阅了一些资料（如果有大佬，请不要喷我 – – ）。 android的video标签其实被微信给劫持了，video标签的控件用应该是微信video 视频这样的，微信视频播放的控件明显不一样，所以我认为微信把video劫持了，把视频放到微信自己的播放器里播放。