Html5 video标签视频的最佳实践


Posted in HTML / CSS onFebruary 26, 2020

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

Html5 video标签视频的最佳实践

video的属性

<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放,也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置,
                     设置为 true 是防止横屏*/
  x5-video-orientation="portraint" //播放器支付的方向, landscape横屏,portraint竖屏,默认值为竖屏
  style="object-fit:fill">
</video>

src: 视频的地址

controls: 加上这个属性,Gecko 会提供用户控制,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。

poster: 属性规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。如果未设置该属性,则使用视频的第一帧来代替。

preload: 属性规定在页面加载后载入视频。

webkit-playsinline和playsinline: 视频播放时局域播放,不脱离文档流 。但是这个属性比较特别, 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效。换句话说,如果APP不设置,你页面中加了这标签也无效,这也就是为什么安卓手机WeChat 播放视频总是全屏,因为APP不支持playsinline,而ISO的WeChat却支持。
这里就要补充下,如果是想做全屏直播或者全屏H5体验的用户,IOS需要设置删除 webkit-playsinline 标签,因为你设置 false 是不支持的 ,安卓则不需要,因为默认全屏。但这时候全屏是有播放控件的,无论你有没有设置control。 做直播的可能用得着播放控件,但是全屏H5是不需要的,那么去除全屏播放时候的控件,需要以下设置:同层播放

x-webkit-airplay="allow" : 这个属性应该是使此视频支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐还有照片文件,也就是说通过AirPlay功能可以实现影音文件的无线播放,当然前提是播放的终端设备也要支持相应的功能

x5-video-player-type: 启用同层H5播放器,就是在视频全屏的时候,div可以呈现在视频层上,也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放,播放的时候看似全屏,但是已经除去了control和微信的导航栏,只留下"X"和"<"两键。目前的同层播放器只在Android(包括微信)上生效,暂时不支持iOS。至于为什么同层播放只对安卓开放,是因为安卓不能像ISO一样局域播放,默认的全屏会使得一些界面操作被阻拦,如果是全屏H5还好,但是做直播的话,诸如弹幕那样的功能就无法实现了,所以这时候同层播放的概念就解决了这个问题。不过在测试的过程中发现,不同版本的IOS和安卓效果略有不同

x5-video-orientation: 声明播放器支持的方向,可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放,但是这个属性需要x5-video-player-type开启H5模式

x5­-video­-player­-fullscreen:全屏设置。它又两个属性值,ture和false,true支持全屏播放,false不支持全屏播放。其实,IOS 微信浏览器是Chrome的内核,相关的属性都支持,也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核,一些属性标签比如playsinline就不支持,所以始终全屏。

全屏处理

ios
ios加playsinline属性,之前只带webkit前缀的在ios10以后,会吊起系统自带播放器,两个属性都加上基本ios端都可以保证内敛到浏览器webview里面了。如果仍有个别版本的ios会吊起播放器,还可以引用一个库iphone-inline-video(具体用法很简单看它github,这里不介绍了,只需加js一句话,css加点),github地址加上playsinline webkit-playsinline这两个属性和这个库基本可以保证ios端没有问题了(不过亲测,只加这两个属性不引入库好像也是ok的,至今没有在ios端微信没有出现问题,如果你要兼容uc或者qq的浏览器建议带上这个库).

android
x5-video-player-type="h5"属性,腾讯x5内核系的android微信和手Q内置浏览器用的浏览器webview的内核,使用这个属性在微信中视频会有不同的表现,会呈现全屏状态,貌似播放控件剥去了,至少加了这个属性后视频上层可以有其他dom元素出现了(非腾讯白名单机制的一种处理措施)。

<video id="video" src="xx.mp4" playsinline webkit-playsinline></video>

自动播放

android始终不能自动播放,不多说。值得一提的是经测现在ios10后版本的safari和微信都不让视频自动播放了(顺带音频也不能自动播放了),但微信提供了一个事件WeixinJSBridgeReady,在微信嵌入webview全局的这个事件触发后,视频仍可以自动播放,这个应该是现在在ios端微信的视频自动播放的比较靠谱的方式,其他如手q或者其他浏览器,建议就引导用户出发触屏的行为操作出发比较好。

document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

播放控制

对于video或者audio等媒体元素,有一些方法,常用的有play(),pause();也有一些事件,如'loadstart','canplay','canplaythrough','ended','timeupdate'.....等等。
在移动端有一些坑需要注意,不要轻易使用媒体元素的除'ended','timeupdate'以外event事件,在不同的机子上可能有不同的情况产生,例如:ios下监听'canplay'和'canplaythrough'(是否已缓冲了足够的数据可以流畅播放),当加载时是不会触发的,即使preload="auto"也没用,但在pc的chrome调试器下和android下,是会在加载阶段就触发。ios需要播放后才会触发。总之就是现在的视频标准还不尽完善,有很多坑要注意,要使用前最好自己亲测一遍
就是当第一次播放视频的时候ios端,如果网络慢,视频从开始播到能展现画面会有短暂的黑屏(处理视频源数据的时间),为了避免这个黑屏,可以在视频上加个div浮层(可以一个假的视频第一帧),然后用timeupdate方法监听,视屏播放及有画面的时候再移除浮层

video.addEventListener('timeupdate',function (){
    //当视频的currentTime大于0.1时表示黑屏时间已过,已有视频画面,可以移除浮层(.pagestart的div元素)
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $('.pagestart').fadeOut(500);
        video.isPlayed = !0;
    }
})

隐藏播放控件

据说腾讯的android团队的x5内核团队放开了视频播放的限制,视频不一定调用它们那个备受诟病的视频播放器了,x5-video-player-type="h5"属性这个属性好像就有点那个意思,虽然体验还是有点...(导航栏也会清理)但至少播放器控件没有了,上层可以浮div或者其他元素了,这个还是值得一提。还有一点值得说的是,带播放器控件的隐藏.

<div class="videobox" ontouchmove="return false;">
    <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>

比如这个videobox在android下隐藏,只用display:none貌似还是不行的,但加个z-index:-1,设置成-1就可以达到隐藏播放器控件的目的了。

参考文章

html5--移动端视频video的android兼容,去除播放控件、全屏等
MDN-Video
视频H5のVideo标签在微信里的坑和技巧
移动端HTML5<video>视频播放优化实践
微信端视频播放问题

到此这篇关于Html5 video标签视频的最佳实践的文章就介绍到这了,更多相关Html5 video内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3制作日历实现代码
Jan 21 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 #HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 #HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 #HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 #HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 #HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 #HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 #HTML / CSS
You might like
十大“创意”战术!
2020/03/04 星际争霸
深入了解PHP类Class的概念
2012/06/14 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
html中table数据排序的js代码
2011/08/09 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
Python获取当前时间的方法
2014/01/14 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python实现顺序表的简单代码
2018/09/28 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Django values()和value_list()的使用
2020/03/31 Python
德国网上花店:Valentins
2018/08/15 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
机电专业大学生职业规划书范文
2014/02/25 职场文书
基层党员对照检查材料
2014/09/24 职场文书
先进教师事迹材料
2014/12/16 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
JS class语法糖的深入剖析
2022/07/07 Javascript