項目進行時, 對視頻模塊需要進行組件開發，結合當前使用的開發框架是vuecli。 于是尋找到vue-video-player 根據github上的文檔進行開發，發現并不能實現播放功能，于是在網站上進行尋找發現，vue-video-player依賴于videojs

1、安裝：
npm install vue-video-player --save
推流/m3u8 需要：npm install --save videojs-contrib-hls

2、當前版本：

"vue": "^2.6.11","vue-video-player": "^5.0.2","videojs-contrib-hls": "^5.15.0",

3、vue-video-player 官方文檔：

<template><!-- video-player-box ==> video-player vjs-custom-skin --><video-player class="video-player vjs-custom-skin"ref="videoPlayer":options="playerOptions":playsinline="true"></video-player> </template><script> // 需要添加的配置 // videojs -- videoPlayer 核心 import videojs from 'video.js' import 'vue-video-player/src/custom-theme.css'; // 根據官方文檔配置發現沒有效果 import 'video.js/dist/video-js.css' import { videoPlayer } from 'vue-video-player' export default {components: {videoPlayer},data() {return {playerOptions: {// videojs optionsmuted: true,language: 'en',playbackRates: [0.7, 1.0, 1.5, 2.0],sources: [{type: "video/mp4",src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"}],poster: "/static/images/author.jpg",}}} }... </script>

4、注意點

1、video-player標簽的class必須設置成“video-player vjs-custom-skin”，你引入的樣式才能起作用。我剛開始做時，直接拷貝的github頁的代碼，那個代碼的class是video-player-box。
2、vue-video-player 是根據 videojs 進行了封裝 所以必須導入video.js (video.js 已經被vue-video-player安裝不需要重新安裝 直接導入即可)
3、vue-video-player 安裝完 可以在node_modules中查看 部分視頻播放插件

5、vue-video-player 組件 根據自己的需求進行開發即可

<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.jpgdefault: ''},// 視頻無法播放時提示信息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-playerplayerOptions() {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> /* 播放按鈕換成圓形 */ /deep/.vjs-custom-skin > .video-js .vjs-big-play-button {height: 2em;width: 2em;line-height: 2em;border-radius: 1em; } </style>

總結

以上是生活随笔為你收集整理的vue-video-player 一款vue的前端视频播放插件 支持m3u8的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。