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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| <!--
| * @Author: 张嘉彬
| * @Date: 2021-09-28 14:42:15
| * @Description:
| -->
| <template>
| <div :style="{
| zIndex: infoData.z,
| width: infoData.width,
| height: infoData.height,
| position: 'absolute',
| top: infoData.codeY,
| left: infoData.codeX
| }" class="video-box">
| <video :id="infoData.id"
| :style="{zIndex: infoData.z,width:infoData.width,height:infoData.height}"
| :src="infoData.videoUrl" :loop="infoData.loopPlay" :controls="infoData.playBtn"
| :muted="infoData.mutePlay" :autoPlay="infoData.autoPlay" :poster="getPoster"
| controlsList="nodownload" disablePictureInPicture webkit-playsinline="true"
| playsinline="true" x5-playsinline>
| </video>
| </div>
| </template>
|
| <script>
| // 自动播放音频在某些机型会报错，不兼容，只能引导用户主动交互
| //目前解决方式静音自动播放
| export default {
| name: 'VideoPlayer',
| props: {
| infoData: {
| type: Object,
| default: () => {
| return {}
| }
| }
| },
| data() {
| return {
| video: null
| }
| },
| computed: {
| getPoster() {
| return this.infoData.fileUrl || `${this.infoData.videoUrl}?x-oss-process=video/snapshot,t_0,f_jpg`
| }
| },
| mounted() {
| const video = document.getElementById(this.infoData.id);
| // 自动播放
| if (this.infoData.autoPlay) {
| video.play()
| //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
| document.addEventListener("WeixinJSBridgeReady", function () {
| video.play();
| }, false);
| }
| //监听H5网页切换到后台或者手机处于息屏状态
| document.addEventListener("visibilitychange", () => {
| if (document.hidden) {
| video.pause()
| }
| else {
| if (this.infoData.autoPlay) {
| video.play()
| }
| }
| });
| },
| methods: {
| fullScreen() {
| document.getElementById(this.infoData.id).requestFullscreen()
| }
| }
| }
| </script>
|
| <style scoped lang="scss">
| .video-box {
| display: flex;
| align-items: center;
| background-color: #141414;
| }
| .voice-img {
| width: 40rpx;
| height: 40rpx;
| position: absolute;
| top: 10rpx;
| right: 10rpx;
| z-index: 10000 !important;
| }
| </style>
|
|
