1.h5 video支持的格式
一共支持三種格式： Ogg、MPEG4、WebM。但這三種格式對于瀏覽器的兼容性卻各不同。
重點：比如MP4格式，MP4只是一個容器，里面還有一個叫編碼器的東西。格式雖然都是MP4但是html中只支持H.264的編碼格式。所以要用軟件來轉碼。
MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器
2.h5 video視頻添加封面圖片
<video poster="images/spbg.jpg" src="about.mp4" controls="controls">
您的瀏覽器不支持 video 標簽。
</video>
補充：有時會出現視頻封面無法鋪滿的情況，需要使用object-fit屬性鋪滿整個屏幕
3.h5 video標簽屏蔽下載按鈕和取消右鍵菜單
<style type="text/css">
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
</style>
如果是PC電腦上，完全可以用video標簽controlsList屬性，修改成如下即可！
<video controls controlsList="nodownload"></video>
//去除右鍵事件
$("video").live("contextmenu",function(){//取消右鍵事件
return false;});
4.H5兼容性，參考代碼:
<video
id="videowrap"
src="video/test.mp4"
poster="images/1.jpg" /*視頻封面*/
preload="auto"
webkit-playsinline="true" /*這個屬性是ios 10中設置可以
讓視頻在小窗內播放，也就是不是全屏播放*/
playsinline="true" /*IOS微信瀏覽器支持小窗內播放*/
x-webkit-airplay="allow"
x5-video-player-type="h5" /*啟用H5播放器,是wechat安卓版特性*/
x5-video-player-fullscreen="true" /*全屏設置，
設置為 true 是防止橫屏*/>
x5-video-orientation="portraint" /*播放器支付的方向，
landscape橫屏，portraint豎屏，默認值為豎屏*/
style="object-fit:fill">
</video
5.video在播放m3u8拖動進度條BUG 拖動回彈
video在播放m3u8拖動進度條，進入緩沖時會卡很久，比如當前播放1:20秒，拖動進度條到1:30秒，會進行緩沖，要緩沖很久，且緩沖好之后，會跳到1:35秒-1:45秒左右繼續播放，并不會在實際拖動進度條的位置播放。
此問題在小程序上不會出現，只在app端有 部分ios手機有這現象
問題已確認。
因為該m3u8是加密的hls流。每個切片大小為10s
1 卡頓問題，比如 當跳轉至下一分鐘時，需要連續下載6個切片且解密成功后，才能繼續播放，所以會有卡頓現象。
2 seek不準確的問題， 因為切片的最小單位是10s,每次跳轉后需要重新下載并且從下一個10s開始播放。
uni-app的video組件基于 ffmpeg。
上述兩個問題在 ffplay 和 vlc播放器上同樣存在。
微信小程序不存在此問題，從現象上看，因為他從第一秒播放的時候就預加載了盡可能多的切片到本地，后續的播放都是本地操作。
稍后video組件會支持類似的功能。
6.video 點擊全屏 如何橫屏播放
h5 video 橫屏播放
http://www.lxweimin.com/p/23f9dbfab563
7.video 視頻圖像 變形 拉伸 壓縮
video{
height:auto;
width:100%
}
方法一 css 寫法 video視頻自適應縮放顯示 根據寬高比16:9
https://blog.csdn.net/weixin_45266779/article/details/120990591
方法二 通過 js 計算的方法 設置 object-fit 屬性
https://www.cnblogs.com/congxueda/p/15091316.html
方法三 調整rotateX即可實現高度變小，也就是寬高比變大了
https://www.cnblogs.com/liuxianan/p/html5-video-resize.html
方法四
8.video ios 打開頁面 禁止 全屏 播放
video 標簽中添加playsinline屬性 webkit-playsinline='true' playsinline='true'
<video controls="controls"
webkit-playsinline='true'
playsinline='true'
preload="auto">
</video>
native層
Obj-C中，需要添加配置webview.allowsInlineMediaPlayback = YES;
Swift請查找相關API進行配置。
開發5+App，需要在manifest.json的plus節點下新增allowsInlineMediaPlayback節點為true。
"plus":{
"allowsInlineMediaPlayback": true
}
9.video ios 禁止 畫中畫 不顯示 畫中畫按鈕 disablePictureInPicture
<video id="video"
width="320" height="240" webkit-playsinline playsinline="true"
x5-video-player-type="h5" x5-video-player-fullscreen="false"
src="@/assets/images/content-service/1637212363598590.mp4"
x5-video-orientation="landscape" controls="controls"
controlslist="nodownload"
disablePictureInPicture
:poster="joinCmsServer(articleDetail.thumbnail)" >
your browser does not support the video tag
</video>
10. 監聽 全屏 和 非全屏事件
document.addEventListener('webkitfullscreenchange', function() {
var el = document.webkitFullscreenElement; //獲取全屏元素
console.log('--webkitfullscreenchange--' + el)
if(el) {
console.log('--全屏--')
} else {
console.log('--非全屏--')
}
});
<script>
//jQuery監聽事件(窗口狀態改變)
$(window).resize(function () {
if (checkIsFullScreen()) {
console.log("進入全屏");
} else {
console.log("退出全屏");
}
});
//js監聽事件(全屏狀態改變)
/*document.addEventListener('fullscreenchange', () => {
if (checkIsFullScreen()) {
console.log("進入全屏");
} else {
console.log("退出全屏");
}
});*/
//上面2個監聽事件可根據項目需求2選1,然后調用此檢測全屏方法
function checkIsFullScreen(){
var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
return isFullScreen == undefined ? false : isFullScreen;
}
</script>
安卓監聽進入全屏的事件：
jsvideo.addEventListener("x5videoenterfullscreen", () => {
console.log("進入全屏通知");
})
jsvideo.addEventListener("x5videoexitfullscreen", () => {
console.log("退出全屏通知");
})
IOS監聽進入全屏的事件：
jsvideo.addEventListener("webkitbeginfullscreen", () => {
console.log("進入全屏通知");
})
jsvideo.addEventListener("webkitendfullscreen", () => {
console.log("退出全屏通知");
})
