Video.js播放器宽高自适应设置方法

原创 楚盟  2018-01-11 23:17  阅读 3,672 views 次

第一步编辑:video.js这个脚本

在最末尾处增加如下代码


 var player = videojs('video', { fluid: true }, function () {
      console.log('Good to go!');
      this.play(); // if you don't trust autoplay for some reason  
})

第二步:设置调用Video.js播放器html代码

<video  
    
    width="1920" 
    height="1080" 
    id="my-player"
    class="video-js  vjs-big-play-centered vjs-fluid " 
    controls
    preload="auto"
    data-setup='{}'>
  <source src="https://jiasu.5yun.org/wp-content/video/14965.mp4" type="video/mp4"></source>

</video>

第五行的class中添加vjs-fluid这个参数,视频就跟随窗口大小变化了
width="1920" height="1080" 这个是声明原视频大小

Video.js自适应效果如下:

Code Backup:https://www.5yun.org/wp-content/code/15011.txt

本文地址:https://www.5yun.org/15011.html
关注我们:请关注一下我们的微信公众号:扫描二维码楚盟网的公众号,公众号:chubin5yun
版权声明:本文为原创文章,版权归 楚盟 所有,欢迎分享本文,转载请保留出处!

发表评论


表情