微信浏览器视频播放器开发实践

发表于 分类于 ， 阅读次数：

在移动端页面中，video通常会被浏览器劫持，然后替换使用浏览器自定义的播放器。而由于微信有庞大的用户使用量，所以兼容微信就不可避免。在这里记录一下，项目开发过程中出现的问题和解决方法

初始代码：

1
2
3
4
5
6
7
8
// index.html
<video src="xxx.mp4" class="video" />

// index.css
.video {
  width: 100vw;
  height: auto;
}

1. 视频高度太高的问题(兼容问题的开始)

由于项目中使用的视频，宽高比不固定，有宽屏视频，也有高屏视频。而代码中只限制了视频的宽占比为屏幕宽，高度自由不限制。所以在手机屏幕高度比视频高度小的情况下，就会出现视频太高，而一屏不能完全显示，导致部分视频被遮住的情况
这个问题也很好解决，把高度限制一下就OK，如下：

1
2
3
4
5
.video {
  width: 100vw;
  height: auto;
  max-height: 40vh;
}

但是在测试过程中，一个新的问题出现了
在测试过程中发现，iphone和部分android手机上表现优秀，高视频会以最大高度40vh，宽度等比缩小，然后居中播放。
但是部分android手机上的视频，会出现高视频的宽度被横向拉伸的情况，出现的机率还挺高。

2. 视频被拉伸的问题

既然宽度被拉伸，那就设置视频的宽度看一下具体的表现，如下:

1
2
3
4
5
.video {
  width: 40vw;
  height: auto;
  max-height: 40vh;
}

测试结果并不满意，因为宽度被设置，视频两边会有留白的情况，而且播放器下面的控制条的宽度也被缩小，效果很不好看。而且宽视频的问题也不能解决。但是在测试过程中，发现部分android手机会全屏播放，而全屏播放的视频宽高没有被拉伸。

最后解决方案： iphone手机上内联播放，android手机上全屏播放，根据文档修改代码

1
2
3
4
5
6
7
8
9
10
11
12
// index.html
<video src="xxx.mpe" class="video"
  webkit-playsinline playsinline  // IOS内联播放
  x5-video-player-type="h5" // 启用同层H5播放器
  x5-video-player-fullscreen="true" // 全屏播放
/>
// index.css
.video {
  width: 100vw;
  height: auto;
  max-height: 40vh;
}

测试结果： android手机上和iphone手机上都如期表现，但是android的全屏播放不完全，虽然显示了全屏播放的界面，但是高度是40vh, 宽度也没有占满屏幕

3. 全屏显示不满的问题

解决办法，查询文档可知，微信在视频全屏的时候，会触发x5videoenterfullscreen，退出全屏时会触发x5videoexitfullscreen。所以可以监听这两个事件，全屏里不限制高度，退出全屏里还原回max-height

1
2
3
4
5
6
7
8
// index.js
const video = document.querySelector('.video')
video.addEventListener('x5videoenterfullscreen', () => {
  video.style.maxHeight = ''
})
video.addEventListener('x5videoexitfullscreen', () => {
  video.style.maxHeight = '40vh'
})