H5►h5 video

h5-video

移动端video视频标签的探索

在这五一快乐的劳动日即将临近下，本以为最后一周散发着欢乐的气息。但是生活总是残酷的，甲方爸爸确总是热情的

浏览器内核

主流浏览器内核

IE： Trident

火狐： Gecko

safari： Webkit （Safari内核，Chrome内核原型）

Opera（旧）： Presto （Opera现已改用Google Chrome的Blink内核）

Google和Opera： Blink （从webkit一个分支演变而来）

Blink

Google计划将这个渲染引擎作为Chromium（可理解为chrome的先行版，是谷歌开源出去的）计划的一部分，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且应用在在Chrome（28及往后版本）、Opera（15及往后版本）。

WebCore

包含了目前被各个浏览器所使用的WebKit共享部分，是加载和渲染网页的基础部分，具体包括HTML解释器、CSS解释器等

JavaScriptCore引擎

是WebKit中的默认JavaScript引擎。在Google的Chromium项目中，它被替换为V8引擎。

WebKit Ports部分

是WebKit红的非共享部分，属于WebKit被移植的模块。由于不同浏览器使得平台差异、依赖的第三方库和需求不同，从而导致多种WebKit版本。

国内PC浏览器

多数浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”。（绝大多数基于Chromium开源软件项目开发的，Chromium不是内核）

国内移动端

Android：

使用率最高的就是Webkit内核，国内浏览器多数都是基于开源内核Webkit进行二次开发的。

iPhone：

由于系统封闭，不允许除系统自带浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均为在Safari内核的基础上进行二次开发。

总结：

  • WebKit是一种用来让网页浏览器绘制网页的排版引擎。

  • Webkit亦使用于Apple iOS、BlackBerry Tablet OS、Tizen及Amazon Kindle的默认浏览器。

  • WebKit中WebCore组件的分支——Blink被用于chrome。

  • Chromium（开源出去）与Google Chrome共享大部分代码和功能，但功能和商标之间有一些细微差别。

  • Chromium为Google Chrome提供了绝大多数的源代码，包括用户界面，Blink渲染引擎和V8JavaScript引擎。

  • Google使用该代码（Chromium）来制作其Chrome浏览器，该浏览器比Chromium具有更多功能。

  • 所有以Chromium为基础的浏览器都使用Blink。

参考：

Chromium wiki

网页浏览器列表

排版引擎（浏览器引擎、页面渲染引擎）

综上，无论安卓还是ios在做webkit的一些特性都会得到较好的支持。

第一坑 同层播放

在移动端浏览器，video 在用户点击播放或者通过API video.play() 触发播放时，会强制以全屏置顶的形式进行播放。但是有些时候这并不符合我们的期待。网上找资料很多，但质量真的是不敢恭维。千篇一律不说，而且还不正确。

playsInline={true}

该属性为true可以取消全屏，实现同层播放，网上资料大多数都是playsinline实际上在ios10+该写法是不会生效的，而应是驼峰命名的方式。

详情请参照：

apple developer

webkit对video的支持特性

1
2
3
<video
  playsInline={true}
/>

特例：

playsInline={true} 能满足大多数业务场景，但是在微信内表现有所不同，微信是采用了内部集成的x5内核（同样是x5但是qq内部和qq浏览器都默认是同层播放表现很奇怪）。

x5内核（基于webkit深度定制）额外提供了同侧播放的属性。x5-video-player-type="h5-page"。网络提供多数是x5-video-player-type="h5"已经不符合新版本处理方式。

x5内核官方文档

国内浏览器

而国内常见的PC浏览器如UC浏览器、QQ浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器以及移动端的UC、QQ、百度等手机浏览器都是根据Webkit修改过来的内核，本质上我们可以认为市场上移动端用户使用的基本上都是webkit内核或者基于 webkit 内核做修改的浏览器，所以 playsinline 的兼容性非常好！

