H5 video的兼容问题汇总

2019-10-25 本文已影响0人神刀

video 兼容问题汇总：

问题：某些手机游览器端（测试ios自带游览器会出现这种情况）：解决方案：非静音模式下进入页面不能开启自动播放（一般是各游览器自身做了限制，可以通过监听video某些事件来开启播放，或者可以通过引入hls.js来代替原生video） if(isWeChart){

document.addEventListener("WeixinJSBridgeReady", function () {

video.play() // 微信内通过绑定WeixinJSBridgeReady开启自动播放

}, false);

}

问题：设置这两个属性 [x5-video-player-type="h5" , x5-video-player-fullscreen="true”] 后，（需要在播放前设置好，播放之后设置无效）

QQ游览器会强制开启全屏播放（同层渲染模式），微信却不会，按道理微信和QQ游览器使用的是同一内核

解决方案：
是QQ游览器版本问题，微信同时使用两个内核；参考：
var TBS = ua.match(/TBS/([\d.]+)/) //微信能获取到
var QQB = ua.match(/MQQBrowser/([\d.]+)/) //微信和QQ游览器和能获取到

手QTBS: TBS>= 036855 //支持同层播放器（x5-video-player-type）
微信TBS：

TBS >= '036849' // 支持同层播放器（x5-video-player-type）

TBS >= '036900' //正确支持 x5videoenterfullscreen(进入全屏通知事件)
036849 <= TBS < 036900 //x5videoenterfullscreen(进入全屏通知事件)是反的

QQ游览器：
QQB = '7.1' // 支持同层播放器（x5-video-player-type）

QQB = '7.2' // 正确支持 x5videoenterfullscreen（进入全屏通知事件）
7.1 <= QQB < 7.2 // x5videoenterfullscreen（进入全屏通知事件) 是反的

同层播放器跟随手机自动旋转

问题：安卓下微信和游览器不支持.m3u8流（网上说法，但高版本好像支持，但也表现出卡顿和延迟）解决翻案：可以通过引入hls.js来替代原生video播放，ios 和 safari 原生video 支持.m3u8流

疑问：ios下微信内直不支持原生video播放.m3u8流其他 var ua = navigator.userAgent;

var TBS = ua.match(/TBS/([\d.]+)/);

var QQB = ua.match(/MQQBrowser/([\d.]+)/);

var isWeChart = !!/MicroMessenger/i.test(ua);

var isIOS = !!ua.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);

var isOS = !!ua.match(/AppleWebKit/([\d.]+)/);var ua = navigator.userAgent;

var TBS = ua.match(/TBS/([\d.]+)/);

var QQB = ua.match(/MQQBrowser/([\d.]+)/);

var isWeChart = !!/MicroMessenger/i.test(ua);

var isIOS = !!ua.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);

var isOS = !!ua.match(/AppleWebKit/([\d.]+)/);

var video = document.getElementById('video');

var msg = "video.muted: "+video.muted+

"\nisWeChart: "+isWeChart+

"\nisIos: "+isIOS+

"\nisOS: "+isOS+

"\nTBS: "+TBS+

"\nQQB: "+QQB+

"\n\nUA: "+ ua

alert(msg)

