video.js
- 提供插件API拔创，以便可以將不同類型的視頻傳遞給本機視頻元素（例如庶近，HLS，Flash训挡，HTML5視頻等）澳骤。
- 跨瀏覽器統(tǒng)一原生視頻API（必要時對功能進行填充支持）
- 提供可擴展和可擴展的UI
- 確保鍵盤和屏幕閱讀器用戶的可訪問性
- 有一組核心插件，支持其他視頻格式：
后臺加密采用的是切片加密澜薄，我項目中用戶點播的時候拿到的是一個m3u8格式的視頻連接为肮，M3U8 是 Unicode 版本的M3U，用 UTF-8 編碼肤京。"M3U" 和 "M3U8" 文件都是蘋果公司使用的 HTTP Live Streaming（HLS） 協(xié)議格式的基礎(chǔ)颊艳，這種協(xié)議格式可以在 iPhone 和 Macbook 等設備播放。而 HLS是一個由蘋果公司提出的基于 HTTP 的流媒體網(wǎng)絡傳輸協(xié)議。
HLS 的工作原理是把整個流分成一個個小的基于 HTTP 的文件來下載籽暇，每次只下載一些温治。當媒體流正在播放時，客戶端可以選擇從許多不同的備用源中以不同的速率下載同樣的資源戒悠，允許流媒體會話適應不同的數(shù)據(jù)速率熬荆。在開始一個流媒體會話時，客戶端會下載一個包含元數(shù)據(jù)的 extended M3U (m3u8) playlist文件绸狐，用于尋找可用的媒體流卤恳。
HLS 只請求基本的 HTTP 報文，與實時傳輸協(xié)議（RTP）不同寒矿，HLS 可以穿過任何允許 HTTP 數(shù)據(jù)通過的防火墻或者代理服務器突琳。它也很容易使用內(nèi)容分發(fā)網(wǎng)絡來傳輸媒體流。簡而言之符相，HLS 是新一代流媒體傳輸協(xié)議拆融，其基本實現(xiàn)原理為將一個大的媒體文件進行分片，將該分片文件資源路徑記錄于 m3u8 文件（即 playlist）內(nèi)啊终，其中附帶一些額外描述（比如該資源的多帶寬信息···）用于提供給客戶端镜豹。客戶端依據(jù)該 m3u8 文件即可獲取對應的媒體資源蓝牲，進行播放趟脂。
我去，跑題了例衍，昔期，，說重點了佛玄。
cnpm install video.js -D
cnpm install videojs-contrib-hls --save
main.js中引入css
import hls from 'videojs-contrib-hls'
Vue.use(hls)
// 組件中引入video樣式
<video-player
@click.stop
class="video-player"
:playsinline="playsinline" //播放器的配置硼一，下面的方法，官方文檔中給出了對應的解釋
:options="playerOptions"
:headers="headers"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@loadeddata="onPlayerLoadeddata($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@ready="playerReadied"
@statechanged="playerStateChanged($event)"
>
</video-player>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
// js部分
export default {
name: 'index',
props: ['videoPath'],
data () {
return {
playsinline: true,
playerOptions: {
events: [],
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: true, // 如果true,瀏覽器準備好時開始回放翎嫡。
controls: true, // 控制條
preload: 'auto', // 視頻預加載
muted: false, // 默認情況下將會消除任何音頻欠动。
loop: false, // 導致視頻一結(jié)束就重新開始。
language: 'zh-CN',
controlBar: {
timeDivider: true,
durationDisplay: true
},
aspectRatio: '16:9', // 將播放器置于流暢模式惑申，并在計算播放器的動態(tài)大小時使用該值具伍。值應該代表一個比例 - 用冒號分隔的兩個數(shù)字（例如"16:9"或"4:3"）
fluid: true, // 當true時，Video.js player將擁有流體大小圈驼。換句話說人芽，它將按比例縮放以適應其容器。
sources: [{
type: 'application/x-mpegURL',
src: ''
}],
hls: true, // 啟用hls绩脆？
poster: '', // 你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: '此視頻暫無法播放萤厅，請稍后再試' // 允許覆蓋Video.js無法播放媒體源時顯示的默認信息橄抹。
},
}
},
created () {
let userInfo = localStorage.getItem('userInfo')
let token = JSON.parse(userInfo).accessToken
this.playerOptions.sources[0].src = this.videoPath
},
methods: {
// listen event
onPlayerPlay (player) {
console.log('player play!', player)
},
onPlayerPause (player) {
console.log('player pause!', player)
},
onPlayerEnded (player) {
console.log('player ended!', player)
},
onPlayerLoadeddata (player) {
console.log('player Loadeddata!', player)
},
onPlayerWaiting (player) {
console.log('player Waiting!', player)
},
onPlayerPlaying (player) {
console.log('player Playing!', player)
},
onPlayerTimeupdate (player) {
console.log('player Timeupdate!', player.currentTime())
},
onPlayerCanplay (player) {
console.log('player Canplay!', player)
},
onPlayerCanplaythrough (player) {
console.log('player Canplaythrough!', player)
},
playerStateChanged (playerCurrentState) {
console.log(playerCurrentState)
},
playerReadied (player) {
let _this = this
var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
player.tech_.hls.xhr.beforeRequest = function (options) {
console.log(options)
let userInfo = localStorage.getItem('userInfo')
let token = JSON.parse(userInfo).accessToken
options.headers = {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json;charset=UTF-8',
'Accept-Language': 'zh-CN,zh;q=0.9,hy;q=0.8,mn;q=0.7',
'Authorization': 'Bearer ' + token
}
return options
}
},
close () {
this.$emit('close')
}
}
}
let userInfo = localStorage.getItem('userInfo')
let token = JSON.parse(userInfo).accessToken
options.headers = {
'Accept': 'application/json, text/plain, /',
'Content-Type': 'application/json;charset=UTF-8',
'Accept-Language': 'zh-CN,zh;q=0.9,hy;q=0.8,mn;q=0.7',
'Authorization': 'Bearer ' + token
}
return options
重點在以上部分，因為當用戶點播的時候惕味，后臺需要對其進行鑒權(quán)楼誓。需要設置請求頭將用戶的token傳給后臺，查閱了好多博客名挥，沒有給出合理的配置疟羹，也有說修改源碼解決的，我也嘗試著改了源碼禀倔，都模塊化了榄融，好多東西找不到修改的位置。改的也是一團糟救湖，也嘗試了別的播放器愧杯，發(fā)現(xiàn)都沒有vue-video-player成熟。就在官網(wǎng)中又找了找鞋既。查閱好幾遍力九，就發(fā)現(xiàn)只有這塊能攔截到請求，但并沒有告訴怎么改涛救，扎心了畏邢。試了好幾種。最后這種形式的成功的把請求頭設置了检吆。希望能幫到正在觀看的你。
