這是很正常的video寫法，我們查看微信是什麼樣式 這樣種video控制項樣式並不是我們想要的。所有我們需要自己來寫視頻封面的樣式。 常用的方式：自己來設置視頻封面的樣式。 第一步：找一張視頻封面，設置大小。 第二步：video隱藏。 第三步： 用js來監聽用戶是否點擊圖片。用戶點擊圖片，則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同層播放用的還是挺方便的。我也沒有太深的研究。
由於才剛寫博客，所以文章的文采不好，請見諒。
