最近公司的項(xiàng)目中出了需要在局部播放視頻的需求贸辈，我們都知道HTML5中有一個(gè)專(zhuān)門(mén)的標(biāo)簽video用來(lái)嵌入視頻瓮床。不過(guò)奕枢，這個(gè)video標(biāo)簽有很多的屬性可能很多同學(xué)并不是很熟悉夭问，下面我們來(lái)認(rèn)識(shí)一下：
在網(wǎng)頁(yè)里嵌入HTML5視頻播放器的方法非常簡(jiǎn)單：
<video
controls
autoplay
loop
preload="auto"
poster="img/popup-img.png"
webkit-playsinline="true"
playsinline="true"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x-webkit-airplay="allow"
x5-video-orientation="portraint"
style="object-fit:fill">
<source src="./img/WeChatSight125.mp4" type="video/mp4">
<source src="./img/WeChatSight125.ogg" type="video/ogg; codecs=dirac, speex">
<p>你的瀏覽器不支持 <code>video</code> 標(biāo)簽.</p>
</video>
controls : 顯示標(biāo)準(zhǔn)的 HTML5 視頻/音頻播放器控制條、控制按鈕晃痴。
autoplay : 讓文件自動(dòng)播放残吩。
loop : 讓文件循環(huán)播放。
-
preload="auto" 屬性是用來(lái)緩存大體積文件的倘核。它有三個(gè)可選值：
- "none" 不緩存
- "auto" 緩存
- "metadata" 只緩存文件元信息
poster="img/popup-img.png" /視頻封面/
webkit-playsinline="true" /這個(gè)屬性在 ios 10中設(shè)置有用泣侮，其他的目前還不起作用，讓視頻在小窗內(nèi)播放紧唱，也就是不是全屏播放/
playsinline="true" /IOS微信瀏覽器支持小窗內(nèi)播放/
x5-video-player-type="h5" /啟用H5播放器活尊，是wechat安卓版特性/
x5-video-player-fullscreen="true" /全屏設(shè)置，設(shè)置為 true 是防止橫屏/>
x5-video-orientation="portraint" /播放器屏幕的方向漏益，landscape橫屏蛹锰，portraint豎屏，默認(rèn)值為豎屏/
source標(biāo)簽是為了能夠兼容各種瀏覽器對(duì)不同媒體類(lèi)型的支持绰疤，我們可以用多個(gè) <source> 元素來(lái)提供多個(gè)不同的媒體類(lèi)型铜犬。支持mp4格式視頻流的瀏覽器可以播放mp4文件。如果不支持峦睡，可以播放Ogg文件翎苫。
codecs=dirac, speex 是用來(lái)指定播放使用的解碼器(codecs); 這樣就可以更精確的讓瀏覽器如何播放提供的視頻权埠。
以上這些屬性可根據(jù)自身的情況來(lái)添加榨了，并不一定全部都要。
上面這些屬性中有幾個(gè)特別要說(shuō)明一下：
webkit-playsinline和playsinline：視頻播放時(shí)局域播放攘蔽，不脫離文檔流 龙屉。但是這個(gè)屬性比較特別， 需要嵌入網(wǎng)頁(yè)的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES，webview.allowsInlineMediaPlayback = YES转捕，才能生效作岖。換句話說(shuō)，如果APP不設(shè)置五芝，你頁(yè)面中加了這標(biāo)簽也無(wú)效痘儡，這也就是為什么安卓手機(jī)WeChat 播放視頻總是全屏，因?yàn)锳PP不支持playsinline枢步，而ISO的WeChat卻支持沉删。
這里就要補(bǔ)充下，如果是想做全屏直播或者全屏H5體驗(yàn)的用戶醉途，ISO需要設(shè)置刪除 webkit-playsinline 標(biāo)簽矾瑰，因?yàn)槟阍O(shè)置 false 是不支持的 ，安卓則不需要隘擎，因?yàn)槟J(rèn)全屏殴穴。但這時(shí)候全屏是有播放控件的，無(wú)論你有沒(méi)有設(shè)置control货葬。
x-webkit-airplay="allow" 暫時(shí)無(wú)法確切的知道其作用采幌，但是小編猜測(cè)，這個(gè)屬性應(yīng)該是使此視頻支持ios的AirPlay功能宝惰。使用AirPlay可以直接從使用iOS的設(shè)備上的不同位置播放視頻植榕、音樂(lè)還有照片文件，也就是說(shuō)通過(guò)AirPlay功能可以實(shí)現(xiàn)影音文件的無(wú)線播放尼夺，當(dāng)然前提是播放的終端設(shè)備也要支持相應(yīng)的功能尊残。
x5-video-player-type：?jiǎn)⒂猛瑢親5播放器，就是在視頻全屏的時(shí)候淤堵，div可以呈現(xiàn)在視頻層上寝衫，也是WeChat安卓版特有的屬性。同層播放別名也叫做沉浸式播放拐邪，播放的時(shí)候看似全屏慰毅，但是已經(jīng)除去了control和微信的導(dǎo)航欄，只留下"X"和"<"兩鍵扎阶。目前的同層播放器只在Android（包括微信）上生效汹胃，暫時(shí)不支持iOS。至于為什么同層播放只對(duì)安卓開(kāi)放东臀，是因?yàn)榘沧坎荒芟馡SO一樣局域播放着饥，默認(rèn)的全屏?xí)沟靡恍┙缑娌僮鞅蛔钄r，如果是全屏H5還好惰赋，但是做直播的話宰掉，諸如彈幕那樣的功能就無(wú)法實(shí)現(xiàn)了，所以這時(shí)候同層播放的概念就解決了這個(gè)問(wèn)題。不過(guò)在測(cè)試的過(guò)程中發(fā)現(xiàn)轨奄，不同版本的ISO和安卓效果略有不同孟害。
x5-video-orientation：聲明播放器支持的方向，可選值landscape 橫屏, portraint豎屏挪拟。默認(rèn)值portraint挨务。無(wú)論是直播還是全屏H5一般都是豎屏播放，但是這個(gè)屬性需要x5-video-player-type開(kāi)啟H5模式
x5--video--player--fullscreen：全屏設(shè)置玉组。它又兩個(gè)屬性值耘子，ture和false，true支持全屏播放球切，false不支持全屏播放谷誓。
其實(shí)，ISO 微信瀏覽器是Chrome的內(nèi)核吨凑，相關(guān)的屬性都支持捍歪，也是為什么X5同層播放不支持的原因。安卓微信瀏覽器是X5內(nèi)核鸵钝，一些屬性標(biāo)簽比如playsinline就不支持糙臼，所以始終全屏。
還有個(gè)問(wèn)題恩商，在Android的微信里面变逃，就算加上了上面的屬性，還會(huì)出現(xiàn)上下有黑邊怠堪，不能全屏的問(wèn)題揽乱。
解決辦法：給video加上object-fit: fill;的style屬性。如果還是有黑邊有可能是視頻尺寸不合適粟矿。
但是光用上面這些屬性并不能解決頁(yè)面在移動(dòng)端不全屏播放的問(wèn)題凰棉，而我們下面這個(gè)方法也只能阻止視頻在蘋(píng)果手機(jī)上全屏播放，安卓的部分機(jī)型用下面的方法也解決不了全屏播放的問(wèn)題陌粹。
下面重點(diǎn)來(lái)了——具體方法就是用這個(gè)特別好的一個(gè)插件：iphone-inline-video
進(jìn)入到github地址中撒犀，可以看到一個(gè)demo的文件夾，目錄結(jié)構(gòu)如下：
demo中還有一個(gè)用來(lái)展示3d效果的頁(yè)面——threejs.html掏秩，目前項(xiàng)目中用不到或舞，可以先不管它。
通過(guò)查看選中的幾個(gè)文件的代碼可以知道具體如何使用這個(gè)插件蒙幻，我下載到本地映凳，也截好了圖，我們一起來(lái)看一下杆煞。
在使用的時(shí)候魏宽，必須要加上playsinline這個(gè)屬性，這個(gè)很關(guān)鍵决乎，其余的幾個(gè)屬性可以根據(jù)自己的情況來(lái)添加队询，引用iphone-inline-video.js這個(gè)文件也是必須的，另外构诚，還有一些css代碼蚌斩，也是必須要加的，我自己在項(xiàng)目根據(jù)自身的情況做了一些刪減范嘱，具體的可以看看下面我自己使用的代碼：
HTML代碼：
<div class="video-container">
<video controls playsinline
preload="auto"
poster="img/popup-img.png"
webkit-playsinline="true"
playsinline="true"
x5-video-orientation="portraint">
<source src="./img/WeChatSight125.mp4" type="video/mp4">
<p>你的瀏覽器不支持 <code>video</code> 標(biāo)簽.</p>
</video>
</div>
css代碼：
.video-container{
width: 100%;
height: 5.6rem;
overflow: hidden;
}
video {
display: block;
width: 100%;
height: calc(100vw / 16 * 9);
margin: auto;
}
@media (min-width: 500px) {
video {
height: calc(500px / 16 * 9)
}
}
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
opacity: 0;
pointer-events: none;
width: 5px;
}
figure {
width: 100%;
}
js代碼：
<script src="js/iphone-inline-video.js"></script>
<script src="js/videos.js"></script>
videos.js中的代碼看下圖：
我這里并沒(méi)有展開(kāi)所有的代碼送膳，大家在自己用的時(shí)候可以到github上去下載，我是直接復(fù)制粘帖過(guò)來(lái)的丑蛤，除了頂部劃了紅色下劃線的兩個(gè)小地方需要注意的叠聋，其他都沒(méi)有動(dòng)過(guò)。
另外再說(shuō)一個(gè)受裹，用純HTML+CSS的方法碌补，控制Video的視頻與Poster的海報(bào)圖片尺寸一致（非視頻原尺寸，比例鎖定）棉饶。
目前暫時(shí)想到的解決辦法就是在video標(biāo)簽外面加一個(gè)div厦章，寬高和video一樣，然后不用 poster屬性照藻，直接給div加background-image屬性袜啃，效果和poster一樣，再使用background-size就可以控制寬高了
<div id="image-wrap"> <div></div></div>
/* scss 語(yǔ)法 */
#image-wrap {
width: 100%;
height: auto;
padding-bottom: 70%;/* 比例 10 比 7 */
position: relative;
border: 1px solid red;
& > div {
background: url(/path/to/your/image) no-repeat center center;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background-size: 100%;
}
}
如果使用videojs幸缕，則可以在videojs的css文件中找到.vjs-poster：
.vjs-poster {
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-position: 50% 50%; /* background-size: contain; */
background-size: 100% 100%;
background-color: #000000;
cursor: pointer;
margin: 0;
padding: 0;
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
height: 100%;
}
將默認(rèn)的：
background-size: contain;
修改為：
background-size: 100% 100%;
以上內(nèi)容部分參考自下面兩篇文章群发，更多詳細(xì)內(nèi)容可以進(jìn)入下面的網(wǎng)頁(yè)中了解：
HTML5視頻<video>/音頻<audio>的用法介紹
H5案例分享：微信視頻播放全屏問(wèn)題
作者：湯利利
鏈接：http://www.reibang.com/p/8c17967adee7
來(lái)源：簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處发乔。
