H5 video的兼容问题汇总

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（进入全屏通知事件) 是反的

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

<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>

问题：安卓下微信和游览器不支持.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：视频高度

<video id="media" src="http://www.jb51.net/test.mp4" controls width="400px" heigt="400px"></video>

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:</p><p><strong>//准备状态</strong>
video.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
video.seeking; //是否正在seeking</p><p><strong>//回放状态</strong></p><p>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

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/4G Language/zh_CN MicroMessenger/6.6.1.1220(0x26060135) NetType/4G Language/zh_CN miniProgram

// 安卓系统中微信内置浏览器 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/4G Language/zh_CN

H5同层播放器接入规范

H5同层播放器接入规范

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

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

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

示例：

<video src="http://xxx.mp4" x5-video-player-type="h5"/>

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

x5-video-player-fullscreen全屏方式

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

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

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

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

需要监听窗口大小变化(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

横屏

<video ... x5-video-player-type=”h5” x5-video-orientation="landscape"/>

竖屏

<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>

跟随手机自动旋转

<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>

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

事件回调

x5videoenterfullscreen进入全屏通知

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

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

示例：

<video id=“myVideo".../>

通过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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,529评论 5赞 475
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,015评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,409评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,385评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,387评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,466评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,880评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,528评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,727评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,302评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,873评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2赞 342

推荐阅读更多精彩内容