安卓版微信視頻播放全屏處理--摘抄
阿新 • • 發佈：2018-01-11
pull ont 比較 嚴重 函數 函數式 pat sea gpo
story
01-09 閱讀 284 收藏 0
收藏
在安卓版微信裏，video 在播放的時候，如果在沒有做任何處理的情況下，微信會全屏播放你的視頻，會嚴重影響一些例如直播之類的邊看視頻邊交互的 H5 應用
閱讀原文折疊收起
安卓版微信視頻播放全屏處理
安卓版微信視頻播放全屏處理
來源：www.zhaofinger.com問題
在安卓版微信裏，video在播放的時候，如果在沒有做任何處理的情況下，微信會全屏播放你的視頻，會嚴重影響一些例如直播之類的邊看視頻邊交互的H5應用（註：在iOS裏可以通過playsinline（iOS10之前需要寫成webkit-playsinline）這個屬性來讓視頻不默認全屏播放）。示例如下：
代碼：
<!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>測試微信視頻</title>
<style>
video {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<video src="https://www.seastart.tv/introduce.mp4" playsinline webkit-playsinline></video>
<p>
JavaScript，一種高級編程語言，通過解釋執行，是一門動態類型，面向對象（基於原型）的解釋型語言[4]。它已經由ECMA（歐洲電腦制造商協會）通過ECMAScript實現語言的標準化[4]。它被世界上的絕大多數網站所使用，也被世界主流瀏覽器（Chrome、IE、FireFox、Safari、Opera）支持。JavaScript是一門基於原型、函數先行的語言[5]，是一門多範式的語言，它支持面向對象編程，命令式編程，以及函數式編程。它提供語法來操控文本、數組、日期以及正則表達式等，不支持I/O，比如網絡、存儲和圖形等，但這些都可以由它的宿主環境提供支持。
</p>
</body>
</html> 圖片：
- 未播放時：
- 播放時：
可以看到第二個圖裏播放視頻的時候下面的文字就不見了，會嚴重影響用戶體驗，不只是微信，很多國產瀏覽器都會被視頻劫持播放…哎！用原生的不好嗎？
解決方法
- 和微信達成某種py交易，據我發現有些視頻網站在安卓版微信裏是可以內聯播放的，和iOS上保持一致。（
- 還好微信還是留了些後路，下面我來說一下第二種方法的具體操作。
具體操作
- 先看這個騰訊H5同層播放器接入規範文檔。
- 註意看
x5-video-player-type這個屬性以及x5videoenterfullscreen、x5videoexitfullscreen這兩個事件 x5-video-player-type可以讓視頻播放的時候，視頻上可以有其他元素，那麽我們可以在視頻播放的時候把視頻作為整頁面的背景其他元素放在視頻之上。- 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>測試微信視頻</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，一種高級編程語言，通過解釋執行，是一門動態類型，面向對象（基於原型）的解釋型語言[4]。它已經由ECMA（歐洲電腦制造商協會）通過ECMAScript實現語言的標準化[4]。它被世界上的絕大多數網站所使用，也被世界主流瀏覽器（Chrome、IE、FireFox、Safari、Opera）支持。JavaScript是一門基於原型、函數先行的語言[5]，是一門多範式的語言，它支持面向對象編程，命令式編程，以及函數式編程。它提供語法來操控文本、數組、日期以及正則表達式等，不支持I/O，比如網絡、存儲和圖形等，但這些都可以由它的宿主環境提供支持。
</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.