成年人精品视频,97久久久,日本va欧美va精品发布

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:UsersKKFORKKDesktopexampledocscopycss.css" rel="external nofollow" rel="stylesheet">
 <!--引用編譯后的js文件-->
 <script src="C:UsersKKFORKKDesktopexampledistvideo.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>