一、用video.js實(shí)現(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, // 自動(dòng)播放
            language: "zh-CN",
            controls: this.controls, // 控制條
            preload: "auto", // 自動(dòng)加載
            errorDisplay: true, // 錯(cuò)誤展示
            // fluid: true, // 跟隨外層容器變化大小，跟隨的是外層寬度
            width: "500px",
            height: "500px",
            // controlBar: false,  // 設(shè)為false不渲染控制條DOM元素，只設(shè)置controls為false雖然不展示，但是存在
            // textTrackDisplay: false,  // 不渲染字幕相關(guān)DOM
            userActions: {
              hotkeys: true // 是否支持熱鍵
            },
            notSupportedMessage: "此視頻暫無法播放，請(qǐng)稍后再試",
            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的話，不會(huì)顯示播放按鈕

3、播放按鈕居中?

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

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

二、用videojs-markers實(shí)現(xiàn)視頻進(jìn)度條打點(diǎn)

要實(shí)現(xiàn)的功能是視頻的進(jìn)度條上面有一些小點(diǎn)，然后鼠標(biāo)放上去會(huì)出現(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: {
    // 標(biāo)記點(diǎn)樣式
    width: "0.7em",
    height: "0.7em",
    bottom: "-0.20em",
    "border-radius": "50%",
    "background-color": "orange",
    position: "absolute"
  },

  //鼠標(biāo)移入標(biāo)記點(diǎn)的提示
  markerTip: {
    display: true, // 是否顯示
    /*
      用于動(dòng)態(tài)構(gòu)建標(biāo)記提示文本的回調(diào)函數(shù)。
      只需返回一個(gè)字符串，參數(shù)標(biāo)記是傳遞給插件的標(biāo)記對(duì)象
     */
    text: function(marker) {
      return marker.text;
    }
  },

  markers: [
        {
          time: 20,
          text:'點(diǎn)位一',
          class: 'red'
        },
        {
          time: 40,
          text:'點(diǎn)位二',
          class: 'green'
        },
        {
          time: 130,
          text:'點(diǎn)位三',
          class: 'yellow'
        },
        {
          time: 200,
          text:'點(diǎn)位四'
        }
    ],
});

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

三、video.js 配置項(xiàng)?

1、常用配置選項(xiàng)

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

2、特定的配置選項(xiàng)

除非另有說明，否則默認(rèn)情況下每個(gè)選項(xiàng)undefined。

aspectRatio

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

autoSetup

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

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

children

類型： Array|Object
此選項(xiàng)繼承自基Component類。

fluid

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

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

inactivityTimeout

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

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

language

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

languages

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

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

nativeControlsForTouch

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

notSupportedMessage

類型： string
允許覆蓋Video.js無法播放媒體源時(shí)顯示的默認(rèn)消息。

playbackRates

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

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

plugins

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

videojs('my-player', {
? plugins: {
? ? foo: {bar: true},
? ? boo: {baz: false}
? }
});

以上大致相當(dāng)于：

var player = videojs('my-player');

player.foo({bar: true});
player.boo({baz: false});

雖然，由于plugins選項(xiàng)是對(duì)象，因此無法保證初始化順序！

sources

類型： Array

一組對(duì)象，它們反映了本機(jī)元素具有一系列子元素的能力。這應(yīng)該是帶有src和type屬性的對(duì)象數(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ù)人員有可能覆蓋玩家的海報(bào)并融入玩家的海報(bào)生命周期。當(dāng)使用多個(gè)技術(shù)時(shí)，這可能很有用，每個(gè)技術(shù)都必須在播放新源時(shí)設(shè)置自己的海報(bào)。

techOrder

輸入：Array，默認(rèn)值：[‘html5’]

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

vtt.js

類型： string

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

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

3、組件選項(xiàng)

children

類型： Array|Object

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

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.

videojs('my-player', {
  children: [
    'bigPlayButton',
    'controlBar'
  ]
});

該children選項(xiàng)還可以作為傳遞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）為組件提供自定義選項(xiàng)。這些可以嵌套在孫子關(guān)系的表示中。

例如，要禁用全屏控件

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

${techName}

類型： Object

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

flash

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

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

但是，更改全局默認(rèn)值通常更合適：

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

nativeControlsForTouch

類型： boolean

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

nativeAudioTracks

類型： boolean

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

nativeTextTracks

類型： boolean

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

nativeVideoTracks

類型： boolean

可以設(shè)置為false禁用本機(jī)視頻軌道支持。最常用于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)準(zhǔn)備好了!‘);
 
  // In this context, `this` is the player that was created by Video.js.<br>  
  // 注意，這個(gè)地方的上下文， `this` 指向的是Video.js的實(shí)例對(duì)像player
  this.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)建用于在播放器頂部顯示標(biāo)題的組件

// 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、添加一個(gè)自定義的放大功能

子組件嵌套

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 = myMenuItemList
  
const myMenuButton = new MenuButton(this.player)
myMenuButton.addChild(myMenu)
myMenuButton.controlText('顯示比例')
myMenuButton.addClass('my-menu-button')
this.player.myMenuButton = myMenuButton

this.player.controlBar.addChild(myMenuButton)

4、關(guān)于自定義按鈕的文本不顯示的解決方法

其實(shí)就是自定義按鈕默認(rèn)是不顯示文本的，需要我們手動(dòng)添加className：vjs-visible-text

this.player = videojs(...)

var Button = videojs.getComponent('Button');
var button = new Button(this.player, {
    className: 'vjs-visible-text',
    controlText: '按鈕文本',
    clickHandler: function(event) {
        videojs.log('Clicked');
    }
});
       
var button = this.player.getChild('ControlBar').addChild(button)

this.player = videojs(...)

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

this.player = videojs(...)

const MenuButton = videojs.getComponent('MenuButton')

const myMenuButton = new MenuButton(this.player)
myMenuButton.addChild(myMenu)
myMenuButton.controlText('顯示比例')
myMenuButton.addClass('my-menu-button')
// 添加顯示文本的類名
myMenuButton.children()[0].addClass('vjs-visible-text')

        
this.player.myMenuButton = myMenuButton
this.player.controlBar.addChild(myMenuButton)

參考文檔?

Videojs-markers

Home | Video.js Documentation

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

Components | Video.js文章來源地址http://www.zghlxwxcb.cn/news/detail-403157.html

到了這里，關(guān)于在vue項(xiàng)目中使用video.js實(shí)現(xiàn)視頻播放和視頻進(jìn)度條打點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！