微信video 视频

<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