videojs播放器插件使用詳解

HTTP stream是各家自己定義的http流，應用於國內點播視頻網站。

HLS是蘋果公司實現的基於 HTTP 的流媒體傳輸協議，全稱 HTTP Live Streaming，可支持流媒體的直播和點播，主要應用在 iOS 系統，爲 iOS 設備（如 iPhone、iPad）提供音視頻直播和點播方案。

RTMP是實時消息傳輸協議，Real Time Messaging Protocol，是 Adobe Systems 公司爲 Flash 播放器和服務器之間音頻、視頻和數據傳輸開發的開放協議。協議基於 TCP，是一個協議族，包括 RTMP 基本協議及 RTMPT/RTMPS/RTMPE 等多種變種。RTMP 是一種設計用來進行實時數據通信的網絡協議，主要用來在 Flash/AIR 平臺和支持RTMP協議的流媒體/交互服務器之間進行音視頻和數據通信。

HTTP用於點播，本質上還是文件分發，實時性差。

HLS支持點播和直播 ，HLS的延遲在10秒以上。

RTMP本質上是流協議，主要的優勢是：實時性高(實時性一般在3秒之內)、穩定性高。主要用於直播應用，對實時性有一定要求。

RTMP協議一般傳輸的是flv，f4v格式流，RTSP協議一般傳輸的是ts,mp4格式的流。HTTP沒有特定的流。

1、videojs簡介

Video.js是一款web視頻播放器，支持html5和flash兩種播放方式。

videojs官網：https://videojs.com/

videojs github：https://github.com/videojs/video.js

2、videojs初始化

video.js有兩種初始化方式，一種是在video的html標籤之中，一種是使用js來進行初始化。兩種都需先引入video.js和video-js.css

<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>

2.1、在video中進行初始化

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    width="600"
    height="400"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <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>

效果

2.2、使用js進行初始化

<!-- vjs-big-play-centered可使大的播放按鈕居住，vjs-fluid可使視頻佔滿容器 -->
<video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid">
  <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>
var player = videojs(document.getElementById('myVideo'), {
  controls: true, // 是否顯示控制條
  poster: 'xxx', // 視頻封面圖地址
  preload: 'auto',
  autoplay: false,
  fluid: true, // 自適應寬高
  language: 'zh-CN', // 設置語言
  muted: false, // 是否靜音
  inactivityTimeout: false,
  controlBar: { // 設置控制條組件
    /* 設置控制條裏面組件的相關屬性及顯示與否
    'currentTimeDisplay':true,
    'timeDivider':true,
    'durationDisplay':true,
    'remainingTimeDisplay':false,
    volumePanel: {
      inline: false,
    }
    */
    /* 使用children的形式可以控制每一個控件的位置，以及顯示與否 */
    children: [
      {name: 'playToggle'}, // 播放按鈕
      {name: 'currentTimeDisplay'}, // 當前已播放時間
      {name: 'progressControl'}, // 播放進度條
      {name: 'durationDisplay'}, // 總時間
      { // 倍數播放
        name: 'playbackRateMenuButton',
        'playbackRates': [0.5, 1, 1.5, 2, 2.5]
      },
      {
        name: 'volumePanel', // 音量控制
        inline: false, // 不使用水平方式
      },
      {name: 'FullscreenToggle'} // 全屏
    ]
  },
  sources:[ // 視頻源
      {
          src: '//vjs.zencdn.net/v/oceans.mp4',
          type: 'video/mp4',
          poster: '//vjs.zencdn.net/v/oceans.png'
      }
  ]
}, function (){
  console.log('視頻可以播放了',this);
});
</script>

3、controlBar組件的說明

playToggle, //播放暫停按鈕
volumeMenuButton,//音量控制
currentTimeDisplay,//當前播放時間
timeDivider, // '/' 分隔符
durationDisplay, //總時間
progressControl, //點播流時，播放進度條，seek控制
liveDisplay, //直播流時，顯示LIVE
remainingTimeDisplay, //當前播放時間
playbackRateMenuButton, //播放速率，當前只有html5模式下才支持設置播放速率
fullscreenToggle //全屏控制

currentTimeDisplay,timeDivider,durationDisplay是相對於 remainingTimeDisplay的另一套組件，後者只顯示當前播放時間，前者還顯示總時間。若要顯示成前者這種模式，即 '當前時間/總時間'，可以在初始化播放器選項中配置：

var myPlayer = neplayer('my-video', {controlBar:{
    'currentTimeDisplay':true,
    'timeDivider':true,
    'durationDisplay':true,
    'remainingTimeDisplay':false
}}, function() {
    console.log('播放器初始化完成');
});

4、video.js樣式修改

