測試直播鏈接?https://live.cgtn.com/1000/prog_index.m3u8
一搪哪、安裝插件
播放HLS視頻流需要安裝 videojs-contrib-hls插件颜阐，播放RTMP視頻流則安裝 videojs-flash插件，hls插件與flash插件同時使用時flash插件需要在hls插件之前引入; (有時安裝we-video-plaver無法自動安裝hls插件庄呈，還需自己手動安裝）
安裝方式一：在html文件頭部引入
<link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/>
<script type="text/javascript" src="path/to/video.min.js"></script>?
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-video-player.js">
安裝方式二：npm安裝
npm install vue-video-player --save
?npm install videojs-contrib-hls --save
main.js中引入基礎(chǔ)樣式文件:?
// 引入videoPlayer樣式?
import 'video.js/dist/video-js.css'?
按需引入：
?import 'videojs-contrib-hls'
?import { videoPlayer } from 'vue-video-player'?
components: { videoPlayer },
?全局引入:?
import Vue from 'vue'?
import VueVideoPlayer from 'vue-video-player'?
// 自定義樣式引入，在<video-player>添加對應(yīng)類名，例如video-player-custom?
// import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer, /* { options: 全局默認配置, events: 全局videojs事件 }*/)?
二、使用插件
<template>
? <!-- playsinline：設(shè)置播放器在移動設(shè)備上不全屏[ Boolean, default: false ] -->
? <!-- customEventName：自定義狀態(tài)變更時的事件名[ String, default: 'statechanged' ] -->
? ? <video-player
class="video-player-custom"
? ? ? ? ref="videoPlayer"
? ? ? ? :options="playerOptions"
? ? ? ? :playsinline="true"
? ? ? ? customEventName="customstatechangedeventname"
? ? ? ? @play="onPlayerPlay"
? ? ? ? @pause="onPlayerPause"
? ? ? ? @ended="onPlayerEnded"
? ? ? ? @ready="playerReadied"
? ? ? ? @statechanged="playerStateChanged"
? ? ? ? @playing="onPlayerPlaying"
? ? ? ? @waiting="onPlayerWaiting"
? ? ? ? @loadeddata="onPlayerLoadeddata"
? ? ? ? @timeupdate="timeupdate"
? ? ? ? @canplay="onPlayerCanplay"
? ? ? ? @canplaythrough="onPlayerCanplaythrough">
? ? </video-player>
</template>
<script>
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'
export default {
? components: {
? ? ? ? videoPlayer
? ? },
data() {
return {
playerOptions: {
// 是否靜音
? ? ? ? ? ? ? ? ? muted: true,
? ? ? ? ? ? ? ? ? // 默認為英語肚菠，設(shè)置為中文
? ? ? ? ? ? ? ? ? language: 'zh-CN',
? ? ? ? ? ? ? ? ? // 播放速度，指定后Video.js將顯示一個控件(vjs-playback-rate類的控件)罩缴，允許用戶選擇播放速度
? ? ? ? ? ? ? ? ? playbackRates: [0.5, 1.0, 1.5, 2.0],
? ? ? ? ? ? ? ? ? // 將播放器置于流暢模式蚊逢，并在計算播放器的動態(tài)大小時使用該值层扶，表示長寬比例
? ? ? ? ? ? ? ? ? aspectRatio: '4:3',
? ? ? ? // 兼容順序，默認值是['html5']烙荷，其他已注冊的技術(shù)將按其注冊的順序在該技術(shù)之后添加镜会。
? ? ? ? ? ? ? ? ? techOrder: ['html5'],
? ? ? ? ? ? ? ? ? // 等同于原生<video>標簽中的一組<source>子標簽，可實現(xiàn)優(yōu)雅降級终抽；type 屬性規(guī)定媒體資源的 MIME 類型
? ? ? ? ? ? ? ? ? sources: [
? ? ? ? ? ? ? ? ? ? ? ? //{
? ? ? ? ? ? ? ? ? ? //type: "video/mp4",
? ? ? ? ? ? ? ? ? ? //src: ""
? ? ? ? ? ? ? ? ? //},
? ? ? ? ? ? ? ? ? ? ? ? //{
? ? ? ? ? ? ? ? ? ? //type: "rtmp/flv",
? ? ? ? ? ? ? ? ? ? //src: ""
? ? ? ? ? ? ? ? ? //},
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? type: "application/x-mpegURL",
? ? ? ? ? ? ? ? ? ? src: "https://live.cgtn.com/1000/prog_index.m3u8"
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? // 視頻封面
? ? ? ? ? ? ? ? ? poster: require('./icon/cover.jpg'),
}
}
},
computed: {
? ? //插件節(jié)點 用于添加自定義按鈕事件
player() {
return this.$refs.videoPlayer.player
}
},
? ? mounted() {},
? ? methods: {
? ? ? ? // 播放回調(diào)
? ? ? ? onPlayerPlay(player) {
? ? ? ? },
? ? ? ? // 暫痛帘恚回調(diào)
? ? ? ? onPlayerPause(player) {
? ? ? ? ? //console.log(player)
? ? ? ? },
? ? ? ? // 視頻播放結(jié)束回調(diào)
? ? ? ? onPlayerEnded(player) {
? ? ? ? ? //console.log(player)
? ? ? ? },
? ? ? ? // DOM元素上的readyState更改導(dǎo)致播放停止
? ? ? ? onPlayerWaiting(player) {
? ? ? ? ? //console.log(player)
? ? ? ? },
? ? ? ? // 已開始播放回調(diào)
? ? ? ? onPlayerPlaying(player) {
? ? ? ? ? //console.log(player)
? ? ? ? },
? ? ? ? // 當(dāng)播放器在當(dāng)前播放位置下載數(shù)據(jù)時觸發(fā)
? ? ? ? onPlayerLoadeddata($event) {
? ? ? ? ? //console.log($event)
? ? ? ? },
? ? ? ? // 當(dāng)前播放位置發(fā)生變化時觸發(fā)。
? ? ? ? onPlayerTimeupdate($event) {
? ? ? ? ? //console.log($event)
? ? ? ? },
? ? ? ? //媒體的readyState為HAVE_FUTURE_DATA或更高
? ? ? ? onPlayerCanplay($event) {
? ? ? ? ? //console.log($event)
? ? ? ? },
? ? ? ? //媒體的readyState為HAVE_ENOUGH_DATA或更高昼伴。這意味著可以在不緩沖的情況下播放整個媒體文件匾旭。
? ? ? ? onPlayerCanplaythrough($event) {
? ? ? ? ? //console.log($event)
? ? ? ? },
? ? ? ? //播放狀態(tài)改變回調(diào)
? ? ? ? playerStateChanged($event) {
? ? ? ? ? //console.log($event)
? ? ? ? },
? ? ? ? //將偵聽器綁定到組件的就緒狀態(tài)。與事件監(jiān)聽器的不同之處在于圃郊，如果ready事件已經(jīng)發(fā)生价涝，它將立即觸發(fā)該函數(shù)。持舆。
? ? ? ? playerReadied($event) {
? ? ? ? ? //console.log($event)
? ? ? ? },
? ? }
}
</script>
<style lang="scss" scoped>
.video-player-custom{
? ? width: 100%;
? ? height: 180px;
? ? // vidoeUI重寫
? ? /deep/ .video-js{
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? padding: 0;
? ? ? ? overflow: hidden;
? ? ? ? // 播放器
? ? ? ? .vjs-tech{
? ? ? ? object-fit: cover;
? ? ? ? }
? ? ? ? // 播放按鈕
? ? ? ? .vjs-big-play-button {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? width: 2em;
? ? ? ? ? ? height: 2em;
? ? ? ? ? ? margin-top: -1em;
? ? ? ? ? ? margin-left: -1em;
? ? ? ? ? ? font-size: 2em;
? ? ? ? ? ? line-height: 2em;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? background-color: rgba(0,0,0,0.45);
? ? ? ? ? ? outline: none;
? ? ? ? }
? ? ? ? // 封面
? ? ? ? .vjs-poster{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? background-size: cover;
? ? ? ? }
? ? }
}?
</style>
