video.js添加自定義組件的方法

更新時(shí)間：2020年12月09日 11:48:45 作者：梵梵梵～

這篇文章主要介紹了videojs添加自定義組件的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

獲取videojs源碼

訪問videojs在github上的項(xiàng)目即可下載到videojs的源代碼
項(xiàng)目網(wǎng)址: https://github.com/videojs/video.js

源碼的編譯

使用cmd,在源代碼根目錄下使用npm run build命令對(duì)源碼進(jìn)行打包.
具體的打包編譯方法可以點(diǎn)擊這里查看
沒有錯(cuò)誤正常編譯后可以得到dist文件夾,里面有編譯后的文件.

在這里插入圖片描述

添加TitleBar組件

js代碼編寫

開發(fā)TitleBar源碼

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



// videojs.extend方法用來實(shí)現(xiàn)繼承,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.
 // 這個(gè)構(gòu)造函數(shù)接收兩個(gè)參數(shù)：
 // player將被用來關(guān)聯(lián)options中的參數(shù)
 /**
 * constructor
 * @param {Player} player the player
 * @param {any} options the options
 */
 constructor(player, options) {
 	//調(diào)用父類的構(gòu)造方法
 super(player, options);

 // 如果在options中傳了text屬性，那么更新這個(gè)組件的文字顯示
 if (options.text) {
  this.updateTextContent(options.text);
 }
 }

 // The `createEl` function of a component creates its DOM element.
 // 創(chuàng)建一個(gè)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'
 });
 }

 /**
 * 設(shè)置標(biāo)題
 * @param {String} text the title
 */
 updateTextContent(text) {
 // 如果options中沒有提供text屬性，默認(rèn)顯示為空
 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中注冊(cè)這個(gè)組件，才可以使用
Component.registerComponent('TitleBar', TitleBar);
export default TitleBar;

需要注意的是,TitleBar應(yīng)繼承Component,并且在構(gòu)造方法中應(yīng)先調(diào)用父類的構(gòu)造方法.
同時(shí),需要調(diào)用Component.registerComponent()方法注冊(cè)組件.

在player里注冊(cè)自定義組件

打開player.js文件,在圖中的地方import自己的組件即可.videojs初始化時(shí)會(huì)自動(dòng)進(jìn)行注冊(cè)

在這里插入圖片描述

添加css樣式

在title-bar.js文件中,buildCSSClass方法中聲明了titleBar的css樣式為vjs-title-bar,故在css樣式中末尾添加如下css代碼

/** title bar默認(rèn)樣式 */
.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;
}
/* 用戶不活動(dòng)時(shí)設(shè)計(jì)title bar自動(dòng)隱藏 */
.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文件復(fù)制到本地,并在末尾添加自己需要的css樣式代碼

應(yīng)用自己的組件

重新編譯

與之前編譯方式一樣,在源代碼目錄下使用npm run build命令進(jìn)行編譯

在html中調(diào)用組件

編寫一個(gè)簡(jiǎn)單的html網(wǎng)頁進(jìn)行測(cè)試

<!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  rel="external nofollow" target="_blank">
  supports HTML5 video</a></p>
 </video>
<script>
 //獲取video元素并進(jìn)行配置
 var player = videojs('example_video_1', {
  inactivityTimeout: 2000,
  //啟用titleBar組件,并設(shè)置text
  TitleBar: {
  'text':'000'
  },
  sourcesOrder:true,
  controls: true, // 是否顯示控制條
  preload: 'auto',
  autoplay: false,
  language: 'zh-CN', // 設(shè)置語言
  muted: false, // 是否靜音
  controlBar: { // 設(shè)置控制條組件
  /* 使用children的形式可以控制每一個(gè)控件的位置，以及顯示與否 */
  children: [
   {name: 'playToggle'}, // 播放按鈕
   {name: 'currentTimeDisplay'}, // 當(dāng)前已播放時(shí)間
   {name: 'progressControl'}, // 播放進(jìn)度條
   {name: 'durationDisplay'}, // 總時(shí)間
   {name: 'audioTrackButton'},
   { // 倍數(shù)播放
   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>