.video-js{ /* 給.video-js設置字體大小以統一各瀏覽器樣式表現，因爲video.js採用的是em單位 */
  font-size: 14px;
}
.video-js button{
  outline: none;
}
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3{ /* 視頻佔滿容器高度 */
  height: 100%;
  background-color: #161616;
}
.vjs-poster{
  background-color: #161616;
}
.video-js .vjs-big-play-button{ /* 中間大的播放按鈕 */
  font-size: 2.5em;
  line-height: 2.3em;
  height: 2.5em;
  width: 2.5em;
  -webkit-border-radius: 2.5em;
  -moz-border-radius: 2.5em;
  border-radius: 2.5em;
  background-color: rgba(115,133,159,.5);
  border-width: 0.12em;
  margin-top: -1.25em;
  margin-left: -1.75em;
}
.video-js.vjs-paused .vjs-big-play-button{ /* 視頻暫停時顯示播放按鈕 */
  display: block;
}
.video-js.vjs-error .vjs-big-play-button{ /* 視頻加載出錯時隱藏播放按鈕 */
  display: none;
}
.vjs-loading-spinner { /* 加載圓圈 */
  font-size: 2.5em;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  margin-top: -1em;
  margin-left: -1.5em;
}
.video-js .vjs-control-bar{ /* 控制條默認顯示 */
  display: flex;
}
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}

.vjs-button > .vjs-icon-placeholder:before{ /* 控制條所有圖標，圖標字體大小最好使用px單位，如果使用em，各瀏覽器表現可能會不大一樣 */
  font-size: 22px;
  line-height: 1.9;
}
.video-js .vjs-playback-rate .vjs-playback-rate-value{
  line-height: 2.4;
  font-size: 18px;
}
/* 進度條背景色 */
.video-js .vjs-play-progress{
  color: #ffb845;
  background-color: #ffb845;
}
.video-js .vjs-progress-control .vjs-mouse-display{
  background-color: #ffb845;
}
.vjs-mouse-display .vjs-time-tooltip{
  padding-bottom: 6px;
  background-color: #ffb845;
}
.video-js .vjs-play-progress .vjs-time-tooltip{
  display: none!important;
}

5、動態切換視頻

<script>
  var data = {
    src: 'xxx.mp4',
    type: 'video/mp4'
  };
  var player = videojs('myVideo', {...});
  player.pause();
  player.src(data);
  player.load(data);
  // 動態切換poster
  player.posterImage.setSrc('xxx.jpg');
  player.play();

  // 銷燬videojs
  //player.dispose();
</script>

6、設置語言

6.1傳統形式開發

對於使用<script>標籤形式的方式引入video.js，只需要在頁面中引入你需要的語言包即可

<script src="//example.com/path/to/lang/es.js"></script>
<script src="//example.com/path/to/lang/zh-CN.js"></script>
<script src="//example.com/path/to/lang/zh-TW.js"></script>

<script>
var player = videojs('myVideo', {
    language: 'zh-CN' // 初始化時設置語言，立即生效
});

/* 動態切換語言
  使用這種方式進行動態切換不會立即生效，必須有所操作後纔會生效。如播放按鈕，必須點擊一次播放按鈕後播放按鈕的提示文字纔會改變  
 */
//player.language('zh-TW');
</script>

6.2、vue開發

import Video from 'video.js'
/* 不能直接引入js，否則會報錯：videojs is not defined 
import 'video.js/dist/lang/zh-CN.js' */
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import video_en from  'video.js/dist/lang/en.json'
import 'video.js/dist/video-js.css'

Video.addLanguage('zh-CN', video_zhCN);
Video.addLanguage('en', video_en);

7、解決在iPhone中播放時自動全屏問題(2019.09.23)

在iPhone設備上播放視頻時(微信瀏覽器上也會有這個問題)會自動全屏，這裏的全屏並不是常規的手機橫屏那種全屏，而是類似於一個modal彈窗的全屏，解決辦法就是在video標籤中添加playsinline="true"屬性

<video
    webkit-playsinline="true"
    playsinline="true"
    class="video-js vjs-big-play-centered vjs-fluid">
</video>

8、未解決的問題

控制條的高級自定義，如圖中的進度條及時間在上面，播放按鈕、上一個視頻、下一個視頻，設置及音量在下面這種控件該如何實現？

9、其他

9.1、常用事件

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

9.2、常用選項

autoplay : true/false 播放器準備好之後，是否自動播放【默認false】
controls : true/false 是否擁有控制條【默認true】,如果設爲false ,那麼只能通過api進行控制了。也就是說界面上不會出現任何控制按鈕
height: 視頻容器的高度，字符串或數字單位像素比如： height:300 or height:‘300px‘
width: 視頻容器的寬度, 字符串或數字單位像素
loop : true/false 視頻播放結束後，是否循環播放
muted : true/false 是否靜音
poster: 播放前顯示的視頻畫面，播放開始之後自動移除。通常傳入一個URL
preload:預加載
‘auto‘ 自動
’metadata‘ 元數據信息，比如視頻長度，尺寸等
‘none‘ 不預加載任何數據，直到用戶開始播放纔開始下載
children: Array | Object 可選子組件從基礎的Component組件繼承而來的子組件，數組中的順序將影響組件的創建順序哦。
options 選項

