如何使用videojs播放器

最新推荐文章于 2024-08-20 22:59:20 发布

启翔湖大水怪

最新推荐文章于 2024-08-20 22:59:20 发布

阅读量2.9k

点赞数 2

分类专栏： videojs 文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_44164664/article/details/110929514

版权

videojs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

videojs介绍

videojs是一个开源的项目，代码托管在GitHub上。通过在HTML中外联打包好的JavaScript，可以实现播放视频的功能。关于如何打包videojs，可以参考本人的另一篇博客如何编译打包video.js.

播放视频

使用默认参数

首先要确保文件已经打包好，打包好之后可以在dist目录下找到一个index.html，打开该html。
如上图所示
下面是html的部分代码。

<head>   
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  <title>Video.js | HTML5 Video Player</title>   
   <link href="http://vjs.zencdn.net/7.11/video-js.min.css" rel="stylesheet">   
   <!-- <link href="D:\video.js-main\docs\copycss.css" rel="stylesheet" type="text/css">  -->
   <!-- <link href="C:\Users\lxy77\Downloads\video.js-main\src\css" rel="stylesheet"> -->  
   <!-- <script src="C:\Users\lxy77\Downloads\video.js-main\src\js"></script> -->
   <!-- <script src="D:\video.js-main\dist\video.min.js"></script> -->  
   <script src="http://vjs.zencdn.net/7.11/video.min.js"></script>
</head>

这里需要引入两个文件，一个是css样式文件，一个是打包好的js文件，才可以确保视频可以正确播放。如果不需要修改播放器的样式或者功能的话，直接用网络上的js和css文件就好，就像图上的代码一样。
接下来需要在script语句中创建一个player对象，名为example_video_1。这一步很简单。

// An highlighted block
<script>
var player = videojs('example_video_1');    
player.addChild('BigPlayButton');
</script>

在body中通过video标签引入要播放的视频资源。要保证id与上一步创建的player对象名字一致。

<video id="example_video_1" class="video-js"  controls preload="none" width="1080" height="460"     poster="http://vjs.zencdn.net/v/oceans.png" >  
  <!-- <source src="C:\Users\rhein\Videos\Captures\111.mp4" type="video/mp4"> -->      
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">    
  <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">    
  <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">    
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web       browser that 
  <a href="https://videojs.com/html5-video-support/" target="_blank">        supports HTML5 video</a>
  </p>
</video>

通过src引入要播放的视频资源，视频预览图等，这些均是网络资源。
完成上述步骤后，用浏览器打开该HTML，效果如下：
在这里插入图片描述

如果要更改视频资源，只需要更改视频源的路径就可以了。

修改video.js的参数

如果只是简单使用videojs来播放视频，看上面就已经够了。但是如果想要深层次的理解这个程序，或者对它的样式不满意，想要做一些修改，就需要在创建player对象的时候，手动调整一下参数了。

// An highlighted block
var player = videojs('example_video_1', {      
sourcesOrder:true,       
controls: true, // 是否显示控制条      
// poster: 'xxx', // 视频封面图地址       
preload: 'auto',       
autoplay: false,      
// fluid: true, // 自适应宽高       
language: 'zh-CN', // 设置语言       
muted: false, // 是否静音       
inactivityTimeout: false,      
controlBar: { // 设置控制条组件        /* 设置控制条里面组件的相关属性及显示与否
        */        /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */      
          children: [        
            {name: 'playToggle'}, // 播放按钮         
            {name: 'PlayNext'},        
            {name: 'currentTimeDisplay'}, // 当前已播放时间        
            {name: 'progressControl'}, // 播放进度条           
            {name: 'durationDisplay'}, // 总时间          
            {name: 'audioTrackButton'},          
            {name: 'playbackRateMenuButton', 'playbackRates': [0.5, 1, 1.5, 2, 2.5]},          
            {name: 'volumePanel', // 音量控制  inline: false, // 不使用水平方式  },                           
            {name: 'AutoPlayNext'},          
            {name: 'FullscreenToggle'} // 全屏        
            ]      
           },      
         sources:[ // 视频源     
                {   src: 'C:/Users/rhein/Videos/Captures/111.mp4', 
                    type: 'video/mp4',        
                    poster: '//vjs.zencdn.net/v/oceans.png'  },
                {   src: 'C:/Users/rhein/Videos/Captures/222.mp4',        
                    type: 'video/mp4',             
                    poster: '//vjs.zencdn.net/v/oceans.png'  }      
                 ]   }, 
          function (){console.log('视频可以播放了',this);      });

如上图代码所示，可以通过设置player各项属性的值为true或者false来选择是否启用该功能。
举例说明，autoplay true 代表视频加载好之后就立刻播放，设置为false就代表禁用该功能。
control bar里面的child指的是显示在控制栏上的按钮，如mute指的就是静音按钮。官方给的videojs中并没有playnext和autoplaynext这两个功能，这两个是我们小组自己添加的功。至于如何添加组件实现新功能，可以参考我们组另一位同学的两篇博客videojs创建control-bar组件,实现点击播放下一视频和为videojs添加自定义组件
原版的videojs只支持播放单个视频，经过我们的修改，我们将播放源修改成一个数组，通过自己编写的两个按钮，实现切换下一集和自动播放下一个视频。