videoPlayer.vue
2.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!--
* @Date: 2024-09-24 18:06:55
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-25 09:59:56
* @FilePath: /vue2_vite_web/src/components/videoPlayer.vue
* @Description: 文件描述
-->
<template>
<div class="">
<div id="mui-player">
</div>
<div v-if="status === 'play'" @click="play" style="position: absolute; top: 50%; left: 50%;">play</div>
<div v-if="status === 'pause'" @click="pause" style="position: absolute; top: 50%; left: 50%;">pause</div>
</div>
</template>
<script>
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
export default {
data () {
return {
video: null,
status: 'play',
}
},
mounted () {
// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
var mp = new MuiPlayer({
container:'#mui-player',
title: '',
pageHead: false,
src:'https://gd-pri.jinshujufiles.com/en/g7D0MT/ltkASOw4yq0lJI0b-VH00VNz7zCs_field_20_1657944201.MOV?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:iYFNizzrqTFRuDPzUdtWDSrUOtA=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL2c3RDBNVC9sdGtBU093NHlxMGxKSTBiLVZIMDBWTno3ekNzX2ZpZWxkXzIwXzE2NTc5NDQyMDEuTU9WKiIsIkUiOjE5NzM1MTM3NTh9',
poster: 'https://gd-pri.jinshujufiles.com/en/g7D0MT/FqGDEvU9encwLEBGGj5y3_9fZ5VR_field_74_1657944218.jpeg?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:5dtH0Gbayh4jNtDMHK4o0D7X5Vs=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL2c3RDBNVC9GcUdERXZVOWVuY3dMRUJHR2o1eTNfOWZaNVZSX2ZpZWxkXzc0XzE2NTc5NDQyMTguanBlZyoiLCJFIjoxOTczNTEzNzU4fQ==',
videoAttribute: [
// 声明启用同层播放, 不让会自动全屏播放
{ attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
{ attrKey: 'playsinline', attrValue: 'playsinline' },
{ attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
],
});
const video = mp.video();
mp.on('ready',() => {
this.video = video;
});
},
methods: {
play () {
this.video.play();
this.status = 'pause';
},
pause () {
this.video.pause();
this.status = 'play';
}
}
}
</script>
<style lang="less" scoped>
</style>