獲取videojs源碼

訪問videojs在github上的項目便可下載到videojs的源代碼
項目網址:https://github.com/videojs/video.js
css

源碼的編譯

使用cmd,在源代碼根目錄下使用npm run build命令對源碼進行打包.
具體的打包編譯方法能夠點擊這裏查看
沒有錯誤正常編譯後能夠獲得dist文件夾,裏面有編譯後的文件.

html

添加TitleBar組件

js代碼編寫

開發TitleBar源碼html5

// 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()方法註冊組件.
java

在player裏註冊自定義組件

打開player.js文件,在圖中的地方import本身的組件便可.videojs初始化時會自動進行註冊

git

添加css樣式

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

/** 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樣式代碼web

應用本身的組件

從新編譯

與以前編譯方式同樣,在源代碼目錄下使用npm run build命令進行編譯npm

在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="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/" 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>

實際效果

瀏覽器顯示效果如圖,能夠看到標題正常顯示了

同時,標題也能夠和control-bar同樣在用戶不活動時自動隱藏

結語

經過爲videojs開發titleBar組件,介紹了簡單的組件開發過程. 後續將繼續介紹control-bar組件的開發方法,以及組件點擊事件和監聽器的使用.

爲videojs添加自定義組件

目錄