現(xiàn)在直播太流行了，除了一些直播app，斗魚，抖音等，就連微信小程序都支持直播功能了
但是微信小程序的直播已經(jīng)由微信官方封裝了相對(duì)應(yīng)的api，前端可以直接調(diào)用
所以，如果現(xiàn)在有個(gè)需求 ，就在web或H5頁(yè)面通過(guò)js實(shí)現(xiàn)視頻直播
相信很多前端前端跟我一樣 ，對(duì)第一時(shí)間想到websocket的，通過(guò)心跳包之類的，但是今天推薦另外一種方式 - 插件（websocket基本使用 ， 后面文件再講）
我們公司目前使用vue來(lái)開發(fā)后臺(tái)管理系統(tǒng) ，現(xiàn)在有個(gè)需求 ，做實(shí)時(shí)監(jiān)控
后臺(tái)在 螢石云 上拿到監(jiān)控的視頻地址 ，格式是.m3u8
.m3u8
M3U8 是 Unicode 版本的 M3U，用 UTF-8 編碼。"M3U" 和 "M3U8" 文件都是蘋果公司使用的 HTTP Live Streaming（HLS） 協(xié)議格式的基礎(chǔ)，這種協(xié)議格式可以在 iPhone 和 Macbook 等設(shè)備播放
結(jié)果復(fù)制地址后，發(fā)現(xiàn)在web上直接下載了，然后就開始慢慢找尋方法...
最終是用vue-video-player這個(gè)插件解決了
1.下載vue-video-player
npm install vue-video-player --save
npm install videojs-contrib-hls --save
- 引入
main.ts
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
// 這個(gè)是為了兼容 m3u8
const hls = require('videojs-contrib-hls')
Vue.use(hls)
單頁(yè)面
import { videoPlayer } from 'vue-video-player' // video 插件
// import 'videojs-contrib-hls' // 引入hls
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
// import '../index.scss'
@Component({
components: {
videoPlayer
}
})
- 組件
<video-player
ref="videoPlayer"
class="video-player vjs-custom-skin"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"http://監(jiān)聽開始狀態(tài)
@pause="onPlayerPause($event)"http://監(jiān)聽暫停狀態(tài)
/>
4.在頁(yè)面中data中配置
playerOptions = {
// playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, // 如果true,瀏覽器準(zhǔn)備好時(shí)開始回放。
muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。
loop: false, // 導(dǎo)致視頻一結(jié)束就重新開始。
preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 將播放器置于流暢模式，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）
fluid: true, // 當(dāng)true時(shí)，Video.js player將擁有流體大小。換句話說(shuō)，它將按比例縮放以適應(yīng)其容器。
sources: [
{
type: 'application/x-mpegURL', // 這里的種類支持很多種：基本視頻格式、直播、流媒體等，具體可以參看git網(wǎng)址項(xiàng)目
src: 'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8' // url地址
}
],
hls: true,
poster: 'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg', // 你的封面地址
width: document.documentElement.clientWidth, // 播放器寬度
notSupportedMessage: '此視頻暫無(wú)法播放，請(qǐng)稍后再試', // 允許覆蓋Video.js無(wú)法播放媒體源時(shí)顯示的默認(rèn)信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true // 全屏按鈕
}
},
5.掛載視頻組件（非必須）不寫這一步也可以實(shí)現(xiàn)播放，添加這個(gè)是為了自定義按鈕使用
get player() {
return this.$refs.videoPlayer.player//自定義播放
}
6.官方文檔
video.js
vue-video-player
這樣就可以完美解決了~~~