if (isIos()) {

if (screen.height == 812 && screen.width == 375){

$('.group-area').addClass("isIOS");

$('.controls-area').addClass("isIOS")

}

if(isWeChart){

document.addEventListener("WeixinJSBridgeReady", function () {

video.play() // 微信内自动播放

}, false);

}

iOS 10 Safari 视频播放新政策

自动播放

iOS 10 Safari 允许自动播放以下两种视频：

无音轨视频
无声音视频（设置了 muted 属性可以通过

需在可视区域内

或 video.play() 两种方式来自动播放 video.play() 返回的是 Promise，如果不满足自动播放条件，会触发 reject 行为。
内联播放

在 iOS 10 Safari 中，通过

可以让视频内联播放。设置了 playsinline 属性的视频在播放时不会自动全屏，但用户可以点击全屏按钮来手动全屏；没有设置 playsinline 的视频会在播放时自动全屏。无论是否设置 playsinline 属性，退出全屏后视频都会继续播放。

playsinline 属性在 iOS 10 之前需要写成 webkit-playsinline，它的浏览器厂商前缀在 iOS 10 中被移除。但是目前 iOS 微信还不支持去掉前缀的写法，两个属性最好都加上。

显然，

必须和 playsinline 属性一起使用。也就是说，只有默认内联播放的视频才有可能自动播放，这一点很容易理解。

应用场景 video很适合用作网页背景，取代 GIF：

这段代码使用

来替代 GIF 动画，并考虑了降级。但在 iOS 10- Safari 中，由于视频无法自动并内联播放，体验很差。要解决这个问题，可以使用 CSS 的 Media Queries：

http://www.cocoachina.com/ios/20161013/17754.html

H5的Video事件，控制方法，及监听

1.基本属性

src ：视频的属性

poster：视频封面，没有播放时显示的图片

preload：预加载

autoplay：自动播放

loop：循环播放

controls：浏览器自带的控制条

width：视频宽度

height：视频高度

var video = document.getElementById("media");

video的方法和属性

HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

video.error; //null:正常
video.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

网络状态:
video.currentSrc; //返回当前资源的URL
video.src = value; //返回或设置当前资源的URL
video.canPlayType(type); //是否能播放某种格式的资源
video.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
video.load(); //重新加载src指定的资源
video.buffered; //返回已缓冲区域，TimeRanges
video.preload; //none:不预载 metadata:预载资源信息 auto://准备状态
video.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
video.seeking; //是否正在seeking//回放状态Media.currentTime = value; //当前播放的位置，赋值可改变位置
video.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
video.duration; //当前资源长度流返回无限
video.paused; //是否暂停
video.defaultPlaybackRate = value;//默认的回放速度，可以设置
video.playbackRate = value;//当前播放速度，设置后马上改变
video.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
video.seekable; //返回可以seek的区域 TimeRanges
video.ended; //是否结束
video.autoPlay; //是否自动播放
video.loop; //是否循环播放
video.play(); //播放
video.pause(); //暂停

视频控制
video.controls;//是否有默认控制条
video.volume = value; //音量
video.muted = value; //静音

TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

相关事件
var eventTester = function(e,fn){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
fn&&fn()
},false);
}

eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据，并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变

css兼容性。

 1\. flex布局在  iphone6 plus的手机时，无法生效。（解决： display: -webkit-flex;）              

 2\. vh单位 无法在微信浏览器中使用。  使用js计算高度设置。

Android 系统下的微信 User Agent

