第一步：npm ixgplayer,

在組件中引入：

  1 <template>
  2   <div class="player">
  3     <div class="imgBox" v-if="posterShow">
  4       <!-- <img src="../assets/move2.png" alt=""> -->
  5       <i class="icon_player" @click="playerCom()"></i>
  6       </div>
  7     <div v-show="!posterShow" id="mse">
  8 
  9     </div>
 10   </div>
 11 </template>
 12 <script>
 13 import Player from 'xgplayer';
 14 export default {
 15   data(){
 16     return{
 17       player:null,
 18        posterShow:true,
 19        url: 'http://211.94.219.1/268769823.mp4',
 20     }
 21   },
 22   mounted(){
 23     if(document.getElementById('mse')){
 24    this.player=new Player({
 25   el: document.getElementById('mse'),
 26    height:300,
 27   url: 'http://211.943/268769823.mp4',
 28    fluid: true,//設(shè)置為流式布局，可使播放器寬度跟隨父元素的寬度大小變化
 29     volume: 0.6,//開發(fā)者可以為播放器預(yù)設(shè)音量大小 參考值0~1
 30     autoplay:false,//是否自動(dòng)播放,
 31     muted:true,
 32     autoplayMuted: true,
 33      loop: true,//是否循環(huán)播放
 34      poster:'../assets/move2.png',
 35       playbackRate: [0.5, 0.75, 1, 1.5, 2],
 36      defaultPlaybackRate: 1,
 37      lastPlayTime: 70, //視頻起播時(shí)間（單位：秒）
 38      lastPlayTimeHideDelay: 3, //提示文字展示時(shí)長(zhǎng)（單位：秒）
 39       rotate: {   //視頻旋轉(zhuǎn)按鈕配置項(xiàng)
 40         innerRotate: true, //只旋轉(zhuǎn)內(nèi)部video
 41         clockwise: false // 旋轉(zhuǎn)方向是否為順時(shí)針
 42     },
 43       playNext: {
 44         urlList: [
 45           'http://211.88//8898.MP4',
 46           'http://211.88//8898.MP',
 47           'http://211.88//8898.MP4'
 48         ],
 49     },
 50      download: true, //設(shè)置download控件顯示
 51       danmu: {
 52     comments: [  //彈幕數(shù)組
 53       {
 54         duration: 15000, //彈幕持續(xù)顯示時(shí)間,毫秒(最低為5000毫秒)
 55         id: '1', //彈幕id，需唯一
 56         start: 3000, //彈幕出現(xiàn)時(shí)間，毫秒
 57         prior: true, //該條彈幕優(yōu)先顯示，默認(rèn)false
 58         color: true, //該條彈幕為彩色彈幕，默認(rèn)false
 59         txt: '長(zhǎng)彈幕長(zhǎng)彈幕長(zhǎng)彈幕長(zhǎng)彈幕長(zhǎng)彈幕長(zhǎng)彈幕長(zhǎng)彈幕長(zhǎng)彈幕長(zhǎng)彈幕長(zhǎng)彈幕', //彈幕文字內(nèi)容
 60         style: {  //彈幕自定義樣式
 61           color: '#ff9500',
 62           fontSize: '20px',
 63           border: 'solid 1px #ff9500',
 64           borderRadius: '50px',
 65           padding: '5px 11px',
 66           backgroundColor: 'rgba(255, 255, 255, 0.1)'
 67         },
 68         mode: 'top',//顯示模式，top頂部居中，bottom底部居中，scroll滾動(dòng)，默認(rèn)為scroll
 69       
 70       }
 71     ],
 72      panel: true, //彈幕面板
 73     area: {  //彈幕顯示區(qū)域
 74       start: 0, //區(qū)域頂部到播放器頂部所占播放器高度的比例
 75       end: 1 //區(qū)域底部到播放器頂部所占播放器高度的比例
 76     },
 77     closeDefaultBtn: false, //開啟此項(xiàng)后不使用默認(rèn)提供的彈幕開關(guān)，默認(rèn)使用西瓜播放器提供的開關(guān)
 78     defaultOff: false //開啟此項(xiàng)后彈幕不會(huì)初始化，默認(rèn)初始化彈幕
 79   },
 80   // 標(biāo)記點(diǎn)所對(duì)應(yīng)的播放時(shí)間
 81    progressDot: [
 82     {
 83       time: 2000, //展示標(biāo)記的時(shí)間
 84       text: '他死了', //鼠標(biāo)hover在標(biāo)記時(shí)展示的文字
 85       // duration: 8, //標(biāo)記段長(zhǎng)度（以時(shí)長(zhǎng)計(jì)算）
 86       style: { //標(biāo)記樣式
 87         background: 'red'
 88       }
 89     }, {
 90       time: 1500,
 91       text: '他才是兇手？'
 92     }, {
 93       time: 2600,
 94         text: '又是誰(shuí)殺了她？',
 95       // duration: 8,
 96     }, {
 97       time: 3800,
 98         text: '怎么回事？',
 99         //  duration: 8,
100     }
101   ]
102 });
103     }
104     
105   },
106   methods:{
107     playerCom:function(){
108       this.posterShow=false;
109       // this.player.play()
110       // this.player.start(this.url)
111     }
112   }
113 }
114 </script>
115 <style scoped>
116 .player{
117   position: relative;
118    height: 100%;
119    100%;
120 }
121 .icon_player{
122   position: absolute;
123   display: inline-block;
124   z-index: 999;
125   background-image:url('../assets/btn_play_5g.png');
126   height: 67px;
127    163px;
128   top: 0;
129   left: 0;
130   right: 0;
131   bottom: 0;
132   margin: auto;
133 }
134 .imgBox{
135    position: absolute;
136   height: 100%;
137    100%;
138   background: url(../assets/move2.png) no-repeat 100% 100%;
139 }
140 img{
141    height: 100%;
142    100%;
143 }
144 </style>

注意：一定不能在data或者created中里給player=new Player({}），這樣最后視頻播放器不會(huì)生效。

總結(jié)

以上是生活随笔為你收集整理的在vue中使用西瓜视频播放器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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