目錄
- 獲取videojs原始碼
- 原始碼的編譯
- 添加TitleBar組件
- js代碼撰寫
- 在player里注冊自定義組件
- 添加css樣式
- 應用自己的組件
- 重新編譯
- 在html中呼叫組件
- 實際效果
- 結語
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="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組件的開發方法,以及組件點擊事件和監聽器的使用.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/232060.html
標籤：其他
上一篇：聊一聊函式節流和函式防抖
下一篇：如何編譯打包video.js