標準元素選項
這些選項中的每一個也可用作標準元素屬性 ; 因此，可以使用設置指南中列出的所有三種方式定義它們。通常，未列出默認值，因爲這是留給瀏覽器供應商的。
autoplay

類型： boolean
如果true/作爲屬性存在，則在播放器準備就緒時開始播放。

注意：從iOS 10開始，Apple autoplay在Safari中提供支持。有關詳細信息，請參閱“新增功能。
controls

類型： boolean
確定播放器是否具有用戶可以與之交互的控件。沒有控件，啓動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
height

類型： string|number
設置視頻播放器的顯示高度（以像素爲單位）。
loop

類型： boolean
使視頻一結束就重新開始。
muted

類型： boolean
默認情況下會靜音任何音頻。
poster

類型： string
在視頻開始播放之前顯示的圖像的URL。這通常是視頻的框架或自定義標題屏幕。一旦用戶點擊“播放”，圖像就會消失。
preload

類型： string
建議瀏覽器是否應在加載元素後立即開始下載視頻數據。支持的值是：
‘auto’
立即開始加載視頻（如果瀏覽器支持）。某些移動設備不會預加載視頻，以保護用戶的帶寬/數據使用。這就是爲什麼這個價值被稱爲’汽車’，而不是更具決定性的東西’true’。
這往往是最常見和推薦的值，因爲它允許瀏覽器選擇最佳行爲。
‘metadata’
僅加載視頻的元數據，其中包括視頻的持續時間和尺寸等信息。有時，元數據將通過下載幾幀視頻來加載。
‘none’
不要預加載任何數據。瀏覽器將等待用戶點擊“播放”開始下載。
src

類型： string
要嵌入的視頻源的源URL。
width

類型： string|number
設置視頻播放器的顯示寬度（以像素爲單位）。
Video.js特定的選項

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

類型： string
將播放器置於流體模式，並在計算播放器的動態大小時使用該值。該值應表示比率 - 由冒號（例如"16:9"或"4:3"）分隔的兩個數字。
autoSetup

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

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

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

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

此外，如果元素具有"vjs-fluid"，則此選項自動設置爲true。
inactivityTimeout

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

在inactivityTimeout決定了不活動的許多毫秒聲明用戶閒置之前是必需的。值爲0表示沒有inactivityTimeout，用戶永遠不會被視爲非活動狀態。
language

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

在Video.js中瞭解有關語言的更多信息。
languages

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

在Video.js中瞭解有關語言的更多信息

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

類型： boolean
明確設置關聯技術選項的默認值。
notSupportedMessage

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

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

例如：

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選項是對象，因此無法保證初始化順序！

有關Video.js插件的更多信息，請參閱插件指南。
sources

類型： Array

一組對象，它們反映了本機元素具有一系列子元素的能力。這應該是帶有src和type屬性的對象數組。例如：

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

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

techCanOverridePoster

類型： boolean

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

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

定義Video.js技術首選的順序。默認情況下，這意味着Html5首選技術。其他註冊的技術將在此技術之後按其註冊順序添加。
vtt.js

類型： string

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

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

Video.js播放器是一個組件。與所有組件一樣，您可以定義它包含的子項，它們出現的順序以及傳遞給它們的選項。

這是一個快速參考; 因此，有關Video.js中組件的更多詳細信息，請查看組件指南。
children

類型： Array|Object

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

// 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）爲組件提供自定義選項。這些可以嵌套在孫子關係的表示中。例如，要禁用全屏控件：

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

技術選擇
${techName}

類型： Object

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

swf
指定Video.js SWF文件在Flash技術位置的位置：

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

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

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

類型： boolean

只有技術支持Html5，此選項可以設置true爲強制觸摸設備的本機控件。
nativeAudioTracks

類型： boolean

可以設置爲false禁用本機音軌支持。最常用於videojs-contrib-hls。
nativeTextTracks

類型： boolean

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

類型： boolean

可以設置爲false禁用本機視頻軌道支持。最常用於videojs-contrib-hls。

videojs播放器插件使用詳解

1、videojs簡介

2、videojs初始化

2.1、在video中進行初始化

2.2、使用js進行初始化

3、controlBar組件的說明

4、video.js樣式修改

5、動態切換視頻

6、設置語言

6.1傳統形式開發

6.2、vue開發

7、解決在iPhone中播放時自動全屏問題(2019.09.23)

8、未解決的問題

9、其他

redis的key亂碼問題和值自增問題

CORS error 但是 status code 是200 OK

一個開源且全面的C#算法實戰教程

一款.NET開源、功能強大、跨平臺的繪圖庫 - OxyPlot

壓縮上傳的GPU數據的方案

OpenTelemetry 實踐指南：歷史、架構與基本概念

需求管理祕籍：從混亂到有序，讓你的項目高效運轉

使用skopeo同步鏡像

用光線投射法渲染規則模型

Python庫QR-Code製作動態二維碼

利用jieba和pyecharts做新聞關鍵詞統計可視化

寫了個監控nginx進程的Python腳本

flask中的所有第三方模塊大集合

selenium爬取拉勾網python職位信息

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結