video.js新增自定義元件的方法

阿新 • • 發佈：2020-12-10

videojs雖然已經為我們提供了較為完善的功能.但是在實際應用中,我們仍然可能需要為這個播放器新增部分功能.下面將以新增標題欄為示例簡要介紹如何給videojs新增功能或元件.

獲取videojs原始碼

訪問videojs在github上的專案即可下載到videojs的原始碼
專案網址: https://github.com/videojs/video.js

原始碼的編譯

使用cmd,在原始碼根目錄下使用npm run build命令對原始碼進行打包.
具體的打包編譯方法可以點選這裡檢視
沒有錯誤正常編譯後可以得到dist資料夾,裡面有編譯後的檔案.

在這裡插入圖片描述

新增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初始化時會自動進行註冊

在這裡插入圖片描述

新增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>