视频播放器隐藏播放控件and视频全屏做法

2017-08-07 106 0 编辑:Monster 来源:前端技术

object-fit属性介绍

object-fit是一个css3属性,可以让图片或者视频适应外部容器。目前这个属性除了IE浏览器以外,其他主流浏览器都支持。 属性如下:

/* Keyword values */

object-fit: fill; 

object-fit: contain;

object-fit: cover;

object-fit: none;

object-fit: scale-down;

/* Global values */

object-fit: inherit;

object-fit: initial;

object-fit: unset;

图片width是外层容器的18%;height撑满整个容器,各个属性展示如上图。

假如不想视频变形,我们可以用

object-fit: cover; 

填满手机。 假如想看到完整视频,不在乎视频微小变形,可以用

object-fit:fill

object-fit属性可以解决视频出现上下黑边,不能全屏的问题。


视频全屏处理

ios加playsinline属性,之前只带webkit前缀的在ios10以后,会吊起系统自带播放器,两个属性都加上基本ios端都可以保证内敛到浏览器webview里面了。如果仍有个别版本的ios会吊起播放器,还可以引用一个库iphone-inline-video,github地址:https://github.com/bfred-it/iphone-inline-video。

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

上面代码经过测试在ios端微信没有出现问题,但是安卓手机还是会出现问题,我们再介绍如下属性:

x5-video-player-type="h5"


完整video属性介绍

<video

  id="haoroomsvideo" 

  src="haorooms.mp4" 

  poster="images/haorooms.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>


x-webkit-airplay="allow"

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


x5-video-orientation

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

就解释这2个属性,x5-video-player-type="h5" 这个属性上面已经介绍,其他属性都比较简单,字面意思就可以理解,就不介绍了!


自动播放

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

者其他浏览器,建议就引导用户出发触屏的行为操作出发比较好。

//也可以在这个事件触发后播放一次然后暂停(这样以后视频会处于加载状态,为后面的流畅播放做准备)

document.addEventListener("WeixinJSBridgeReady", function (){ 

    video.play();

    video.pause();

}, false)


播放控制短暂黑屏处理

当第一次播放视频的时候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;

    }

})

本站文章均为深正网站建设摘自权威资料,书籍,杂志或原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享到社交网站,引用和转载,我们谢绝直接复制和抄袭!感谢您...

学习课堂

什么是PHP代码的规范编码

以PHP开发为例,编码规范融合了开发人员长期积累的经验,形成了一种良好统一的编程风格,这种编程风格会在团队开发或二次开发时起到事半功倍的效果。编码规范是一种总结性的说明和介绍,并不是强制性的规则。从项目长远的发展以及团队效率来考虑,遵守编码规范是十分重要的...

2017-07-12
2017-05-31
2016-09-01
2017-06-14

动态更新

【签约】深圳市德尔尚科技有限公司网站改版

深圳市德尔尚科技有限公司是一家集LED智能护眼台灯设计、研发、生产、销售、服务于一体的多元化企业。公司始终密切关注市场需求,以“人文化创新”,“德纳万物,尚礼天下”的理念为基础运营开发各种LED灯具,是深正互联品牌客户之一

2016-08-23
2016-09-06
2017-06-14
2017-04-21

资讯知识

雷军自曝了小米的所有问题

在2016年第一季度全球智能手机销量排行榜中,三星、苹果、华为、OPPO、Vivo位列前五,曾经创造增长神话的小米却与五强失之交臂。面对这样的结果,7月10日,雷军在做客中央电视台《对话》节目时表示,小米的问题主要出在供应链...

>2016-07-27
>2017-03-31
>2016-07-12
>2016-07-06
亲,请您联系我们吧

您的疑问,只要您主动联系,将为您得到最专业,最全面的解答,欢迎您询问...