关于微信H5页面的图片和视频全屏问题

项目需求

1. 图片或者视频在页面中居中显示（边框圆角）
2. 点击图片或者视频时，全屏显示/播放

看起来是很简单吧，但是移动端、微信内置的QQ垃圾浏览器组合起来，事情就没有那么简单了。。。还是先说简单的吧。

图片全屏

img标签上不绑定任何事件时，在安卓机上点击可以全屏显示，再次点击退出全屏，简直是perfect。完全符合需求，但是！！！
在IOS的部分机型上，点击伪全屏显示（微信顶部Bar有占位），再次点击没有反应。还有一些IOS机型是点击完全没有反应。好吧，没法偷懒了。

由于有顶部Bar的存在，无法完全全屏实现（目前没有发现可行方法）。降级为可视区域内全屏显示。

实现思路

1. 首先获取到手机可视区域的宽。

var width = document.documentElement.clientWidth;

2. 设置一个modal层，包含要显示图片，占满全屏，浮在最上层。
3. 页面刚开始加载进入的时候，隐藏modal层。只显示居中的图片。
4. 当点击居中的图片时，显示modal层，点击modal层时，隐藏modal。

视频全屏播放

QQ垃圾浏览器video标签安卓机上面非常丑陋，视频播放完会自动加入推荐视频。优先级最高，浮在最顶层，不支持border-radius。
在某华为机型上不会自动全屏播放，在其他一些安卓机上全屏播放完返回页面时，会导致样式错乱，好像冒出去了似的。

QQ浏览器提供的同层播放器接入规范也并没有什么卵用。

还是给大家隆重介绍一下video.js吧。纯英文文档，对于小白的我来说，看起来还是比较费劲的。我踩过的坑希望大家都能绕过去。

使用方法

引入方法：

第一种

   <link rel="shortcut icon" type="image/ico" href="/static/favicon.ico" />
   <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">

第二种

npm install video.js

初始化：

<video id="video" class="video-js"></video>
// 引入核心就在class="video-js"

或者使用js初始化，这里不再介绍
实例化对象：

var video=videojs('video');
// 对应video标签的id

video.js相关的API丰富。

参考videojs入门指南1——videojs基础使用

1. autoplay()获取或者设置自动播放属性
2. currentTime()设置或者获取当前播放进度
3. duration()获取视屏的总长度，一般要等到视屏对象完全加载后才能获取到，一般我们会使用定时轮询的方式来获取总时长
4. ended()获取当前视屏对象是否已经处于结束状态
5. enterFullWindow() 当全屏不支持我们可以视频容器延伸到浏览器将让我们一样宽。经过试验改api完全无法使视屏进入全屏。分析源码后发现真正进入全屏的api应该是requestFullscreen()，但可惜该api只能又手势触发函数执行，连模拟点击都没法触发他。
// requestFullscreen()这个我的库中没有这个API？ 因此我用的isFullscreen。
6. exitFullscreen() 退出全屏，有效的
7. exitFullWindow() 退出全屏，试了没什么用
8. height() 设置/获取播放器的高度
9. width() 设置/获取播放器的宽度
10. isFullscreen() 检查是否处于全屏模式
11. load() 开始加载视屏
12. loop() 在视频中获取或设置循环属性元素
13. muted() 获取当前的静音状态
14. pause() 暂停视频
15. paused() 检查视屏是否暂停
16. play() 播放视屏
17. played() 检查视屏播放状态
18. preload() 获取或设置预加载属性
19. ready() 视屏对象加载完成后调用ready中的回调函数
20. poster() 获取或设置海报图像源url
21. reset() 重载视屏
22. src() 更换视频源

事件监听方法：

video.on('ended', function() {
    //
  });

需求实现思路

video.js解决了微信安卓端视频播放完毕样式混乱，但是依然无法实现四周圆角。只能做绕过处理。进入页面显示视频的首帧图和播放键，让其看起来像是视频的样子。然后点击后，真正的视频标签全屏播放。这样变向的实现圆角。

<div class="share-video" >
    <img class="poster" src="{{videoPoster}}" on-click="changePlay">
    <img src="{{icon}}" class="pausePlay {{isPlay?'hidden':''}}" on-click="changePlay"/>
    <video id="video" class="video-js" style="width:0px;height:0px;">
    </video>
 </div> 

// SAN框架组件
// 组件attached生命周期函数中执行
// res为ajax请求返回的数据，包含视频和首帧图的url
videoInit(res) {
    this.data.set('videoPoster', res.data.image);
    const video = videojs('video', {
        sources: [{
            src: res.data.video
        }]
    });
    // 视频初始化时，设置宽高为0，隐藏
    video.ready(() => {
        video.width('0px');
        video.height('0px');
    });
    video.isFullscreen(true);// 设置要全屏播放。
    video.on('ended', () => {
        video.exitFullscreen();//退出全屏
        video.width('0px');
        video.height('0px');
        this.showIcon();//显示播放键
    });
    video.on('pause', this.showIcon.bind(this));
}