問題
在安卓版微信里飒房，video在播放的時(shí)候，如果在沒有做任何處理的情況下媚值，微信會(huì)全屏播放你的視頻狠毯，會(huì)嚴(yán)重影響一些例如直播之類的邊看視頻邊交互的H5應(yīng)用（注：在iOS里可以通過playsinline（iOS10之前需要寫成webkit-playsinline）這個(gè)屬性來讓視頻不默認(rèn)全屏播放）。示例如下：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>測(cè)試微信視頻</title>
<style>
video {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<video src="https://www.seastart.tv/introduce.mp4" playsinline webkit-playsinline></video>
<p>
JavaScript褥芒，一種高級(jí)編程語言嚼松，通過解釋執(zhí)行，是一門動(dòng)態(tài)類型锰扶，面向?qū)ο螅ɑ谠停┑慕忉屝驼Z言[4]献酗。它已經(jīng)由ECMA（歐洲電腦制造商協(xié)會(huì)）通過ECMAScript實(shí)現(xiàn)語言的標(biāo)準(zhǔn)化[4]。它被世界上的絕大多數(shù)網(wǎng)站所使用坷牛，也被世界主流瀏覽器（Chrome罕偎、IE、FireFox京闰、Safari颜及、Opera）支持。JavaScript是一門基于原型忙干、函數(shù)先行的語言[5]器予，是一門多范式的語言，它支持面向?qū)ο缶幊叹杵龋钍骄幊糖瑁约昂瘮?shù)式編程。它提供語法來操控文本施戴、數(shù)組反浓、日期以及正則表達(dá)式等，不支持I/O赞哗，比如網(wǎng)絡(luò)雷则、存儲(chǔ)和圖形等，但這些都可以由它的宿主環(huán)境提供支持肪笋。
</p>
</body>
</html>
圖片：
-
未播放時(shí)：未播放時(shí)
-
播放時(shí)：播放時(shí)
可以看到第二個(gè)圖里播放視頻的時(shí)候下面的文字就不見了月劈，會(huì)嚴(yán)重影響用戶體驗(yàn)，不只是微信藤乙，很多國(guó)產(chǎn)瀏覽器都會(huì)被視頻劫持播放...哎猜揪！用原生的不好嗎？
解決方法
- 和微信達(dá)成某種py交易坛梁，據(jù)我發(fā)現(xiàn)有些視頻網(wǎng)站在安卓版微信里是可以內(nèi)聯(lián)播放的而姐，和iOS上保持一致。（
- 還好微信還是留了些后路划咐，下面我來說一下第二種方法的具體操作拴念。
具體操作
- 先看這個(gè)騰訊H5同層播放器接入規(guī)范文檔钧萍。
- 注意看
x5-video-player-type這個(gè)屬性以及x5videoenterfullscreen、x5videoexitfullscreen這兩個(gè)事件 -
x5-video-player-type可以讓視頻播放的時(shí)候政鼠，視頻上可以有其他元素风瘦，那么我們可以在視頻播放的時(shí)候把視頻作為整頁面的背景其他元素放在視頻之上。 - css中video的
object-fit以及object-position可以將真正的視頻放在容器該有的位置公般。
好了有了以上的東西弛秋，直接上代碼看效果吧(為了方便我這里要引入一下早已被大佬拋棄的jQuery)：
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>測(cè)試微信視頻</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
video {
width: 100%;
height: 211px;
}
video.android-full {
position: relative;
height: 100%;
object-fit: contain;
object-position: left 0 top 0;
}
video.android-full::-webkit-media-controls-enclosure {
-webkit-appearance: none;
position: absolute;
top: 166px;
}
.desc.android-full {
position: absolute;
top: 211px;
}
</style>
</head>
<body>
<video
src="https://www.seastart.tv/introduce.mp4"
x5-video-player-type="h5"
playsinline
webkit-playsinline
controls></video>
<p class='desc'>
JavaScript，一種高級(jí)編程語言俐载，通過解釋執(zhí)行，是一門動(dòng)態(tài)類型登失，面向?qū)ο螅ɑ谠停┑慕忉屝驼Z言[4]遏佣。它已經(jīng)由ECMA（歐洲電腦制造商協(xié)會(huì)）通過ECMAScript實(shí)現(xiàn)語言的標(biāo)準(zhǔn)化[4]。它被世界上的絕大多數(shù)網(wǎng)站所使用揽浙，也被世界主流瀏覽器（Chrome状婶、IE、FireFox馅巷、Safari膛虫、Opera）支持。JavaScript是一門基于原型钓猬、函數(shù)先行的語言[5]稍刀，是一門多范式的語言，它支持面向?qū)ο缶幊坛ú埽钍骄幊陶嗽拢约昂瘮?shù)式編程。它提供語法來操控文本澳迫、數(shù)組局齿、日期以及正則表達(dá)式等，不支持I/O橄登，比如網(wǎng)絡(luò)抓歼、存儲(chǔ)和圖形等，但這些都可以由它的宿主環(huán)境提供支持拢锹。
</p>
<script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script>
<script>
var $video = $('video');
var $desc = $('.desc');
$video[0].addEventListener('x5videoenterfullscreen', function() {
$video.addClass('android-full');
$desc.addClass('android-full');
});
$video[0].addEventListener('x5videoexitfullscreen', function() {
$video.removeClass('android-full');
$desc.removeClass('android-full');
});
</script>
</body>
</html>
效果圖：
效果圖
可以看到才有這個(gè)方法可以算是比較好的處理安卓版微信這個(gè)問題谣妻，雖然還有些瑕疵，不過也還行：）
感謝您的閱讀面褐，本文由 趙的拇指 版權(quán)所有拌禾。原文地址： https://www.zhaofinger.com/detail/23
