問(wèn)題
在安卓版微信里，video在播放的時(shí)候，如果在沒有做任何處理的情況下，微信會(huì)全屏播放你的視頻，會(huì)嚴(yán)重影響一些例如直播之類的邊看視頻邊交互的H5應(yīng)用（注：在iOS里可以通過(guò)playsinline（iOS10之前需要寫成webkit-playsinline）這個(gè)屬性來(lái)讓視頻不默認(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í)編程語(yǔ)言，通過(guò)解釋執(zhí)行，是一門動(dòng)態(tài)類型，面向?qū)ο螅ɑ谠停┑慕忉屝驼Z(yǔ)言[4]。它已經(jīng)由ECMA（歐洲電腦制造商協(xié)會(huì)）通過(guò)ECMAScript實(shí)現(xiàn)語(yǔ)言的標(biāo)準(zhǔn)化[4]。它被世界上的絕大多數(shù)網(wǎng)站所使用，也被世界主流瀏覽器（Chrome、IE、FireFox、Safari、Opera）支持。JavaScript是一門基于原型、函數(shù)先行的語(yǔ)言[5]，是一門多范式的語(yǔ)言，它支持面向?qū)ο缶幊蹋钍骄幊蹋约昂瘮?shù)式編程。它提供語(yǔ)法來(lái)操控文本、數(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上保持一致。（
- 還好微信還是留了些后路，下面我來(lái)說(shuō)一下第二種方法的具體操作。
具體操作
- 先看這個(gè)騰訊H5同層播放器接入規(guī)范文檔。
- 注意看
x5-video-player-type這個(gè)屬性以及x5videoenterfullscreen、x5videoexitfullscreen這兩個(gè)事件 -
x5-video-player-type可以讓視頻播放的時(shí)候，視頻上可以有其他元素，那么我們可以在視頻播放的時(shí)候把視頻作為整頁(yè)面的背景其他元素放在視頻之上。 - 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í)編程語(yǔ)言，通過(guò)解釋執(zhí)行，是一門動(dòng)態(tài)類型，面向?qū)ο螅ɑ谠停┑慕忉屝驼Z(yǔ)言[4]。它已經(jīng)由ECMA（歐洲電腦制造商協(xié)會(huì)）通過(guò)ECMAScript實(shí)現(xiàn)語(yǔ)言的標(biāo)準(zhǔn)化[4]。它被世界上的絕大多數(shù)網(wǎng)站所使用，也被世界主流瀏覽器（Chrome、IE、FireFox、Safari、Opera）支持。JavaScript是一門基于原型、函數(shù)先行的語(yǔ)言[5]，是一門多范式的語(yǔ)言，它支持面向?qū)ο缶幊蹋钍骄幊蹋约昂瘮?shù)式編程。它提供語(yǔ)法來(lái)操控文本、數(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è)問(wèn)題，雖然還有些瑕疵，不過(guò)也還行：）
感謝您的閱讀，本文由 趙的拇指 版權(quán)所有。原文地址： https://www.zhaofinger.com/detail/23
