這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 1、安裝 vue-video-player npm install vue-video-player --save npm install videojs-contrib-hls --save //播放直播 //在main.js中引入 / ...
這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助
1、安裝 vue-video-player
npm install vue-video-player --save npm install videojs-contrib-hls --save //播放直播 //在main.js中引入 // 引入播放器 import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' import 'videojs-contrib-hls' Vue.use(VideoPlayer)
2、頁面中使用
<div v-for="(item,index) in liveRomeList" class="live_video" > <video-player v-if="item.currentStatus === 'play'" class="video-player vjs-custom-skin" ref="videoPlayer" :id='`live${item.live_id}`' :playsinline="true" :options="item.plaplayerOptions" :key='item.live_id' /> <div class="operation"> <i v-if="item.currentStatus === 'pause'" class="el-icon-video-play live_icon" @click="playLive(item,index)" /> <i v-else class="el-icon-video-pause live_icon" @click="pauseLive(item)" /> </div> </div>
在data中定義一個video
export default { data(){ return { playerOptions: { playbackRates: [0.5, 1.0, 1.5, 2.0], // 可選的播放速度 autoplay: true, // 如果為true,瀏覽器準備好時開始回放。 muted: false, // 預設情況下將會消除任何音頻。 loop: false, // 是否視頻一結束就重新開始。 preload: 'auto', // 建議瀏覽器在<video>載入元素後是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始載入視頻(如果瀏覽器支持) language: 'zh-CN', aspectRatio: '16:9', // 將播放器置於流暢模式,併在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字(例如"16:9"或"4:3") fluid: true, // 當true時,Video.js player將擁有流體大小。換句話說,它將按比例縮放以適應其容器。 sources: [{ type: "application/x-mpegURL", // 類型 src: '' // url地址 }], poster: '', // 封面地址 notSupportedMessage: '此視頻暫無法播放,請稍後再試', // 允許覆蓋Video.js無法播放媒體源時顯示的預設信息。 controlBar: { timeDivider: true, // 當前時間和持續時間的分隔符 durationDisplay: true, // 顯示持續時間 remainingTimeDisplay: false, // 是否顯示剩餘時間功能 fullscreenToggle: true // 是否顯示全屏按鈕 } } } } } //在methods中定義方法 // 獲取直播列表 初始化數據 async getList (option = {}) { try { let _this = this const response = await _this.$apis.review.liveList(option) //請求介面 this.liveRomeList = response this.liveRomeList.forEach(item => { //添加播放器屬性參數 item['plaplayerOptions'] = this.playerOptions item['currentStatus'] = 'pause' //播放狀態 }) this.loading = false //console.log(this.liveRomeList) } catch (error) { this.loading = false console.log(error) this.$message.error(error.message) } }, // 開啟直播 async playLive (payload, index) { payload.currentStatus = 'play' if (this.isMobile) { this.$message.error('當前設備不支持直播流播放') return } if (!payload.live_id || payload.live_id === '') { this.$message.error('無法獲取當前直播流地址') return } this.getTransAddrSS(payload,index) }, //獲取直播推流地址 async getTransAddrSS (payload,index) { const result = await this.$apis.review.transCodeAddr({ live_id: payload.live_id }) //請求介面獲取直播地址 this.$nextTick(() => { const playerObj = { playbackRates: [0.5, 1.0, 1.5, 2.0], // 可選的播放速度 autoplay: true, // 如果為true,瀏覽器準備好時開始回放。 muted: false, // 預設情況下將會消除任何音頻。 loop: false, // 是否視頻一結束就重新開始。 language: "zh-CN", preload: 'auto', // 建議瀏覽器在<video>載入元素後是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始載入視頻(如果瀏覽器支持) aspectRatio: '16:9', // 將播放器置於流暢模式,併在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字(例如"16:9"或"4:3") fluid: true, // 當true時,Video.js player將擁有流體大小。換句話說,它將按比例縮放以適應其容器。 sources: [{ type: "application/x-mpegURL", // 類型 src: result.video_url // url地址 }], poster: "", //封面地址 notSupportedMessage: '此視頻暫無法播放,請稍後再試', // 允許覆蓋Video.js無法播放媒體源時顯示的預設信息。 controlBar: { timeDivider: true, //當前時間和持續時間的分隔符 durationDisplay: true, //顯示持續時間 remainingTimeDisplay: false, //是否顯示剩餘時間功能 fullscreenToggle: true, //全屏按鈕 } } payload.plaplayerOptions = playerObj //這裡使用$set強制賦值,避免出錯 this.$set(this.liveRomeList[index],this.liveRomeList[index].plaplayerOptions,playerObj) // console.log(this.liveRomeList, 'pppp') }) }, // 暫停直播 pauseLive (payload) { payload.playerObj = null payload.currentStatus = 'pause' this.liveRomeList = [...this.liveRomeList] //console.log(payload) },
也可直接寫個 播放組件 根據自己的需求引入應用
<template> <div class="video"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="playsinline" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @loadeddata="onPlayerLoadeddata($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @statechanged="playerStateChanged($event)" @ready="playerReadied"> </video-player> </div> </template> <script> import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css'; import 'videojs-contrib-hls' // 直播推流 import videojs from 'video.js' import { videoPlayer } from 'vue-video-player' export default { name: 'videoComponents', components: { videoPlayer }, props: { // 當前的options 配置 selfOptions: Object, // 播放速度 playbackRates: { type: Array, default: () => [0.7, 1.0, 1.5, 2.0] }, // 封面 poster: { type: String, // https://cz-video-photo.oss-cn-beijing.aliyuncs.com/20191108/aca6e6915d369e07db055127d3e3738c00001.jpg default: '' }, // 視頻無法播放時提示信息 notSupportedMessage: { type: String, default: '此視頻暫無法播放,請稍後再試!!!' }, // 視頻顯示比例 aspectRatio: { type: String, default: '16:9' }, // 語言設置 language: { type: String, default: 'zh-CN' }, // 設置controBar controlBar: { type: Object, default: ()=> ({ timeDivider: true, // 當前時間和持續時間的分隔符 durationDisplay: true, // 時長顯示 remainingTimeDisplay: false, // 剩下時間 currentTimeDisplay: true, // 當前時間 volumeControl: true, // 聲音控制鍵 playToggle: true, // 暫停和播放鍵 progressControl: true, // 進度條 fullscreenToggle: true // 全屏按鈕 }) }, // 數據源 sources: { type: Array, default: () => ( [{ type: "video/mp4", src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" }] ) }, // 是否迴圈播放 loop: Boolean, // 是否在不全屏狀態下外放聲音 muted: Boolean, // 是否瀏覽器 準備好後自動播放 autoplay: Boolean, // 是否直播 isLive: Boolean, }, data() { return { options: { playbackRates: this.playbackRates, // 播放速度 autoplay: this.autoplay, // 如果true,瀏覽器準備好時開始回放。 muted: this.muted, // 預設情況下將會消除任何音頻。--- 不全屏播放的時候是否禁止聲音外放 loop: this.loop, // 導致視頻一結束就重新開始。 preload: 'auto', // 建議瀏覽器在<video>載入元素後是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始載入視頻(如果瀏覽器支持) language: this.language, aspectRatio: this.aspectRatio, // 將播放器置於流暢模式,併在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字(例如"16:9"或"4:3") fluid: true, // 當true時,Video.js player將擁有流體大小。換句話說,它將按比例縮放以適應其容器。 sources: this.sources, poster: this.poster, // 你的封面地址 width: document.documentElement.clientWidth, // 播放器寬度 notSupportedMessage: this.notSupportedMessage, // 允許覆蓋Video.js無法播放媒體源時顯示的預設信息。 controlBar: this.controlBar, hls: true, }, // 記錄當前播放時間 nowPlayer: null, } }, computed: { // 當前播放對象實例 videoObj() { return this.$refs.videoPlayer.player }, // true表示預設情況下應嘗試內聯播放-false表示我們應使用瀏覽器的預設播放模式 playsinline(){ var ua = navigator.userAgent.toLocaleLowerCase(); if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) { return true }else{ return true } }, // vue-video-player playerOptions() { if(this.isLive) { return { playbackRates: [0.5, 1.0, 1.5, 2.0], //可選擇的播放速度 autoplay: false, //如果true,瀏覽器準備好時開始回放。 muted: false, // 預設情況下將會消除任何音頻。 loop: false, // 視頻一結束就重新開始。 preload: "auto", // 建議瀏覽器在<video>載入元素後是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始載入視頻(如果瀏覽器支持) language: "zh-CN", aspectRatio: "16:9", // 將播放器置於流暢模式,併在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字(例如"16:9"或"4:3") fluid: true, // 當true時,Video.js player將擁有流體大小。換句話說,它將按比例縮放以適應其容器。 sources: [ { type: 'application/x-mpegURL', // 這裡的種類支持很多種:基本視頻格式、直播、流媒體等 src: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8", //url地址 }, ], poster: "", //你的封面地址 // width: document.documentElement.clientWidth, notSupportedMessage: "此視頻暫無法播放,請稍後再試", //允許覆蓋Video.js無法播放媒體源時顯示的預設信息。 controlBar: { timeDivider: true, //當前時間和持續時間的分隔符 durationDisplay: true, //顯示持續時間 remainingTimeDisplay: false, //是否顯示剩餘時間功能 fullscreenToggle: true, //全屏按鈕 }, } }else { if(this.selfOptions) { Object.assign(this.options, this.selfOptions) return this.options }else { return this.options; } } }, }, watch: { }, mounted() { }, methods: { // 播放回調 onPlayerPlay(player) { // 播放 if(this.nowPlayer) { player.currentTime(this.nowPlayer) } }, // 暫停回調 onPlayerPause(player) { }, // 視頻播完回調 onPlayerEnded(player) { this.nowPlayer = null; }, // DOM元素上的readyState更改導致播放停止 onPlayerWaiting(player) { }, // 已開始播放回調 onPlayerPlaying(player) { }, // 當播放器在當前播放位置下載數據時觸發 onPlayerLoadeddata(player) { // 直播每次播放都會調用--錄播只是剛開始調用一次 }, // 當前播放位置發生變化時觸發。 onPlayerTimeupdate(player) { // 獲取到當前的播放時間 this.nowPlayer = player.currentTime(); }, //媒體的readyState為HAVE_FUTURE_DATA或更高 onPlayerCanplay(player) { }, //媒體的readyState為HAVE_ENOUGH_DATA或更高。這意味著可以在不緩衝的情況下播放整個媒體文件。 onPlayerCanplaythrough(player) { }, //播放狀態改變回調 playerStateChanged(playerCurrentState) { }, //將偵聽器綁定到組件的就緒狀態。與事件監聽器的不同之處在於,如果ready事件已經發生,它將立即觸發該函數。。 playerReadied(player) { } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> /* 播放按鈕換成圓形 */ ::v-deep .vjs-custom-skin > .video-js .vjs-big-play-button { height: 2em; width: 2em; line-height: 2em; border-radius: 1em; } </style>