video.js添加自定义组件的方法


Posted in Javascript onDecember 09, 2020

videojs虽然已经为我们提供了较为完善的功能.但是在实际应用中,我们仍然可能需要为这个播放器添加部分功能.下面将以添加标题栏为示例简要介绍如何给videojs添加功能或组件.

获取videojs源码

访问videojs在github上的项目即可下载到videojs的源代码
项目网址: https://github.com/videojs/video.js  

源码的编译

使用cmd,在源代码根目录下使用npm run build命令对源码进行打包.
具体的打包编译方法可以点击这里查看
没有错误正常编译后可以得到dist文件夹,里面有编译后的文件.

video.js添加自定义组件的方法

添加TitleBar组件

js代码编写

开发TitleBar源码

// Subclasses Component
import Component from './component.js';
import console from 'global/console';
import videojs from './video.js';



// videojs.extend方法用来实现继承,videojs中大部分组件直接或间接的继承自Component
/**
 * the title bar
 * @extends Component
 */
class TitleBar extends Component {

 // The constructor of a component receives two arguments: the
 // player it will be associated with and an object of options.
 // 这个构造函数接收两个参数:
 // player将被用来关联options中的参数
 /**
 * constructor
 * @param {Player} player the player
 * @param {any} options the options
 */
 constructor(player, options) {
 	//调用父类的构造方法
 super(player, options);

 // 如果在options中传了text属性,那么更新这个组件的文字显示
 if (options.text) {
  this.updateTextContent(options.text);
 }
 }

 // The `createEl` function of a component creates its DOM element.
 // 创建一个DOM元素
 /**
 * creatEl
 * @returns {*} zzf add
 */
 createEl() {
 return super.createEl('div', {

  // Prefixing classes of elements within a player with "vjs-"
  // is a convention used in Video.js.
  // 给元素加vjs-开头的样式名
  className: 'vjs-title-bar'
 });
 }

 /**
 * 设置标题
 * @param {String} text the title
 */
 updateTextContent(text) {
 // 如果options中没有提供text属性,默认显示为空
 if (typeof text !== 'string') {
  text = ' ';
 }

 // Use Video.js utility DOM methods to manipulate the content
 // of the component's element.
 // 使用Video.js提供的DOM方法来操作组件元素
 videojs.dom.emptyEl(this.el());
 videojs.dom.appendContent(this.el(), text);
 }

 /**
 * build css class
 * @returns {string} the class
 */
 buildCSSClass() {
 return 'vjs-title-bar';
 }

 /**
 * when the languagechange
 */
 handleLanguagechange() {
 }
}

TitleBar.prototype.controlText_ = 'title-bar';
// Register the component with Component, so it can be used in players.
// 在component中注册这个组件,才可以使用
Component.registerComponent('TitleBar', TitleBar);
export default TitleBar;

需要注意的是,TitleBar应继承Component,并且在构造方法中应先调用父类的构造方法.
同时,需要调用Component.registerComponent()方法注册组件.

在player里注册自定义组件

打开player.js文件,在图中的地方import自己的组件即可.videojs初始化时会自动进行注册

video.js添加自定义组件的方法

添加css样式

在title-bar.js文件中,buildCSSClass方法中声明了titleBar的css样式为vjs-title-bar,故在css样式中末尾添加如下css代码

/** title bar默认样式 */
.video-js .vjs-title-bar {
 color: white;
 font-size: 2em;
 padding: .5em;
 position: absolute;
 top: 0;
 left:10%;
 min-width: 80px;
 height: 40px;
 line-height: 40px;
}

.vjs-has-started .vjs-title-bar {
 display: flex;
 visibility: visible;
 opacity: 1;
 transition: visibility 0.1s, opacity 0.1s;
}
/* 用户不活动时设计title bar自动隐藏 */
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-title-bar {
 visibility: visible;
 /*visibility: hidden;*/
 opacity: 0;
 transition: visibility 1s, opacity 1s;
}

.vjs-controls-disabled .vjs-title-bar,
.vjs-using-native-controls .vjs-title-bar,
.vjs-error .vjs-title-bar {
 display: none !important;
}

