H5视频Video标签在微信里的坑和技巧

2022年05月22日 阅读105次 分类:开发 标签:js经验

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1899.html

随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5,在这里介绍一些实践经验。

统一播放效果

我们希望视频播放时可以全屏播放,没有进度条、播放按钮等与系统相关的元素,可以在视频上方增加自定义的元素(比如一个跳过按钮),类型下面的效果:

预期效果

在不同的操作系统(主要就是 iOS 和 Android),为了达到比较统一的播放效果,分别对其进行兼容。

iOS

在 iOS 上,APP 都是使用的系统自带的浏览器进行页面渲染,video 播放视频的效果是统一的,只需要考虑不同的 iOS 版本是否有不一致的地方。在 iOS 上,播放视频默认会弹出一个播放器全屏播放视频,如下效果

iOS上全屏播放的效果

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

在 webkit 的 blog 上提到

A note about the playsinline attribute: this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline.

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

在 Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以视频播放的效果差异也很大,这里主要以微信为主。微信使用的是自带的渲染引擎 TBS,默认的播放效果

Android上默认的效果

在播放器的下方也是会有控制栏,视频也会 “浮” 在页面上。而 Android 是不支持 playsinline 属性使视频内联播放的。但是,如果你看过一些腾讯的视频类 HTML5,会发现它们在微信里是可以内联播放的,而这个功能是需要申请加入白名单的。

不过新版的

(本篇完)

是不是学到了很多?可以

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1899.html