摘要：最近的項(xiàng)目中需要播放視頻，鑒于元素的一些坑及不想自己造輪子，于是就找到了端播放視頻使用量最多的插件，是國外開發(fā)者開發(fā)的，英語本身就不好的我看英文文檔簡直是折磨，國內(nèi)又沒有中文文檔，能搜的到的基本是簡單的使用及最基本的的介紹，想要實(shí)現(xiàn)一些自定

最近的項(xiàng)目中需要播放視頻，鑒于html5元素

video.js有兩種初始化方式，一種是在video的html標(biāo)簽之中，一種是使用js來進(jìn)行初始化

效果

playToggle, //播放暫停按鈕

volumeMenuButton,//音量控制

currentTimeDisplay,//當(dāng)前播放時(shí)間

timeDivider, // "/" 分隔符

durationDisplay, //總時(shí)間

progressControl, //點(diǎn)播流時(shí)，播放進(jìn)度條，seek控制

liveDisplay, //直播流時(shí)，顯示LIVE

remainingTimeDisplay, //當(dāng)前播放時(shí)間

playbackRateMenuButton, //播放速率，當(dāng)前只有html5模式下才支持設(shè)置播放速率

fullscreenToggle //全屏控制

currentTimeDisplay,timeDivider,durationDisplay是相對(duì)于 remainingTimeDisplay的另一套組件，后者只顯示當(dāng)前播放時(shí)間，前者還顯示總時(shí)間。若要顯示成前者這種模式，即 "當(dāng)前時(shí)間/總時(shí)間"，可以在初始化播放器選項(xiàng)中配置：

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

.video-js{ /* 給.video-js設(shè)置字體大小以統(tǒng)一各瀏覽器樣式表現(xiàn)，因?yàn)関ideo.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{ /* 視頻暫停時(shí)顯示播放按鈕 */
  display: block;
}
.video-js.vjs-error .vjs-big-play-button{ /* 視頻加載出錯(cuò)時(shí)隱藏播放按鈕 */
  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{ /* 控制條默認(rèn)顯示 */
  display: flex;
}
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}

.vjs-button > .vjs-icon-placeholder:before{ /* 控制條所有圖標(biāo)，圖標(biāo)字體大小最好使用px單位，如果使用em，各瀏覽器表現(xiàn)可能會(huì)不大一樣 */
  font-size: 22px;
  line-height: 1.9;
}
.video-js .vjs-playback-rate .vjs-playback-rate-value{
  line-height: 2.4;
  font-size: 18px;
}
/* 進(jìn)度條背景色 */
.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;
}

對(duì)于使用 5.2、vue開發(fā)

import Video from "video.js"
/* 不能直接引入js，否則會(huì)報(bào)錯(cuò)：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);