在vue中使用西瓜视频播放器
第一步：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({}），这样最后视频播放器不会生效。
