video.js 视频自动全屏播放

我怕爱的太早我们不能终老 提交于 2021-02-14 14:11:16

一 . 视频全屏可以通过css定义宽高100%来实现。

.videoBox{
    width: 100%;
    height: 100%;
}

#example_video{
    width: 100%;
    height: 100%;
}
<div class="videoBox">
   <video id="example_video" class="video-js vjs-default-skin vjs-big-play-centered" muted autoplay controls preload="none" width="640" height="264"
   poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
     <source src="https://wts.itqiche.com/u5/car_u5_video/XuHang.mp4" type='video/mp4' />
   </video>
</div>

 

二. 视频打开页面自动播放。

  1. 给video标签加入<video muted></video> 静音即可。

  2. body下面加入js代码。

<script type="text/javascript">
    var myPlayer = videojs('example_video');
    videojs("example_video").ready(function(){
        var myPlayer = this;
        myPlayer.play(); // 自动播放
        console.log(1);
    });
</script>

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!