第一步：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,//設置為流式布局，可使播放器寬度跟隨父元素的寬度大小變化
 29     volume: 0.6,//開發者可以為播放器預設音量大小 參考值0~1
 30     autoplay:false,//是否自動播放,
 31     muted:true,
 32     autoplayMuted: true,
 33      loop: true,//是否循環播放
 34      poster:'../assets/move2.png',
 35       playbackRate: [0.5, 0.75, 1, 1.5, 2],
 36      defaultPlaybackRate: 1,
 37      lastPlayTime: 70, //視頻起播時間（單位：秒）
 38      lastPlayTimeHideDelay: 3, //提示文字展示時長（單位：秒）
 39       rotate: {   //視頻旋轉按鈕配置項
 40         innerRotate: true, //只旋轉內部video
 41         clockwise: false // 旋轉方向是否為順時針
 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, //設置download控件顯示
 51       danmu: {
 52     comments: [  //彈幕數組
 53       {
 54         duration: 15000, //彈幕持續顯示時間,毫秒(最低為5000毫秒)
 55         id: '1', //彈幕id，需唯一
 56         start: 3000, //彈幕出現時間，毫秒
 57         prior: true, //該條彈幕優先顯示，默認false
 58         color: true, //該條彈幕為彩色彈幕，默認false
 59         txt: '長彈幕長彈幕長彈幕長彈幕長彈幕長彈幕長彈幕長彈幕長彈幕長彈幕', //彈幕文字內容
 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滾動，默認為scroll
 69       
 70       }
 71     ],
 72      panel: true, //彈幕面板
 73     area: {  //彈幕顯示區域
 74       start: 0, //區域頂部到播放器頂部所占播放器高度的比例
 75       end: 1 //區域底部到播放器頂部所占播放器高度的比例
 76     },
 77     closeDefaultBtn: false, //開啟此項后不使用默認提供的彈幕開關，默認使用西瓜播放器提供的開關
 78     defaultOff: false //開啟此項后彈幕不會初始化，默認初始化彈幕
 79   },
 80   // 標記點所對應的播放時間
 81    progressDot: [
 82     {
 83       time: 2000, //展示標記的時間
 84       text: '他死了', //鼠標hover在標記時展示的文字
 85       // duration: 8, //標記段長度（以時長計算）
 86       style: { //標記樣式
 87         background: 'red'
 88       }
 89     }, {
 90       time: 1500,
 91       text: '他才是兇手？'
 92     }, {
 93       time: 2600,
 94         text: '又是誰殺了她？',
 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({}），這樣最后視頻播放器不會生效。

總結

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

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