原生video在手机浏览器中各个属性以及获取视频尺寸和自动播放

10678次阅读 641人点赞 作者: WuBin 发布时间: 2021-07-09 14:20:06
扫码到手机查看

内联播放效果

HTML5标签video在PC上显示很简单,就一个标签加资源,很少需要关心其它属性。但放到移动设备上,video的标准,Android和iOS有很多区别,另外还有很多各家浏览器特定的属性,本文详细讲了video在移动端的实践。

先来看一个例子:视频内联播放案例

 <video id="testVideo1" 
           x-webkit-airplay="true"
           x5-playsinline="true"
           playsinline="true"
           webkit-playsinline="true"
           x5-video-player-type="h5"
           x5-video-player-fullscreen="true"
           x5-video-orientation="portraint"
           controls="true" 
           src="http://v.qdxin.cn/v/2021/20210430-pingdudaodeyinhang-s.mp4"
           height="220" 
    ></video>

功能属性分析

抛去常规的id、height等等看一眼便知道的属性外,我们来看看其他的:

controls

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

poster

属性规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。如果未设置该属性,则使用视频的第一帧来代替。关于poster也有一些知识点,请参考我的另一篇文章《video标签的预览图poster常见问题》

x5-video-player-type="h5"

启用H5播放器,是wechat安卓版特性。启用同层H5播放器,就是在视频全屏的时候,div可以呈现在视频层上,也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放,播放的时候看似全屏,但是已经除去了control和微信的导航栏,只留下"X"和"<"两键。目前的同层播放器只在Android(包括微信)上生效,暂时不支持iOS。

x5-video-player-fullscreen="true"

全屏设置。它又两个属性值,ture和false,true支持全屏播放,false不支持全屏播放。其实,IOS 微信浏览器是Chrome的内核,相关的属性都支持,也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核,一些属性标签比如playsinline就不支持,所以始终全屏【2021年7月7日测试,安卓机微信均已内联播放】。

x5-video-orientation="portraint"

播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏。

playsinline="true"

IOS微信浏览器支持小窗内播放,同理,webkit-playsinline="true" 也是同样功能。

视频播放时局域播放,不脱离文档流 。但是这个属性比较特别, 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效。换句话说,如果APP不设置,你页面中加了这标签也无效,这也就是为什么安卓手机WeChat 播放视频总是全屏,因为APP不支持playsinline,而ISO的WeChat却支持。【经过测试截止到2021年7月7日,安卓版的微信也视频播放时不在全屏了,均为内联播放,确切结果待测试】

这里就要补充下,如果是想做全屏直播或者全屏H5体验的用户,IOS需要设置删除 webkit-playsinline 标签,因为你设置 false 是不支持的。但是安卓上测试去掉后,依然会内联播放。

x-webkit-airplay="allow"

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

自动播放

目前手机和PC都不能自动播放,仅仅在微信中可以实现:

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

微信提供了一个事件WeixinJSBridgeReady,在微信嵌入webview全局的这个事件触发后,视频仍可以自动播放,这个应该是现在在ios端微信的视频自动播放的比较靠谱的方式,其他如手q或者其他浏览器,建议就引导用户出发触屏的行为操作出发比较好。

播放控制

对于video或者audio等媒体元素,有一些方法,常用的有play(),pause();也有一些事件,

在移动端有一些坑需要注意,不要轻易使用媒体元素的除'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;
    }
})

获取视频真正的尺寸

由于canplay事件在ios上不生效,因此,就要换一种方法(以vue为例):

<video @durationchange="canPlayVideo"></video>
canPlayVideo(e) {
       // console.log(e.target.videoWidth, e.target.videoHeight)
       console.log(e)
       if(e.target.videoHeight >= e.target.videoWidth) {
         // 竖版视频
       } else {
         // 横版视频
       }
}

在ios上,要使用durationchange钩子函数,在这个阶段去获取视频真正的尺寸。

去掉video的controls中的下载按钮

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}

相关资料

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:videoh5
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    8567次阅读 549人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3555次阅读 266人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    13573次阅读 874人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12335次阅读 404人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    10769次阅读 865人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    14709次阅读 1169人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14504次阅读 1182人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    27909次阅读 2190人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    24133次阅读 1848人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录