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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
Python常用的爬虫技巧总结
2016/03/28 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
python多线程和多进程关系详解
2020/12/14 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
大专应届生个人简历的自我评价
2013/10/15 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
解析MySQL索引的作用
2022/03/03 MySQL
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技