安裝

npm install xgplayer --save npm install --save xgplayer-flv.js

引入

import FlvJsPlayer from 'xgplayer-flv.js';import Player from 'xgplayer';

使用

<div class="video" v-show="isPlay" :id="camDOMid" ref="video"></div> isPlay: false, player: null, // 設置視頻配置(注意：initPlayer應放在異步函數里或mounted之后，不可在created里直接加載，否則不生效) initPlayer(url) {console.log("this.camDOMid", this.camDOMid);var player = document.getElementById(this.camDOMid);this.isPlay = true;this.player = new FlvJsPlayer({id: this.camDOMid,url: url,fitVideoSize: 'auto',hasStart: true,autoplay: true, //自動播放，設置自動播放必要參數autoplayMuted: true, //自動播放靜音，設置自動播放參數必要參數volume: 0,defaultMuted: true,isLive: true,playsinline: false,screenShot: true,fluid: true,aspectRatio: '16:9',whitelist: [''],ignores: ['time'],closeVideoClick: true,// errorTips: '<span class="app-error">無視頻源</span>',customConfig: {isClickPlayBack: false},flvOptionalConfig: {enableWorker: true,enableStashBuffer: true, //啟用緩存stashInitialSize: 4096, //緩存大小4mlazyLoad: false,lazyLoadMaxDuration: 40 * 60,autoCleanupSourceBuffer: true,autoCleanupMaxBackwardDuration: 35 * 60,autoCleanupMinBackwardDuration: 30 * 60} //flv.js可選配置項 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)});console.log("this.player", this.player);this.player.once('complete', () => {console.log('complete')try {this.player.play() // 嘗試再次執行播放setTimeout(() => { // 500毫秒收檢測if (!this.player.hasStart && this.player.currentTime ===0) { // hasStart返回false，并且播放時間還是0，那么就可以認為自動播放失效了isAutoPlay = false;}}, 500)} catch (e) {console.log(e);}}) },

封裝為組件

這里我命名為CameraItem5（因為我試過幾個插件）

<!--xgplayer --> <template><div class="cam" v-if="mainCamUrl != ''"><div class="video" v-show="isPlay" :id="camDOMid" ref="video"></div></div> </template> <script>import FlvJsPlayer from 'xgplayer-flv.js';import Player from 'xgplayer';export default {name: "CameraItem5",components: {},props: ['mainCamUrl', 'camDOMid'],data() {return {isPlay: false,player: null,}},computed: {},created() {},mounted() {this.getData();},methods: {// 設置視頻配置(注意：initPlayer應放在異步函數里或mounted之后，不可在created里直接加載，否則不生效)initPlayer(url) {console.log("this.camDOMid", this.camDOMid);var player = document.getElementById(this.camDOMid);this.isPlay = true;this.player = new FlvJsPlayer({id: this.camDOMid,url: url,fitVideoSize: 'auto',hasStart: true,autoplay: true, //自動播放，設置自動播放必要參數autoplayMuted: true, //自動播放靜音，設置自動播放參數必要參數volume: 0,defaultMuted: true,isLive: true,playsinline: false,screenShot: true,fluid: true,aspectRatio: '16:9',whitelist: [''],ignores: ['time'],closeVideoClick: true,// errorTips: '<span class="app-error">無視頻源</span>',customConfig: {isClickPlayBack: false},flvOptionalConfig: {enableWorker: true,enableStashBuffer: true, //啟用緩存stashInitialSize: 4096, //緩存大小4mlazyLoad: false,lazyLoadMaxDuration: 40 * 60,autoCleanupSourceBuffer: true,autoCleanupMaxBackwardDuration: 35 * 60,autoCleanupMinBackwardDuration: 30 * 60} //flv.js可選配置項 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)});console.log("this.player", this.player);this.player.once('complete', () => {console.log('complete')//以下這段我沒成功。try {this.player.play() // 嘗試再次執行播放setTimeout(() => { // 500毫秒后檢測if (!this.player.hasStart && this.player.currentTime ===0) { // hasStart返回false，并且播放時間還是0，那么就可以認為自動播放失效了isAutoPlay = false;}}, 500)} catch (e) {console.log(e);}})},getData() {let playUrl = this.mainCamUrl, //播放地址this.initPlayer(playUrl)},},beforeDestroy() {if (this.player) {this.player.destroy();}console.log('銷毀了');},} </script> <style lang='scss' scoped> </style> <style lang='scss'>.cam {position: relative;}.video {width: 100%;height: 100%;} </style>

頁面上引入

import CameraItem from '@/components/CameraItem5'; //xgplayer.js export default {components: {CameraItem,}, }

使用

<CameraItem :mainCamUrl="mainCamUrl" camDOMid="camera1"></CameraItem>

總結

以上是生活随笔為你收集整理的西瓜播放器xgplayer的简单使用demo的全部內容，希望文章能夠幫你解決所遇到的問題。

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