一、用video.js實現(xiàn)視頻播放

1、安裝video.js插件

// 安裝video.js插件
npm install video.js -S // 如果需要播放rtmp直播流，需安裝一下插件
npm install videojs-flash -S

2、在組件代碼里使用

<template><div data-vjs-player><video ref="videoNode" class="video-js vjs-default-skin">抱歉，您的瀏覽器不支持</video></div></template>

引入videojs插件

import videojs from "video.js";//播放器中文，不能使用.js文件
import videozhCN from "video.js/dist/lang/zh-CN.json";//樣式文件注意要加上
import "video.js/dist/video-js.css"; //如果要播放RTMP要使用flash 需要先npm i videojs-flash
import "videojs-flash";export default {data() {return {player: null,controls: true};},//初始化播放器mounted(){let options = {autoplay: true, // 自動播放language: "zh-CN",controls: this.controls, // 控制條preload: "auto", // 自動加載errorDisplay: true, // 錯誤展示// fluid: true, // 跟隨外層容器變化大小，跟隨的是外層寬度width: "500px",height: "500px",// controlBar: false,  // 設(shè)為false不渲染控制條DOM元素，只設(shè)置controls為false雖然不展示，但是存在// textTrackDisplay: false,  // 不渲染字幕相關(guān)DOMuserActions: {hotkeys: true // 是否支持熱鍵},notSupportedMessage: "此視頻暫無法播放，請稍后再試",techOrder: ["h5","flash"], // 定義Video.js技術(shù)首選的順序sources: [{src: './video/xxx.mp4', // 視頻或者直播地址type: 'video/mp4',//type: 'rtmp/flv',}]};this.player = videojs(this.$refs.videoNode,options,function onPlayerReady() {videojs.log(`Your player is ready!`);});videojs.addLanguage("zh-CN", videozhCN);},beforeDestroy() {if (this.player) {this.player.dispose();}}
}

注意：controls 如果不是true的話，不會顯示播放按鈕

3、播放按鈕居中?

播放按鈕默認在左上角，是作者認為會遮擋內(nèi)容考慮的，不過這個是可以根據(jù)參數(shù)修改的，只需要給video標簽加一個class（vjs-big-play-centered）就可以了。

<video ref="videoNode" class="video-js vjs-default-skin vjs-big-play-centered"></video>

二、用videojs-markers實現(xiàn)視頻進度條打點

要實現(xiàn)的功能是視頻的進度條上面有一些小點，然后鼠標放上去會出現(xiàn)一些文字提示。

1、安裝videojs-markers

npm i videojs-markers -S

2、引入videojs-markers

// 引入videojs-markers
import "videojs-markers";//引入樣式
import "videojs-markers/dist/videojs.markers.css";

3、使用videojs-markers

this.player.markers({markerStyle: {// 標記點樣式width: "0.7em",height: "0.7em",bottom: "-0.20em","border-radius": "50%","background-color": "orange",position: "absolute"},//鼠標移入標記點的提示markerTip: {display: true, // 是否顯示/*用于動態(tài)構(gòu)建標記提示文本的回調(diào)函數(shù)。只需返回一個字符串，參數(shù)標記是傳遞給插件的標記對象*/text: function(marker) {return marker.text;}},markers: [{time: 20,text:'點位一',class: 'red'},{time: 40,text:'點位二',class: 'green'},{time: 130,text:'點位三',class: 'yellow'},{time: 200,text:'點位四'}],
});

注意：markerStyle配置的是各個打點的默認顏色，如果要每個打點都有自己各自的顏色，可以在markers里給每個打點添加class名字，然后在css里單獨設(shè)置顏色。

三、video.js 配置項?

1、常用配置選項

• autoplay：true/false 播放器準備好之后，是否自動播放 【默認false】
• controls：true/false 是否擁有控制條 【默認true】，如果設(shè)為false，界面上不會出現(xiàn)任何控制按鈕，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API
• height: 視頻容器的高度，字符串或數(shù)字（以像素為單位），比如： height: 300 或者?height: '300px'
• width: 視頻容器的寬度, 字符串或數(shù)字（以像素為單位）
• loop : true/false 視頻播放結(jié)束后，是否循環(huán)播放
• muted : true/false 是否靜音
• poster: 播放前顯示的視頻畫面，播放開始之后自動移除。通常傳入一個URL
• preload: 預(yù)加載
  • 'auto'：立即開始加載視頻（如果瀏覽器支持）。某些移動設(shè)備不會預(yù)加載視頻，以保護用戶的帶寬/數(shù)據(jù)使用。
  • 'metadata'：僅加載視頻的元數(shù)據(jù)，其中包括視頻的持續(xù)時間和尺寸等信息。有時，元數(shù)據(jù)將通過下載幾幀視頻來加載。
  • 'none'：不要預(yù)加載任何數(shù)據(jù)。瀏覽器將等待用戶點擊“播放”開始下載。
• children: Array | Object 可選子組件 從基礎(chǔ)的Component組件繼承而來的子組件，數(shù)組中的順序?qū)⒂绊懡M件的創(chuàng)建順序