第二坑 自动播放

为什么禁止自动播放

  1. 自动播放会消耗大量的流量。

  2. 用户体验不好，突然播放的视频，影响用户体验。

关于h5video的播放策略

chrome 自动播放策略

chromium自动播放策略

webkit(ios)自动播放策略

从网页浏览器列表可以知道国内浏览器多数是基于chromium开发的。

  • 内容是静音的，或不包括任何音频(仅包括视频)

  • 用户在浏览会话期间点击了站点上的某个地方

  • 在移动设备上，如果该网站已被用户添加到主屏幕

  • 在桌面，如果用户经常在网站上播放媒体，根据媒体参与指数

关于通过点击出发的方式

js代码 + video设置autoPlay

1
2
3
4
5
6
7
8
9
10
11
// js代码
setTimeout(() => {
  let video = document.querySelector('video')
  video.addEventListener('click', function (params) {
    console.log(333)
    video.play()
  })
  video.click()
}, 100);

// video同时设置autoPlay

测试机

安卓小米note3

微信 qq qq浏览器 小米自带 via浏览器
N N Y Y Y

iphone6 ios12

微信 qq safari UC
N Y N Y

设置muted静默播放

测试机

安卓小米note3

微信 qq qq浏览器 小米自带 via浏览器
N Y Y Y Y

iphone6 ios12

微信 qq safari UC
N Y Y Y

关于网上流传的微信才处理方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 function onBridgeReady() {
    /* eslint-disable */
    alert(JSON.stringify(WeixinJSBridge));
    let video = document.querySelector('video')
    video.addEventListener('click', function (params) {
      alert(333)
      video.play()
    })
    video.click()
}
function wxback() {
    if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          alert(1)
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
          alert(2)
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
      alert(3)
        onBridgeReady();
    }
}

该方式可以处理ios下，微信自动播放问题。但是android下的微信依然无效。

第三方插件

video-react autoPlay属性

测试机

安卓小米note3

微信 qq qq浏览器 小米自带 via浏览器 UC
N N Y Y N N

iphone6 ios12

微信 qq safari UC 百度 搜狗 qq浏览器
N Y Y Y Y Y N

Aliplayer autoPlay属性

阿里视频播放关于h5适配问题

其实从阿里视频上面的描述也不难看出安卓碎片化，导致本就不理想的video功能，变得更加差异化。

测试机

安卓小米note3

微信 qq qq浏览器 小米自带 via浏览器 UC
N N Y Y Y N

iphone6 ios12

微信 qq safari UC 百度 搜狗 qq浏览器
N Y Y Y Y Y N

video.js autoPlay属性

测试机

安卓小米note3

微信 qq qq浏览器 小米自带 via浏览器 UC
N N Y Y Y N

iphone6 ios12

微信 qq safari UC 百度 搜狗 qq浏览器
N Y Y Y Y Y N

总结

几波测试和各类官方文档查下来，能实现自动播放的，autoPlay能实现一小部分自动播放，通过模拟事件，可以拓展一部分浏览器兼容性自动播放。如果可以接受静音播放，能够支持较大一部分自动播放。在搭配上上微信的特殊处理可以额外拓展ios微信的自动播放。安卓微信暂时无解。无法实现自动播放。

目前测试的机器和浏览器也相对较少，后续考虑测试更多种浏览器和更多机型。

后话

由于流量资费的降低，加上直播和视频的火爆程度，未来关于视频的需求应该也会常遇到，尤其是在活动类开发，因此关于视频的调研还是值得考虑做一下的，当遇到需求问题时，也能过更快，正准确的提出可能存在的问题，和解决方案能解决到什么样的底部。避免出现多次因为技术上的问题而带来的变更。

参考资料

Chromium wiki

网页浏览器列表

排版引擎（浏览器引擎、页面渲染引擎）

webkit官网

apple developer

x5内核官方对接文档

返回
顶部