视频插件VideoJS5介绍

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

吴杼恩

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

阅读量7.8k

点赞数 2

分类专栏：常用插件文章标签： VideoJS5插件 videojs时间格式修改

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/50732050

版权

本文介绍了VideoJS5的使用，包括从官网下载，如何通过plugins.md扩展视频功能，调整视频组件的位置，详细讲解了视频时间格式的修改方法，以及videoJs的事件列表，为开发者提供了全面的VideoJS5操作指南。

摘要由CSDN通过智能技术生成

1:官网下载

http://videojs.com/

2:扩充video功能---plugins.md插件

1:新建一个函数

<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);">  function examplePlugin(options) {
      this.on('play', function(e) {
        console.log('playback has started!');
      });
    };</span></span>

2:把函数定义为插件

<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);">    videojs.plugin('examplePlugin', examplePlugin);</span></span>

3:应用插件

方法一:

<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);">  videojs('vidId', {
      plugins: {
        examplePlugin: {
          exampleOption: true
        }
      }
    });</span></span>

方法二:

<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);">    var video = videojs('cool-vid');
    video.examplePlugin({ exampleOption: true });</span></span>

一个关于新建插件的例子:

新建一个按钮并点击时候视频回到开头并停止

我们在上面的examplePlugin()函数中添加代码

<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);">    function examplePlugin(options) {
        
        	        var backplayBtn = document.createElement('div');
        	        backplayBtn.className = 'vjs-backplay-button vjs-menu-button vjs-control';
        	        backplayBtn.innerHTML =
        	          '<div>'
        	            + '<i class="fa fa-step-backward&