項(xiàng)目進(jìn)行時(shí), 對視頻模塊需要進(jìn)行組件開發(fā)，結(jié)合當(dāng)前使用的開發(fā)框架是vuecli。 于是尋找到vue-video-player 根據(jù)github上的文檔進(jìn)行開發(fā)，發(fā)現(xiàn)并不能實(shí)現(xiàn)播放功能，于是在網(wǎng)站上進(jìn)行尋找發(fā)現(xiàn)，vue-video-player依賴于videojs

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

2、當(dāng)前版本：

"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'; // 根據(jù)官方文檔配置發(fā)現(xiàn)沒有效果 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、注意點(diǎn)

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

5、vue-video-player 組件 根據(jù)自己的需求進(jìn)行開發(fā)即可

<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: {// 當(dāng)前的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: ''},// 視頻無法播放時(shí)提示信息notSupportedMessage: {type: String,default: '此視頻暫無法播放，請稍后再試!!!'},// 視頻顯示比例aspectRatio: {type: String,default: '16:9'},// 語言設(shè)置language: {type: String,default: 'zh-CN'},// 設(shè)置controBar controlBar: {type: Object,default: ()=> ({timeDivider: true, // 當(dāng)前時(shí)間和持續(xù)時(shí)間的分隔符durationDisplay: true, // 時(shí)長顯示remainingTimeDisplay: false, // 剩下時(shí)間currentTimeDisplay: true, // 當(dāng)前時(shí)間volumeControl: true, // 聲音控制鍵playToggle: true, // 暫停和播放鍵progressControl: true, // 進(jìn)度條fullscreenToggle: true // 全屏按鈕})},// 數(shù)據(jù)源sources: {type: Array,default: () => ([{type: "video/mp4",src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"}])},// 是否循環(huán)播放loop: Boolean,// 是否在不全屏狀態(tài)下外放聲音muted: Boolean,// 是否瀏覽器 準(zhǔn)備好后自動(dòng)播放autoplay: Boolean,// 是否直播isLive: Boolean,},data() {return {options: {playbackRates: this.playbackRates, // 播放速度autoplay: this.autoplay, // 如果true,瀏覽器準(zhǔn)備好時(shí)開始回放。muted: this.muted, // 默認(rèn)情況下將會(huì)消除任何音頻。--- 不全屏播放的時(shí)候是否禁止聲音外放loop: this.loop, // 導(dǎo)致視頻一結(jié)束就重新開始。preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）language: this.language,aspectRatio: this.aspectRatio, // 將播放器置于流暢模式，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）fluid: true, // 當(dāng)true時(shí)，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應(yīng)其容器。sources: this.sources,poster: this.poster, // 你的封面地址width: document.documentElement.clientWidth, // 播放器寬度notSupportedMessage: this.notSupportedMessage, // 允許覆蓋Video.js無法播放媒體源時(shí)顯示的默認(rèn)信息。controlBar: this.controlBar,hls: true,},// 記錄當(dāng)前播放時(shí)間nowPlayer: null,}},computed: {// 當(dāng)前播放對象實(shí)例videoObj() {return this.$refs.videoPlayer.player},// true表示默認(rèn)情況下應(yīng)嘗試內(nèi)聯(lián)播放-false表示我們應(yīng)使用瀏覽器的默認(rèn)播放模式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,瀏覽器準(zhǔn)備好時(shí)開始回放。muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。loop: false, // 視頻一結(jié)束就重新開始。preload: "auto", // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）language: "zh-CN",aspectRatio: "16:9", // 將播放器置于流暢模式，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）fluid: true, // 當(dāng)true時(shí)，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應(yīng)其容器。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無法播放媒體源時(shí)顯示的默認(rèn)信息。controlBar: {timeDivider: true, //當(dāng)前時(shí)間和持續(xù)時(shí)間的分隔符durationDisplay: true, //顯示持續(xù)時(shí)間remainingTimeDisplay: false, //是否顯示剩余時(shí)間功能fullscreenToggle: true, //全屏按鈕},}}else {if(this.selfOptions) {Object.assign(this.options, this.selfOptions)return this.options}else {return this.options;}}},},watch: {},mounted() { },methods: {// 播放回調(diào)onPlayerPlay(player) {// 播放if(this.nowPlayer) {player.currentTime(this.nowPlayer)}},// 暫停回調(diào)onPlayerPause(player) {},// 視頻播完回調(diào)onPlayerEnded(player) {this.nowPlayer = null;},// DOM元素上的readyState更改導(dǎo)致播放停止onPlayerWaiting(player) {},// 已開始播放回調(diào)onPlayerPlaying(player) {},// 當(dāng)播放器在當(dāng)前播放位置下載數(shù)據(jù)時(shí)觸發(fā)onPlayerLoadeddata(player) { // 直播每次播放都會(huì)調(diào)用--錄播只是剛開始調(diào)用一次 },// 當(dāng)前播放位置發(fā)生變化時(shí)觸發(fā)。onPlayerTimeupdate(player) {// 獲取到當(dāng)前的播放時(shí)間this.nowPlayer = player.currentTime();},//媒體的readyState為HAVE_FUTURE_DATA或更高onPlayerCanplay(player) {},//媒體的readyState為HAVE_ENOUGH_DATA或更高。這意味著可以在不緩沖的情況下播放整個(gè)媒體文件。onPlayerCanplaythrough(player) {},//播放狀態(tài)改變回調(diào)playerStateChanged(playerCurrentState) {},//將偵聽器綁定到組件的就緒狀態(tài)。與事件監(jiān)聽器的不同之處在于，如果ready事件已經(jīng)發(fā)生，它將立即觸發(fā)該函數(shù)。。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>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。