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

 

因爲纔剛寫博客，因此文章的文采很差，請見諒。