inleft
2022-08-29 1b6f1e454fff0187d4d30dcf0d5819d4f57f1787
commit | author | age
1b6f1e 1 <template>
I 2     <div v-if="closePlayer" style="display: flex; justify-content: center;align-items: center;height: 180px;">
3         无效视频资源
4     </div>
5     <div v-else id="videoPlay" ref="myVdeoPlay" style="position: absolute;  top: 0;left: 0;width: 100%;height: 100%;">
6     </div>
7 </template>
8
9 <script>
10     import Hls from 'hls.js'
11     import DPlayer from 'dplayer'
12     export default {
13         components: {},
14         mounted() {
15             var url = this.$route.query.url;
16             if (url == null || url == '') {
17                 this.closePlayer = true;
18                 return
19             }
20
21             let _this = this;
22
23             this.videoData.url = 'http://t.inleft.com/blog/mp4/' + url
24             
25
26             //弹窗初始化后先不加载视频,等待手动播放
27             this.init();
28
29             this.dp.volume(0, true, false);
30
31             this.dp.on('pause', function() {
32                 _this.$message.info("停止播放")
33             });
34
35             this.dp.on('play', function() {
36                 _this.$message.info("开始播放..")
37             });
38
39             this.dp.on('error', function() {
40                 _this.disabledPointer = true
41             });
42
43             _this.$nextTick(function() {
44                 _this.startPlay(this.videoData)
45             })
46         },
47         data() {
48             return {
49                 dp: null,
50                 hls: null,
51                 videoData: {},
52                 closePlayer: false
53             }
54         },
55         methods: {
56             //加载播放
57             startPlay(videoData) {
58                 if (videoData == null || videoData == undefined) {
59                     this.$message.error("无效资源..")
60                     return
61                 }
62
63                 if (videoData.url != null && videoData.url != "" && videoData.url.endsWith("m3u8")) {
64                     videoData.type = "customHls";
65                 } else {
66                     videoData.type = "normal";
67                 }
68
69                 if (videoData.pic === null || videoData.pic == '') {
70                     videoData.pic = myConstant.defaultBGVideo;
71                 }
72
73                 //重要!!防止hls类型视频在切换后不停在后台缓存
74                 if (this.hls != null) {
75                     this.hls.destroy();
76                 }
77
78                 this.disabledPointer = false;
79                 this.isPlaying = false;
80
81                 //重要!!防止hls类型视频在切换后不停在后台缓存
82                 if (videoData.type == "customHls") {
83                     this.hls = new Hls();
84
85                 }
86
87                 this.dp.switchVideo(videoData)
88
89             },
90             //播放器初始化
91             init() {
92                 var _this = this;
93                 this.dp = new DPlayer({
94                     element: document.getElementById("videoPlay"),
95                     //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
96                     hotkey: true, // 是否支持热键,调节音量,播放,暂停等
97                     mutex: false, //  防止同时播放多个用户,在该用户开始播放时暂停其他用户
98                     theme: "#b7daff", // 风格颜色,例如播放条,音量条的颜色
99                     loop: false, // 是否自动循环
100                     lang: "zh-cn", // 语言,'en', 'zh-cn', 'zh-tw'
101                     // screenshot: true, // 是否允许截图(按钮),点击可以自动将截图下载到本地
102                     preload: "metadata", // 自动预加载 'none', 'metadata', 'auto'
103                     volume: _this.volumeInit, // 初始化音量
104                     playbackSpeed: [2, 1, 0.5], //可选的播放速度,可自定义
105                     video: {
106                         pic: _this.defalutImg, // 视频封面
107                         // url: videoInfo.url,
108                         //url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
109                         type: "normal",
110                         customType: {
111                             customHls: function(video, player) {
112                                 //const hls = new Hls()
113                                 if (_this.hls != null) {
114                                     _this.hls.loadSource(video.src)
115                                     _this.hls.attachMedia(video)
116
117                                     // 监听Hls.Events.ERROR事件,
118                                     // DNS解析、下载超时,都会触发manifestLoadError错误
119                                     _this.hls.on(Hls.Events.ERROR, function(eventName, data) {
120                                         // 埋点上报,可以追踪data.details
121                                         // track()
122                                         _this.$message.error("hls加载异常", 5)
123                                         console.log(eventName);
124                                         console.log(data);
125                                     })
126                                 }
127
128                             }
129                         }
130                     }
131                 })
132
133                 // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
134                 document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
135
136                 // document.querySelector(".dplayer-mask").remove();
137                 // document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
138                 // let length = document.querySelectorAll(".dplayer-menu-item").length;
139                 // document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
140                 // document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
141             },
142         }
143
144     }
145 </script>
146
147 <style>
148 </style>