在vue中使用西瓜视频播放器
生活随笔
收集整理的這篇文章主要介紹了
在vue中使用西瓜视频播放器
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
第一步: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)題。
- 上一篇: 地心地固坐标系(ECEF)与站心坐标系(
- 下一篇: VM ESXI 服务器虚拟化资料积累