X5同层播放器

2018-04-26

前言

移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮盖。后来这个问题在iOS下得到了解决，但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎，它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题。

什么是X5?

X5由腾讯X5内核及其相关云服务构成，像手机QQ浏览器，QQ，微信都是使用的X5内核。

说说为什么使用video标签

这里先推荐一篇好文章，看过之后就懂了。

https://blog.csdn.net/zzzzzdddddxxxxx/article/details/53009948

对于H5视频播放，可以使用 HLS(HTTP Live Streaming)协议播放直播流，iOS和 Android 都天然支持这种协议，配置简单，直接使用 video 标签即可。

HLS即Http Live Streaming，是由苹果提出基于HTTP的流媒体传输协议。HLS有一个非常大的优点：HTML5可以直接打开播放；这个意味着可以把一个直播链接通过微信等转发分享，不需要安装任何独立的APP，有浏览器即可，所以流行度很高。社交直播APP，HLS可以说是刚需。

video标签

前言中说过，后来ios解决了video元素浮在页面最顶层的问题，那么它是怎么解决的呢？

在 iOS 10 Safari 中，video 新增了 playsinline 属性

播放器上下有的系统默认的控制栏，可以控制视频的播放进度、音量以及暂停或继续播放，播放视频时，视频会 “浮” 在页面上，页面上的所有元素都只能是在视频下面，这种效果显然不是我们想要的。
但好在 iOS 10 Safari 中，video 新增了 playsinline 属性，可以使视频内联播放。

iOS平台相关的X5新增的私有属性：

airplay
x-webkit-airplay
playsinline 使视频可以内联播放，布尔值（默认为true），适用于iOS 10 以及之后的版本;
webkit-playsinline 和playsinline 一样的作用，但是适用于iOS 10 之前的版本。

前两个是iOS平台下airplay的相关属性（说实话我现在也没搞明白为什么网页需要airplay属性），取值为'allow'或'deny'，通常保险起见用'allow'就可以。

1
2
3

iOS 10 之前的版本支持 webkit-playsinline，但是加了这个属性后，在 iOS 9 的上出现只能听到声音不能看到画面的问题，最后使用的标签代码
<video id="video" class="video" preload="auto" playsinline src="http://wqs.jd.com/promote/superfestival/superfestival.mp4" width="1" height="1" type="video/mp4"></video>
然后再加上这个库 iphone-inline-video一起使用。

android提出的同层播放器

TBS视频播放器针对视频直播的特性，做了一系列的框架优化，提出了「同层播放器」的概念。相较于在页面内播放，同层播放器除了在形态上更加沉浸之外，配合特定的视频直播云服务提供商可以做到接近于原生APP的低延时效果。（系统的内核只支持HLS的直播流，延时一般在10s以上，在TBS同层播放器内，时延不会超过3秒）

系统播放器只支持HLS的直播流，TBS的视频播放器支持HLS，RTMP/RTSP，HTTP+FLV，MMS4种直播流的播放。

了解同层播放

Android平台相关的X5新增的私有属性：

（1）x5-video-player-type 启用同层播放，支持的值类型：h5;

（2）x5-video-player-fullscreen 是否全屏，取值为'true'或'false';

（3）x5-video-orientation 视频方向。取值分别为'landscape'、'portrait'或者'landscape|portrait'，分别对应横屏、竖屏及自动旋转（这个应该用的少）。

TBS 有提供相应的事件：

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

（1）x5videoenterfullscreen 进入全屏通知

通过js监听事件

player.addEventListener('x5videoenterfullscreen', function() {
    // 设为屏幕尺寸
    player.style.width = window.innerWidth/100 + "rem";
    player.style.height = window.innerHeight/100 + 1.14 + "rem";
   
    // 在body上添加样式类以控制全屏下的展示
    document.body.classList.add('fullscreen'); 
});

（2）x5videoexitfullscreen 退出全屏通知

player.addEventListener('x5videoexitfullscreen', function() {
    player.style.width = player.style.height = '';
    document.body.classList.remove('fullscreen');  
}, false);

同层播放器支持版本

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

具体使用方法，腾讯技术指南给出了具体的使用方法，我的例子代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript" src="js/agent.js"></script>
    <script type="text/javascript" src="js/remauto.js"></script>
    <title>同层播放器</title>
    <style>
        body{
            margin: 0;
            background: #000;
            font-size: 0.3rem;
        }
        .player{
            width: 100%;
            height: 4.22rem;
        }
        .player .video{
            width: 100%;
            height: 100%;
        }
        .fullscreen .video{
            object-position: center top;
        }
        .fullscreen .player .video{
            object-position: center 1.14rem;
        }
        .header{
            width: 100%;
            height: 1.14rem;
            line-height: 1.14rem;
            background: #fff;
            font-size: 0.36rem;
            text-align: center;
            color: #000;
        }

        .fullscreen .header{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999999;
        }
        .main{
            height: 6rem;
            overflow: auto;
            background: #fff;
        }
        .main .inner{
            height: 10rem;
            border: 0.04rem solid #e33340;
            padding: 0.3rem;
        }
        .fullscreen .main{
            position: relative;
            margin-top: 1.14rem;
        }
    </style>
</head>
<body>
<header id="header" class="header">标题栏</header>
<div class="player">
    <video id="video" class="video" playsinline controls="controls" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true">
        <source src="perch.mp4">
    </video>
</div>
<div id="main" class="main">
    <div class="inner">这里是其他内容</div>
</div>
<script>
var player = document.getElementById('video');
var header = document.getElementById('header');
player.addEventListener('x5videoenterfullscreen', function() {
    // 设为屏幕尺寸
    player.style.width = window.innerWidth/100 + "rem";
    player.style.height = window.innerHeight/100 + 1.14 + "rem";

    // 在body上添加样式类以控制全屏下的展示
    document.body.classList.add('fullscreen');      //给body元素添加fullscreen类
});
player.addEventListener('x5videoexitfullscreen', function() {
    player.style.width = player.style.height = '';
    document.body.classList.remove('fullscreen');   //body元素删除fullscreen类
}, false);

    var main = document.getElementById('main');
        main.addEventListener('click',function () {
        this.querySelector('.inner').innerHTML = Date.now();
    },false);

</script>
</body>
</html>