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

标签: 前端开发 HTML5 Video 移动端 | 发表时间:2017-06-27 02:08 | 作者:Avin
出处:http://jdc.jd.com

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

统一播放效果

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

iphone-ok

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

iOS

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

iphone-fullscreen

播放器上下有的系统默认的控制栏,可以控制视频的播放进度、音量以及暂停或继续播放,播放视频时,视频会 “浮” 在页面上,页面上的所有元素都只能是在视频下面,这种效果显然不是我们想要的。
但好在 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="//wqs.jd.com/promote/superfestival/superfestival.mp4" width="1" height="1" type="video/mp4"></video>

然后再加上这个库 iphone-inline-video一起使用。

Android

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

android-default

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

不过新版的 TBS 内核(>=036849)支持一个叫 同层播放器 的视频播放器,这个不需要申请白名单,只需给 video设置两个属性 x5-video-player-type="h5"x5-video-player-fullscreen="true",播放效果

android-fullscreen

当点击左上角的箭头的时,会退出播放

android-exist

退出播放时,我们需要做相应的处理。TBS 有提供相应的事件,不过不同的版本有一点差异

TBS < 036849 036849 <= TBS < 036900 036900 <= TBS
是否支持同层播放器
退出全屏播放时触发 x5videoenterfullscreen x5videoexitfullscreen
进入全屏播放时触发 x5videoexitfullscreen x5videoenterfullscreen

通过监听这两个事件就可以知道当前的播放状态

document.getElementById('video').addEventListener("x5videoexitfullscreen", function(){
  alert("exit fullscreen")
})
document.getElementById('video').addEventListener("x5videoenterfullscreen", function(){
  alert("enter fullscreen")
})

 在对话框中发送 //gettbs 可以查看相关信息, tbsCoreVersion 就是当前安装的 TBS 内核版本。

video 的事件

video 支持的事件很多,但在有些事件在不同的系统上跟预想的表现不一致,在尝试比较之后,使用 timeupdateended 这两个事件基本可以满足需求

video.addEventListener('timeupdate', function (e) {
  console.log(video.currentTime) // 当前播放的进度
})
video.addEventListener('ended', function (e) {
  // 播放结束时触发
})

视频居中

视频的宽高比是固定的,而手机的屏幕宽高比则不是,所以,为了让观看到的视频的体验尽可能一致,以宽度为先,进行适配

function handleResize() {
  var sWidth = 9
  var sHeight = 16
  var width = window.innerWidth
  var height = window.innerHeight
  var marginTop = height - (width * sHeight) / sWidth
  marginTop = Math.round(marginTop)
  if (marginTop < -2) {
    video.$wrapper.css('marginTop', marginTop / 2 + 'px')
  } else {
    video.$wrapper.css('marginTop', '0')
  }
}

示例

在线示例
代码仓库

代码基于 ELF 构建,运行示例需要 安装 ELF,欢迎试用反馈。

参考

 

相关 [视频 h5 video] 推荐:

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

- - JDC | 京东设计中心
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5,在这里介绍一些实践经验. 我们希望视频播放时可以全屏播放,没有进度条、播放按钮等与系统相关的元素,可以在视频上方增加自定义的元素(比如一个跳过按钮),类型下面的效果:.

Free Video Cutter:小巧的免费视频剪切工具,仅3.1M

- lhb - 够趣堂
说到视频剪辑许多人想到的是会声会影软件,那的确是一款专业的软件. 不过许多人偏偏只想对视频进行剪切而并不需要所谓的二次编辑功能,无需装那么大的体积的软件,所以小巧的视频剪切工具就非常需要,Free Video Cutter这款免费的视频剪切工具就非常小巧,而且只有3.1M的体积. Free Video Cutter是一款免费工具,可以将视频剪切成需要的片段,目前支持非常多的格式包括:MPEG, MPEG4, DivX, Xvid, AVI, WMV, Quicktime MOV, Flash video等等,关键这是一款免费的软件,而且只有3.1M的体积.

本月最疼的搞笑视频This month it hurts the most funny video

- 阿德 - 优酷-每日推荐视频

强大视频分割软件:Boilsoft Video Splitter绿色便携版

- Alex - 精品绿色便携软件
Boilsoft Video Splitter是一款非常强大的视频分割工具,特点是可以无需编码而直接切割、剪辑视频文件,所以速度极快,方便的是也支持通过预览视频选择分割起始点. Boilsoft Video Splitter更新到6.x后功能变得很强大了,支持剪辑更多的视频格式,包括FLV、MKV、AVI、DIVX、MPG、MPEG、ASF、WMV、RM、RMVB、MP4、MP3、3GP、AC3等,对RM/RMVB的兼容性也有很大提高(无需安装Realplayer).

专业视频合并软件:Boilsoft Video Joiner绿色便携版

- tom - 精品绿色便携软件
Boilsoft Video Joiner是一款功能强大的视频、视频合并软件, 界面友好易用,支持常见的视音频格式,有不重新编码合并和重编码合并两种工作模式. Boilsoft Video Joiner的Direct Stream Clone即不重新编码模式,可以无需视频编码过程而直接合并,不过仅支持合并同类型格式的文件.

Ultra Video Joiner:超级视频合并软件(官方注册版)

- lhb - 够趣堂
对视频有剪切需求的,可以使用之前介绍的一款小巧软件Free Video Cutter,如果对视频有合并需求的可以使用目前使用率比较高的Ultra Video Joiner,同样比较小巧. 本文推荐这款软件是6.1.0110版本,为官方注册版(需要输入注册码)支持多国语言,包括简体中文. 界面非常的简洁,简体中文更容易上手.

在Mac上用Free Video Converter转换视频

- stingzou - Mac oo Life
很久以前写过一篇《Mac上使用Miro Video Converter转换视频》的Blog,今天,十几个人壮观的去吃了红麻辣,用iPhone小拍了一段录像,便想看看有什么新的Mac上的视频转换应用出现了. RP不错,在App Store中找到了一款Mac上免费的视频转换软件,叫做Free Video Converter.

视频合并分割剪切必备精品4Media Video Editor

- 既生姚何生我 - 爱软件
喜欢自拍DV的童鞋来说下面这款实用的视频合并分割剪切工具就必不可少咯. 对一些视频文件进行合并、分割与剪切是后期处理编辑制作中最常用的操作,今天推荐的4Media Video Editor简单实用而且稳定性高,支持对处理后的视频文件进行格式转换,支持常用视频编码和格式,方便的预置方案无需繁琐的设置即可快速完成你需要的操作.

Green Free Video Converter:免费的全能型视频转换工具

- yasy - 软件志
一、Green Free Video Converter简介: 这是一个完全免费的全能型视频转换工具,虽然感觉这两年出来的同类工具很多,但是只要是免费的,软件志一向不遗余力地推荐. 随着社会的发展,电脑、手机、平板、MP4等便携式设备越来越丰富,所以视频转换需求也越来越大,很多人都在寻找一款自己喜欢的视频转换工具,现在有多了一个选择.

【Mac视频格式转换】超级转霸:Total Video Converter

- babaru - 爱Apps - www.iapps.im
精选限时免费应用,由 AppPusher 为您送达. 无限精彩,尽在 爱Apps - www.iapps.im. 本站原创内容,转载时请务必注明出处,谢谢. 大小: 8.2 MB 系统: 10.6+. 感谢”咕嘟咕嘟“在”爱分享“中留言分享. 昨晚的推荐,早上还是免的,不过现在已恢复原价. qiqiji:我去,这也免了,用 Mac 这么多年,终于又解决一件(可能)需要回 Windows 才能做(好)的事情了.