用videojs让HTML5视频在移动端全屏的方法亲测 原创

文章标签: 视频
  • :
  • 04-10 19:23
  • :
  • 96次
  • :
  • 0条
  • 0赞

简介在使用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手机浏览器里,不能全屏,崩溃了,-_-!



您正在找的文章可能是: