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

  • Video.js播放器宽高自适应设置方法已关闭评论
  • 388 views
  • A+
所属分类:软件·服务器

第一步编辑: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