第一步：npm i xgplayer,
在組件中引入：
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 width: 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 width: 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 width: 100%; 138 background: url(../assets/move2.png) no-repeat 100% 100%; 139 } 140 img{ 141 height: 100%; 142 width: 100%; 143 } 144 </style>
注意：一定不能在data或者created中里給player=new Player({}），這樣最后視頻播放器不會生效。