安卓版微信视频播放全屏处理

By赵的拇指At2018-01-06Views856

问题

在安卓版微信里，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>

图片：

  1. 未播放时：未播放时
  2. 播放时：播放时

可以看到第二个图里播放视频的时候下面的文字就不见了，会严重影响用户体验，不只是微信，很多国产浏览器都会被视频劫持播放...哎！用原生的不好吗？

解决方法

  1. 和微信达成某种py交易，据我发现有些视频网站在安卓版微信里是可以内联播放的，和iOS上保持一致。（

  2. 还好微信还是留了些后路，下面我来说一下第二种方法的具体操作。

具体操作

  1. 先看这个腾讯H5同层播放器接入规范文档。
  2. 注意看x5-video-player-type这个属性以及x5videoenterfullscreen、x5videoexitfullscreen这两个事件
  3. x5-video-player-type可以让视频播放的时候，视频上可以有其他元素，那么我们可以在视频播放的时候把视频作为整页面的背景其他元素放在视频之上。
  4. 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('android-full');
        });
        $video[0].addEventListener('x5videoexitfullscreen', function() {
            $video.removeClass('android-full');
            $desc.removeClass('android-full');
        });
    </script>
</body>
</html>

效果图：

效果图

可以看到才有这个方法可以算是比较好的处理安卓版微信这个问题，虽然还有些瑕疵，不过也还行：）

经掘金评论区朋友指出可以使用x5-playsinline是的安卓微信版可以内嵌播放，不过这个方案有两个弊端：

  1. 视频上不能有任何元素，视频层级是最高的，与同层属性同时使用的时候还是会强制全屏。
  2. 视频播放结束后会有腾讯平台的其他视频，这点比较伤