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