简介在使用videojs插件时,如何让HTML5的视频在移动端里自动全屏的方法及实例。
站长最近做的一个WEB项目里,有个栏目是视频展示,站长排版用的是bootstrap,让网页自适应,在电脑端的时候,显示四列,每行四个视频,在移动端的时候,显示两列,在电脑端无所谓,显示四列视频已经能看清视频的内容了,关键是在移动端。
站长在测试的时候,用微信打开,不用任何的设置,视频会自动全屏,但用浏览器打开,就不行了,并且因为视频太小,播放器上自带的那个全屏按钮也看不到,在网上找了好多好多的资料,但真真的是内容都一模一样,就连测试都可能没人测试过吧。
站长自己把相关内容整理一下,一个是自我学习的过程,另一个也是方便其他遇到和站长同样问题的朋友们,希望能帮你们节省不少的时间。
虽然代码也是从网上找来的,但站长是经过测试的,保证可用的:
var FullScreen=function(t){ if(t.requestFullscreen) { t.requestFullscreen(); }else if(t.mozRequestFullScreen) { t.mozRequestFullScreen(); } else if(t.webkitRequestFullScreen) { t.webkitRequestFullScreen(); } };
现在来看一个具体的使用实例:
HTML相关代码为:
<Div class="col-lg-3 col-md-4 col-6"> <Div class="m-2 img-thumbnail border-secondary video"> <video id="video1" class="video-js vjs-fluid" width="100%" controls preload="none" data-setup="{}"> <source src="//www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4" /> Your browser does not support HTML5 video. </video> </Div> </Div>
站长用的是bootstrap布局,并用了video.js插件。
相关的JS代码:
$("#video").each(function(){ var $myvideo=$(this); $myvideo.on("play",function(){FullScreen($myvideo[0]);}); });
注意:站长是把全屏放在play事件里的,不能放到click事件里,因为站长测试的时候,好多浏览器都检测不到click事件,只有电脑端可以,html5里video相关的属性方法和事件,可以看《HTML5里video的相关属性、方法及事件整理[附完整在线实例演示] 》。
站长测试时,通过电脑端的APP测试工具,都没问题,真正的手机测试,QQ浏览器是没问题的,可以自动全屏播放,但360浏览器不能,继续网上找资料。
有几个网站上说,给video标签上加上这几个属性:
playsinline="true" x-webkit-airplay="true" webkit-playsinline="true" x5-video-player-type="h5" x5-videoplayer-fullscreen="true"
站长没有查这些属性具体是啥含义,但站长复制过来,添加上后,发现问题依旧,还是360手机浏览器,点击播放后,不能全屏播放。
另外,还在一个网站上看到一个方法,这个方法的思路是这样的:
当点击播放后,把当前的播放器隐藏,然后再添加一个全屏的播放器,再把当前视频的src替换进去,这个思路,站长没试,但应该是可用的,不过这个时候,为了防止视频因为全屏而被“拉伸”变形,需要用到下面这个CSS样式:
object-fit:fill/contain/cover/none/scale-down; fill : 默认值 ,填充,让视频填满整个容器,不保证保持原有的比例; contain : 保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下; cover : 保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致; none : 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小; scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个
关于object-fit 这个属性的不同值的不同效果,站长以后会专门写一篇文章,用具体的实例来详细的向大家解释和描述。
再回到让视频在移动端全屏的问题上来。
因为站长的视频是用video.js插件来加载的,所以controls控制栏上的“全屏”功能按钮,是可以用jquery获取到的:
$("#shipin video").each(function(){ var myvideo=$(this).get(0); $(this).on("play",function(){ FullScreen($(this)[0]); $(this).parents(".video").find(".vjs-fullscreen-control").click(); }); });
经过测试,还是不行,还是在360手机浏览器里,不能全屏,崩溃了,-_-!