一、簡介：
1冰啃、m3u8文件是指UTF-8編碼格式的M3U文件，是記錄了小段視頻的索引記錄，通過這些索引記錄阎毅，就能獲取到對應(yīng)的視頻焚刚。
參考資料： https://zhuanlan.zhihu.com/p/346683119
二、vue項目播放rtmp净薛、hls (m3u8) 視頻
1汪榔、安裝播放庫
選用video.js 作為視頻播放庫，如果要支持hls m3u8 還需要videojs-contrib-hls組件的支持：
# 安裝Video.js
npm install video.js --save
# 安裝videojs-contrib-hls
npm install --save videojs-contrib-hls
2肃拜、在main.js 引用庫文件
import 'videojs-contrib-hls'
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
const hls = require('videojs-contrib-hls')
Vue.use(hls)
Vue.use(VideoPlayer)
創(chuàng)建一個vue的播放視頻頁面
<template>
<div class="video">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@ready="playerReadied"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"/>
</div>
</template>
<script>
export default {
name: "VideoPlayer",
data() {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
techOrder: ['html5'], // 兼容順序
autoplay: true, //如果true,瀏覽器準(zhǔn)備好時開始回放痴腌。
controls: true, //控制條
preload: 'auto', //視頻預(yù)加載
muted: false, //默認(rèn)情況下將會消除任何音頻。
loop: false, //導(dǎo)致視頻一結(jié)束就重新開始燃领。
language: 'zh-CN',
aspectRatio: '16:9', // 將播放器置于流暢模式士聪，并在計算播放器的動態(tài)大小時使用該值。值應(yīng)該代表一個比例 - 用冒號分隔的兩個數(shù)字（例如"16:9"或"4:3"）
fluid: true, // 當(dāng)true時猛蔽，Video.js player將擁有流體大小剥悟。換句話說，它將按比例縮放以適應(yīng)其容器曼库。
sourceOrder: true, //
html5: { hls: { withCredentials: false } },
sources: [{
withCredentials: false,
type: 'application/x-mpegURL',
src: 'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'
}],
hls: true,
poster: '', //你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: '此視頻暫無法播放区岗，請稍后再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認(rèn)信息。
// controlBar: {
// timeDivider: true,
// durationDisplay: true,
// remainingTimeDisplay: false,
// fullscreenToggle: true // 全屏按鈕
// }
}
}
},
computed() {
player() {
return this.$refs.videoPlayer.player
}
},
methods: {
}
}
</script>
到這里就可以正常播放了毁枯。
如果有問題可以參考git官方給的demo慈缔。
參考資料：
https://savokiss.com/tech/web-live-tech-with-vue.html
https://github.surmon.me/vue-video-player/（有案例demo）
