安卓版微信視頻播放全屏處理--摘抄
阿新 • • 發佈: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.addClass