2、特定的配置選項

除非另有說明，否則默認情況下每個選項undefined。

aspectRatio

類型： string
將播放器置于流體模式，并在計算播放器的動態(tài)大小時使用該值。該值應(yīng)表示比率 - 由冒號（例如"16:9"或"4:3"）分隔的兩個數(shù)字。

autoSetup

類型： boolean
阻止播放器為具有data-setup屬性的媒體元素運行autoSetup 。

注意：必須在與videojs.options.autoSetup = falsevideojs源加載生效的同一時刻全局設(shè)置。

children

類型： Array|Object
此選項繼承自基Component類。

fluid

類型： boolean
何時true，Video.js播放器將具有流暢的大小。換句話說，它將擴展以適應(yīng)其容器。

此外，如果元素具有"vjs-fluid"，則此選項自動設(shè)置為true。

inactivityTimeout

類型： number
Video.js表示用戶通過"vjs-user-active"和"vjs-user-inactive"類以及"useractive"事件與玩家進行交互。

在inactivityTimeout決定了不活動的許多毫秒聲明用戶閑置之前是必需的。值為0表示沒有inactivityTimeout，用戶永遠不會被視為非活動狀態(tài)。

language

鍵入：string，默認值：瀏覽器默認值或’en’
與播放器中的一種可用語言匹配的語言代碼。這為播放器設(shè)置了初始語言，但始終可以更改。

languages

類型： Object
自定義播放器中可用的語言。此對象的鍵將是語言代碼，值將是具有英語鍵和翻譯值的對象。

注意：通常，不需要此選項，最好將自定義語言傳遞給videojs.addLanguage()

nativeControlsForTouch

類型： boolean
明確設(shè)置關(guān)聯(lián)技術(shù)選項的默認值。

notSupportedMessage

類型： string
允許覆蓋Video.js無法播放媒體源時顯示的默認消息。

playbackRates

類型： Array
嚴格大于0的數(shù)字數(shù)組，其中1表示常速（100％），0.5表示半速（50％），2表示雙速（200％）等。如果指定，Video.js顯示控件（類vjs-playback-rate）允許用戶從選擇數(shù)組中選擇播放速度。選項以從下到上的指定順序顯示。

videojs('my-player', {playbackRates: [0.5, 1, 1.5, 2]
});

plugins

類型： Object
這支持在初始化播放器時使用自定義選項自動初始化插件 - 而不是要求您手動初始化它們。

videojs('my-player', {plugins: {foo: {bar: true},boo: {baz: false}}
});以上大致相當于：var player = videojs('my-player');player.foo({bar: true});
player.boo({baz: false});

雖然，由于plugins選項是對象，因此無法保證初始化順序！

sources

類型： Array

一組對象，它們反映了本機元素具有一系列子元素的能力。這應(yīng)該是帶有src和type屬性的對象數(shù)組。

videojs('my-player', {sources: [{src: './video/video.mp4',type: 'video/mp4'}, {src: './video/video.webm',type: 'video/webm'}]
});

使用元素將具有相同的效果：

<video ...><source src="./video/video.mp4" type="video/mp4"><source src="./video/video.webm" type="video/webm">
</video>

techCanOverridePoster

類型： boolean

使技術(shù)人員有可能覆蓋玩家的海報并融入玩家的海報生命周期。當使用多個技術(shù)時，這可能很有用，每個技術(shù)都必須在播放新源時設(shè)置自己的海報。

techOrder

輸入：Array，默認值：[‘html5’]

定義Video.js技術(shù)首選的順序。默認情況下，這意味著Html5首選技術(shù)。其他注冊的技術(shù)將在此技術(shù)之后按其注冊順序添加。

vtt.js

類型： string

允許覆蓋vtt.js的默認URL，該URL可以異步加載到polyfill支持WebVTT。

此選項將用于Video.js（即video.novtt.js）的“novtt”版本中。否則，vtt.js與Video.js捆綁在一起。

3、組件選項

children

類型： Array|Object

如果Array- 這是默認值 - 這用于確定哪些子節(jié)點（按組件名稱）以及在播放器（或其他組件）上創(chuàng)建它們的順序

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.videojs('my-player', {children: ['bigPlayButton','controlBar']
});

該children選項還可以作為傳遞Object。在這種情況下，它用于提供options任何/所有孩子，包括禁用它們false

// This player's ONLY child will be the controlBar. Clearly, this is not the
// ideal method for disabling a grandchild!videojs('my-player', {children: {controlBar: {fullscreenToggle: false}}
});

${componentName}

類型： Object

可以通過組件名稱的低駝峰案例變體（例如controlBarfor ControlBar）為組件提供自定義選項。這些可以嵌套在孫子關(guān)系的表示中。

