微信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同层播放用的仍是挺方便的。我也没有太深的研究。

 

因为才刚写博客，因此文章的文采很差，请见谅。