h5视频播放踩坑记录

更新日期: 2019-02-21阅读: 3062标签: 视频

随着抖音、快手这类的视频类app的火爆,移动端h5视频类应用也随之兴起,使用video播放的场景也越来越多,本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题,希望在看过这篇文章后,能对开发者在移动端使用video播放时快速开发减少踩坑


全屏播放

视频的全屏播放是移动端一个很常见的场景,因此我们需要对video设置全屏播放,全屏播放用到的方法是requestFullscreen(),再加上考虑浏览器的兼容性问题,需要加上兼容代码

let ele = document.getElementById('video')
if (ele.requestFullscreen) {
  ele.requestFullscreen()
} else if (ele.mozRequestFullScreen) {
  ele.mozRequestFullScreen()
} else if (ele.webkitRequestFullScreen) {
  ele.webkitRequestFullScreen()
}
ele.play()

获取video元素节点,然后判断不同浏览器的requestFullscreen属性,调用不同的请求全屏的方法,这样就能保证视频的全屏播放


微信浏览器全屏播放

为什么要单独提及微信浏览器下的视频全屏播放能?因为在微信下你可以选择使用原生浏览器内核渲染video还是启用腾讯的x5内核渲染,有什么区别呢?如果使用原生渲染,那就和在普通浏览器渲染一样,但是如果启用腾讯x5内核渲染,当视频播放时,x5内核会强制视频全屏播放,但是目前并不支持ios,接下来就一起来看微信中x5内核全屏播放表现


x5内核同层播放

通过给video标签添加x5-video-player-type="h5"属性启用x5内核,启用x5内核渲染video虽然会全屏播放视频,但是这样也提供了更好的用户体验,同时x5内核渲染还有一个优点就是支持同层渲染,video播放时层级不再是最高级,可以有元素浮在video上方
这是全屏播放的视频,同时在这个视频上面层叠了一个透明的浮层,但是会明显发现视频播放时有黑边,那是因为没有声明x5-video-player-fullscreen,如果不申明此属性,页面得到视口区域为原始视口大小(视频未播放前),比如在微信里,会有一个常驻的标题栏,如果不声明此属性,这个标题栏高度不会给页面,播放时会平均分为两块(上下黑块)
会明显看到视频上顶到标题栏,黑边消失,如果此时视频的宽高使用的并不是动态计算的单位,你还需要重新赋值视频宽高:

window.onresize = function(){
  test_video.style.width = window.innerWidth + "px";
  test_video.style.height = window.innerHeight + "px";
}


playsinline

当在微信浏览器下想用x5内核渲染,但是又不想强制全屏播放怎么办呢?这个时候就要playsinline属性了,这个属性也能解决一些其他的移动端浏览器强制全屏播放的问题,只需要设置playsinline="true",webkit-playsinline="true"声明,就可以了,但是在x5下渲染,也就是说在android下如果要用x5渲染一定会全屏播放


事件差异

loadedmetadata

此事件表示媒体的元数据已经加载完毕,现在所有的属性包含了它们应有的有效信息,常用的信息有duration,获取视频的时长,但是这个属性在android和ios下有点差别,在android中,在加载完视频后就会触发,获取到相应视频信息,但是在ios下,微信浏览器中此事件视频加载完成后并不会触发,点击播放后才会触发,但是在safari浏览器中视频加载完成后就会触发


canplay

此事件表示在媒体数据已经有足够的数据(至少播放数帧)可供播放时触发,此事件在android下视频加载的时候就会触发,但是在ios中要视频播放后才会触发


自动播放

在android中autoplay属性只有chrome浏览器中同时设置autoplay和muted(禁音)才能自动播放,其他浏览器均不支持让视频自动播放,并且在android微信浏览器中同时设置autoplay和poster属性,poster属性也会失效,视频封面展示不出来,在ios移动端中autoplay并不能直接自动播放,但是mac safari中在video中设置autoplay和muted属性可以自动播放,这和在网上看到的文章有点出入,在MDN上有一个video属性支持表:

总结

随着移动流量时代的到来,移动端的上网体验的优化,更多的视频播放场景和需求都会承载到移动端上,但是移动端的视频播放由于浏览器内核、系统等限制性导致视频在播放时表现不一,需要开发人员花时间精力去处理此类问题,希望这篇文章能对大家在移动端使用video标签时有帮助。


链接: https://www.fly63.com/article/detial/2481

h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式

在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放。这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自己对浏览器进行设置才能支持autoplay。

如何将视频设置为网页背景【转】

有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放

js实现截取视频帧图片作为封面预览图

前端需要把视频文件的第一帧图像截取出来,并做为缩略图显示在页面上,这里需要利用HTML5中强大的画布canvas来实现该功能

优化 MP4 视频以便更快的网络串流

随着 Flash 的落寞 以及 移动设备的爆发性增长 ,越来越多的内容以 HTML5 视频的方式传递。在上一篇文章中你甚至能看到 使用 HTML5 视频替换 GIF 动图来优化网站访问速度 这样的技巧

js获取上传音视频的时长

获取上传视频路径,将该路径放入video标签,获取视频时长。方式一:隐藏一个音频标签,播放获取。方式二;通过new Audio的方式获取。上传之前限制一下视频的时长

移动端视频h5表现问题汇总

同屏播放视频、移动端视频预加载:由于移动端不能预加载视频,所以hack一种方案:监听WXJSBridge WeixinJSBridgeReady、微信安卓环境下需要在touchmove事件中阻止掉默认事件,否则不能触发视频播放 、 由于微信安卓版本基于x5内核,视频会出现全屏按钮,而且去不掉,会误导用户点击

Web端直接播放 .ts 视频

最近项目中需要前端播放 .ts 格式视频,捣鼓了几天学习到很多知识,也发掘了一种优秀的解决方案,项目中已存储的 .ts 切片数量众多,已经占用了NAS服务器绝大部分的资源,生成的 .m3u8 索引虽然非常小

使用 multipart/x-mixed-replace 实现 http 实时视频流

关于实时视频传输,业界已经有非常多成熟方案,分别应用在不同需求场景。本文介绍一种基于 HTTP ,非常简单、易理解的方案,实用性不强,但有助于理解 HTTP 协议。

如何实现沉浸式视频体验?

沉浸式视频体验,大致内容是一个页面里有几十个视频,用户点击其中一个视频时,该视频自动滑动到屏幕可视区域的顶部开始播放,并暂停其他视频,该视频滑出屏幕可视区域之后要自动暂停。

视频全屏弹幕实现

这个问题如果思路错了就是个死胡同。所以我在找问题的时候趟了很多坑。思路错在我不应该使用视频的全屏,敲黑板!划重点啦!不要使用视频的全屏!(解决了问题的时候才幡然醒悟)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!