例如，要禁用全屏控件

videojs('my-player', {controlBar: {fullscreenToggle: false}
});

${techName}

類型： Object

Video.js回放技術(shù)（即“技術(shù)”）可以作為傳遞給該videojs功能的選項的一部分給予自定義選項。它們應(yīng)該在技??術(shù)名稱的小寫變體下傳遞（例如"flash"或"html5"）。

flash

swf
指定Video.js SWF文件在Flash技術(shù)位置的位置

videojs('my-player', {flash: {swf: '//path/to/videojs.swf'}
});

但是，更改全局默認值通常更合適：

videojs.options.flash.swf = ‘//path/to/videojs.swf’

nativeControlsForTouch

類型： boolean

只有技術(shù)支持Html5，此選項可以設(shè)置true為強制觸摸設(shè)備的本機控件。

nativeAudioTracks

類型： boolean

可以設(shè)置為false禁用本機音軌支持。最常用于videojs-contrib-hls。

nativeTextTracks

類型： boolean

可以設(shè)置為false強制模擬文本軌道而不是本機支持。該nativeCaptions選項也存在，但只是一個別名nativeTextTracks。

nativeVideoTracks

類型： boolean

可以設(shè)置為false禁用本機視頻軌道支持。最常用于videojs-contrib-hls。
?

四、常用事件

• 播放 this.play()
• 停止 – video沒有stop方法，可以用pause 暫停獲得同樣的效果
• 暫停 this.pause()
• 銷毀 this.dispose()
• 監(jiān)聽 this.on(‘click‘,fn)
• 觸發(fā)事件this.trigger(‘dispose‘)

var options = {};var player = videojs(‘example_video_1‘, options, function onPlayerReady() {videojs.log(‘播放器已經(jīng)準備好了!‘);// In this context, `this` is the player that was created by Video.js.<br>  // 注意，這個地方的上下文， `this` 指向的是Video.js的實例對像playerthis.play();// How about an event listener?<br>  // 如何使用事件監(jiān)聽？this.on(‘ended‘, function() {videojs.log(‘播放結(jié)束了!‘);});
});

五、播放器自定義組件

1、在控制欄上添加按鈕

 var button = this.player.getChild('ControlBar').addChild('button', {controlText: 'My button',className: 'vjs-visible-text',clickHandler: function(event) {videojs.log('Clicked');}
});

2、創(chuàng)建用于在播放器頂部顯示標題的組件

// Get the Component base class from Video.js
var Component = videojs.getComponent('Component');// The videojs.extend function is used to assist with inheritance. In
// an ES6 environment, `class TitleBar extends Component` would work
// identically.
var TitleBar = videojs.extend(Component, {// The constructor of a component receives two arguments: the// player it will be associated with and an object of options.constructor: function(player, options) {// It is important to invoke the superclass before anything else, // to get all the features of components out of the box!Component.apply(this, arguments);// If a `text` option was passed in, update the text content of // the component.if (options.text) {this.updateTextContent(options.text);}},// The `createEl` function of a component creates its DOM element.createEl: function() {return videojs.createEl('div', {// Prefixing classes of elements within a player with "vjs-" // is a convention used in Video.js.className: 'vjs-title-bar'});},// This function could be called at any time to update the text // contents of the component.updateTextContent: function(text) {// If no text was provided, default to "Title Unknown"if (typeof text !== 'string') {text = 'Title Unknown';}// Use Video.js utility DOM methods to manipulate the content// of the component's element.videojs.emptyEl(this.el());videojs.appendContent(this.el(), text);}
});// Register the component with Video.js, so it can be used in players.
videojs.registerComponent('TitleBar', TitleBar);// Create a player.
var player = videojs('my-player');// Add the TitleBar as a child of the player and provide it some text 
// in its options.
player.addChild('TitleBar', {text: 'The Title of The Video!'});

3、添加一個自定義的放大功能

子組件嵌套

const MenuButton = videojs.getComponent('MenuButton')
const Menu = videojs.getComponent('Menu')
const MenuItem = videojs.getComponent('MenuItem')const items = ['100%', '80%', '50%', 'auto']
const myMenu = new Menu(this.player)const myMenuItemList = []for (let i = 0; i < items.length; i++) {myMenuItemList.push(new MenuItem(this.player, { label: items[i] }))myMenuItemList[i].on('click', $event => {this.setShowPercent($event)})myMenu.addItem(myMenuItemList[i])
}this.player.myMenu = myMenu
this.player.myMenuItemList = myMenuItemListconst myMenuButton = new MenuButton(this.player)
myMenuButton.addChild(myMenu)
myMenuButton.controlText('顯示比例')
myMenuButton.addClass('my-menu-button')
this.player.myMenuButton = myMenuButtonthis.player.controlBar.addChild(myMenuButton)

?

參考文檔?

Videojs-markers

Home | Video.js Documentation

快速使用 - video.js 中文文檔

Components | Video.js