現(xiàn)在直播太流行了钾恢，除了一些直播app，斗魚鸳址，抖音等瘩蚪，就連微信小程序都支持直播功能了
但是微信小程序的直播已經(jīng)由微信官方封裝了相對應(yīng)的api，前端可以直接調(diào)用
所以稿黍，如果現(xiàn)在有個需求 疹瘦，就在web或H5頁面通過js實現(xiàn)視頻直播
相信很多前端前端跟我一樣 ，對第一時間想到websocket的巡球，通過心跳包之類的言沐，但是今天推薦另外一種方式 - 插件（websocket基本使用 ， 后面文件再講）
我們公司目前使用vue來開發(fā)后臺管理系統(tǒng) 辕漂，現(xiàn)在有個需求 呢灶，做實時監(jiān)控
后臺在 螢石云 上拿到監(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這個插件解決了
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)
// 這個是為了兼容 m3u8
const hls = require('videojs-contrib-hls')
Vue.use(hls)
單頁面
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.在頁面中data中配置
playerOptions = {
// playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, // 如果true,瀏覽器準(zhǔn)備好時開始回放鸟悴。
muted: false, // 默認(rèn)情況下將會消除任何音頻陈辱。
loop: false, // 導(dǎo)致視頻一結(jié)束就重新開始。
preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)细诸。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
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)其容器。
sources: [
{
type: 'application/x-mpegURL', // 這里的種類支持很多種：基本視頻格式媚送、直播中燥、流媒體等，具體可以參看git網(wǎ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: '此視頻暫無法播放塘偎，請稍后再試', // 允許覆蓋Video.js無法播放媒體源時顯示的默認(rèn)信息疗涉。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true // 全屏按鈕
}
},
5.掛載視頻組件（非必須）不寫這一步也可以實現(xiàn)播放，添加這個是為了自定義按鈕使用
get player() {
return this.$refs.videoPlayer.player//自定義播放
}
6.官方文檔
video.js
vue-video-player
這樣就可以完美解決了~~~