.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-title-bar {
 opacity: 0;
 visibility: visible;
 /*visibility: hidden;*/
}

.vjs-has-started.vjs-no-flex .vjs-title-bar {
 display: table;
}

通过npm打包生成的css样式文件可能存在问题,可以访问http://vjs.zencdn.net/7.11/video-js.css将官方的css文件复制到本地,并在末尾添加自己需要的css样式代码

应用自己的组件

 重新编译

与之前编译方式一样,在源代码目录下使用npm run build命令进行编译

在html中调用组件

编写一个简单的html网页进行测试

<!DOCTYPE html>
<html lang="en">
<head>

 <title>Video.js | HTML5 Video Player</title>
 <!--引用本地样式文件 -->
 <link href="C:\Users\KKFORKK\Desktop\example\docs\copycss.css" rel="external nofollow" rel="stylesheet">
 <!--引用编译后的js文件-->
 <script src="C:\Users\KKFORKK\Desktop\example\dist\video.min.js"></script>
</head>
<body>

 <video id="example_video_1" class="video-js" controls preload="none" width="1024" height="768" 
 poster="D:/pixiv/1605679254116.jpg" >

 <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/" rel="external nofollow" target="_blank">
  supports HTML5 video</a></p>
 </video>
<script>
 //获取video元素并进行配置
 var player = videojs('example_video_1', {
  inactivityTimeout: 2000,
  //启用titleBar组件,并设置text
  TitleBar: {
  'text':'000'
  },
  sourcesOrder:true,
  controls: true, // 是否显示控制条
  preload: 'auto',
  autoplay: false,
  language: 'zh-CN', // 设置语言
  muted: false, // 是否静音
  controlBar: { // 设置控制条组件
  /* 使用children的形式可以控制每一个控件的位置,以及显示与否 */
  children: [
   {name: 'playToggle'}, // 播放按钮
   {name: 'currentTimeDisplay'}, // 当前已播放时间
   {name: 'progressControl'}, // 播放进度条
   {name: 'durationDisplay'}, // 总时间
   {name: 'audioTrackButton'},
   { // 倍数播放
   name: 'playbackRateMenuButton',
   'playbackRates': [0.5, 1, 1.5, 2, 2.5]
   },
   {
   name: 'volumePanel', // 音量控制
   inline: false, // 不使用水平方式
   },
   {name: 'FullscreenToggle'} // 全屏

  ]
  },
  sources:[ // 视频源,这里选择的是音频
   {	
				//资源
    src: 'D:/Music/Aimer - DAWN.mp3',
    type: 'audio/mp3',	//资源类型
    poster: 'D:/pixiv/1605679254116.jpg',
   }
  ]
  }, function (){
  console.log('视频可以播放了',this);
  });
 </script> 
</body>

</html>

实际效果

浏览器显示效果如图,可以看到标题正常显示了

video.js添加自定义组件的方法

同时,标题也可以和control-bar一样在用户不活动时自动隐藏

结语

通过为videojs开发titleBar组件,介绍了简单的组件开发过程.
后续将继续介绍control-bar组件的开发方法,以及组件点击事件和监听器的使用.

到此这篇关于videojs添加自定义组件的方法的文章就介绍到这了,更多相关videojs添加自定义组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
简单的Jquery全选功能
Nov 07 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
手把手教你如何编译打包video.js
Dec 09 #Javascript
ES6 十大特性简介
Dec 09 #Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 #Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 #Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 #Javascript
ES6中的类(Class)示例详解
Dec 09 #Javascript
JavaScript实现表单验证功能
Dec 09 #Javascript
You might like
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
纯javascript版日历控件
2016/11/24 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Python用户自定义异常的实现
2020/12/25 Python
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
学校司机岗位职责
2013/11/14 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
婚庆公司计划书
2014/09/15 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
违纪检讨书范文
2015/01/27 职场文书
教师求职自荐信
2015/03/26 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
讲座新闻稿
2015/07/18 职场文书