Mozilla/5.0 (Linux; Android 7.1.1; MI 6 Build/NMF26X; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN

Mozilla/5.0 (Linux; Android 7.1.1; OD103 Build/NMF26F; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043632 Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/4G Language/zh_CN

Mozilla/5.0 (Linux; Android 6.0.1; SM919 Build/MXB48T; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043632 Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN

Mozilla/5.0 (Linux; Android 5.1.1; vivo X6S A Build/LMY47V; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043632 Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN

Mozilla/5.0 (Linux; Android 5.1; HUAWEI TAG-AL00 Build/HUAWEITAG-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043622 Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/4G Language/zh_CN

iPhone 系统下的微信 User Agent

Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13F69 MicroMessenger/6.6.1 NetType/4G Language/zh_CN

Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 MicroMessenger/6.6.1 NetType/4G Language/zh_CN

Mozilla/5.0 (iPhone; CPU iPhone OS 11_1_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Mobile/15B150 MicroMessenger/6.6.1 NetType/WIFI Language/zh_CN

Mozilla/5.0 (iphone x Build/MXB48T; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043632 Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN

微信内置浏览器与小程序中的 User Agent 对比

// 安卓系统中小程序 User Agent

// 安卓系统中微信内置浏览器 User Agent

H5同层播放器接入规范

x5-video-player-type 启用Ｈ5同层播放器

通过video属性“x5-video-player-type”声明启用同层H5播放器

x5-video-player-type支持的值类型：h5

示例：

注：这个属性需要在播放前设置好，播放之后设置无效，下面的’x5-video-player-fullscreen’也是一样

x5-video-player-fullscreen全屏方式

视频播放时将会进入到全屏模式

如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块）

注：声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现

需要监听窗口大小变化(resize)实现全屏

window.onresize = function(){

test_video.style.width = window.innerWidth + "px";

test_video.style.height = window.innerHeight + "px";

}

注: : 1. 为了让视频真正铺满全屏,可以适当让video的显示区域大于视口区域,这样在显示时在视口外的部截掉后,不会出四周黑边的情况

x5-video-orientation 控制横竖屏

功能：声明播放器支持的方向

可选值： landscape 横屏, portraint竖屏

默认值：portraint

e.g: http://res.imtt.qq.com/qqbrowser/js/test_video_orientation_attr.html

横屏

竖屏

跟随手机自动旋转

注: 此属性只在声明了x5-video-player-type=”h5”情况下生效

事件回调

x5videoenterfullscreen进入全屏通知

支持版本: TBS中从>=036900开始支持，QB中是>=7.2开始支持

x5videoenterfullscreen: 表示播放器进入全屏状态

示例：

通过JS监听事件

myVideo.addEventListener("x5videoenterfullscreen", function(){

alert("player enterfullscreen");

})

x5videoexitfullscreen退出全屏通知

x5videoexitfullscreen: 表示播放器退出了全屏状态

使用方法与x5videoenterfullscreen类似

使用同层播放器的一些建议

1. 监听resize 事件实现自适应视口大小变化，视频播放时会调整视口大小

2. 在视频播放期间的交互，弹框，字幕在视频视频区域中，不要在视频区域外

3. 对于直播类全屏视频，最好不要在最顶部放交互性元素

交互性视频实现建议

允许视频区域(video元素)之上的操作

1. 对于需要全屏交互的,可以将video区域设置为视口大小>

同层播放器支持版本

TBS微信:

TBS内核>=036849 后开始支持

UA示例：

Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML,like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN

TBS手Q:

TBS内核>= 036855

Android QQ浏览器：

浏览器版本>=7.1

UA示例：

UserAgent: Mozilla/5.0 (Linux; U; Android 4.4.4; zhcn; OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

视频显示位置控制

默认视频在指定区域的居中显示，可以通过css object-position 属性控制视频(左上角) 显示位置

示例: http://res.imtt.qq.com/qqbrowser/js/testx5videoplayertype.html

置顶：

myVideo.style["object-position"]= "0px 0px"

效果图：

底部显示：

var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)

myVideo.style["object-position"]= "0px " + offsetY + "px"

效果：

Q&A

Q：如何安装新版tbs？

A：请使用微信扫描以下二维码，扫描后将会自动进行安装，无需其他操作。

Q: 如果要在QQ浏览器里测试，如何安装新版本QQ浏览器

Q：如何测试效果，确定进入了同层播放器？

A：安装新的tbs版本后，如果要测试效果，请杀掉微信进程，把系统时间往后调一天以上，再进入网页进行视频播放，如果微信的顶bar消失，进入了一个沉浸式的播放器，则是进了同层播放器。

Q：如何查看当前的的tbs版本？

A：在微信聊天窗口输入//gettbs 并发送，查看弹出的Toast上显示的tbsCoreVersion 是否等于36849 ，若是则tbs版本正确。注：这是之后进行测试的基础，这个版本一定要正确

Q：接入了同层播放器，在老版本的tbs是否会出问题？

A：对老版本不会产生影响。

Q：同层播放器在iOS上会生效吗？

A：目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS

Q：同层播放器顶部”<”和“…”按钮可以去掉吗？

A：不能

Q: 在微信TBS里如何区是否支持同层播放器

A:
a)在微信等TBS里通过UA判断X5内核版本来区分,当版版本号>036849表示支持

UA示例:

Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36(KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN

b)在QQ浏览器Android版本中,当浏览器版本>=7.1时开始支持

UA示例：

UserAgent: Mozilla/5.0 (Linux. U. Android 4.4.4. zhcn. OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

H5 video的兼容问题汇总

猜你喜欢

热点阅读