1.h5 video支持的格式
一共支持三種格式： Ogg僵腺、MPEG4鲤孵、WebM。但這三種格式對于瀏覽器的兼容性卻各不同辰如。
重點：比如MP4格式普监，MP4只是一個容器，里面還有一個叫編碼器的東西琉兜。格式雖然都是MP4但是html中只支持H.264的編碼格式凯正。所以要用軟件來轉(zhuǎn)碼。
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>
補充：有時會出現(xiàn)視頻封面無法鋪滿的情況廊散，需要使用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中設(shè)置可以
讓視頻在小窗內(nèi)播放幌氮，也就是不是全屏播放*/
playsinline="true" /*IOS微信瀏覽器支持小窗內(nèi)播放*/
x-webkit-airplay="allow"
x5-video-player-type="h5" /*啟用H5播放器,是wechat安卓版特性*/
x5-video-player-fullscreen="true" /*全屏設(shè)置缭受，
設(shè)置為 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秒左右繼續(xù)播放太防，并不會在實際拖動進度條的位置播放妻顶。
此問題在小程序上不會出現(xiàn)酸员，只在app端有 部分ios手機有這現(xiàn)象
問題已確認。
因為該m3u8是加密的hls流讳嘱。每個切片大小為10s
1 卡頓問題幔嗦，比如 當跳轉(zhuǎn)至下一分鐘時，需要連續(xù)下載6個切片且解密成功后沥潭，才能繼續(xù)播放邀泉，所以會有卡頓現(xiàn)象。
2 seek不準確的問題钝鸽， 因為切片的最小單位是10s,每次跳轉(zhuǎn)后需要重新下載并且從下一個10s開始播放汇恤。
uni-app的video組件基于 ffmpeg。
上述兩個問題在 ffplay 和 vlc播放器上同樣存在拔恰。
微信小程序不存在此問題因谎，從現(xiàn)象上看，因為他從第一秒播放的時候就預加載了盡可能多的切片到本地颜懊，后續(xù)的播放都是本地操作财岔。
稍后video組件會支持類似的功能。
6.video 點擊全屏 如何橫屏播放
h5 video 橫屏播放
http://www.reibang.com/p/23f9dbfab563
7.video 視頻圖像 變形 拉伸 壓縮
video{
height:auto;
width:100%
}
方法一 css 寫法 video視頻自適應縮放顯示 根據(jù)寬高比16:9
https://blog.csdn.net/weixin_45266779/article/details/120990591
方法二 通過 js 計算的方法 設(shè)置 object-fit 屬性
https://www.cnblogs.com/congxueda/p/15091316.html
方法三 調(diào)整rotateX即可實現(xiàn)高度變小河爹，也就是寬高比變大了
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請查找相關(guān)API進行配置。
開發(fā)5+App咸这，需要在manifest.json的plus節(jié)點下新增allowsInlineMediaPlayback節(jié)點為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. 監(jiān)聽 全屏 和 非全屏事件
document.addEventListener('webkitfullscreenchange', function() {
var el = document.webkitFullscreenElement; //獲取全屏元素
console.log('--webkitfullscreenchange--' + el)
if(el) {
console.log('--全屏--')
} else {
console.log('--非全屏--')
}
});
<script>
//jQuery監(jiān)聽事件(窗口狀態(tài)改變)
$(window).resize(function () {
if (checkIsFullScreen()) {
console.log("進入全屏");
} else {
console.log("退出全屏");
}
});
//js監(jiān)聽事件(全屏狀態(tài)改變)
/*document.addEventListener('fullscreenchange', () => {
if (checkIsFullScreen()) {
console.log("進入全屏");
} else {
console.log("退出全屏");
}
});*/
//上面2個監(jiān)聽事件可根據(jù)項目需求2選1,然后調(diào)用此檢測全屏方法
function checkIsFullScreen(){
var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
return isFullScreen == undefined ? false : isFullScreen;
}
</script>
安卓監(jiān)聽進入全屏的事件：
jsvideo.addEventListener("x5videoenterfullscreen", () => {
console.log("進入全屏通知");
})
jsvideo.addEventListener("x5videoexitfullscreen", () => {
console.log("退出全屏通知");
})
IOS監(jiān)聽進入全屏的事件：
jsvideo.addEventListener("webkitbeginfullscreen", () => {
console.log("進入全屏通知");
})
jsvideo.addEventListener("webkitendfullscreen", () => {
console.log("退出全屏通知");
})
