inleft
2024-01-10 7319260f31c9a593418ff17b1ca42e0822c3c4eb
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<template>
    <div v-if="closePlayer" style="display: flex; justify-content: center;align-items: center;height: 180px;">
        无效视频资源
    </div>
    <div v-else id="videoPlay" ref="myVdeoPlay" style="position: absolute;  top: 0;left: 0;width: 100%;height: 100%;">
    </div>
</template>
 
<script>
    import Hls from 'hls.js'
    import DPlayer from 'dplayer'
    export default {
        components: {},
        mounted() {
            var url = this.$route.query.url;
            if (url == null || url == '') {
                this.closePlayer = true;
                return
            }
 
            let _this = this;
 
            this.videoData.url = 'http://t.inleft.com/blog/mp4/' + url
            
 
            //弹窗初始化后先不加载视频,等待手动播放
            this.init();
 
            this.dp.volume(0.1, true, false);
 
            this.dp.on('pause', function() {
                _this.$message.info("停止播放")
            });
 
            this.dp.on('play', function() {
                _this.$message.info("开始播放..")
            });
 
            this.dp.on('error', function() {
                _this.disabledPointer = true
                this.closePlayer = true;
            });
 
            _this.$nextTick(function() {
                _this.startPlay(this.videoData)
            })
        },
        data() {
            return {
                dp: null,
                hls: null,
                videoData: {},
                closePlayer: false,
                disabledPointer:false,
            }
        },
        methods: {
            //加载播放
            startPlay(videoData) {
                if (videoData == null || videoData == undefined) {
                    this.$message.error("无效资源..")
                    return
                }
 
                if (videoData.url != null && videoData.url != "" && videoData.url.endsWith("m3u8")) {
                    videoData.type = "customHls";
                } else {
                    videoData.type = "normal";
                }
 
                if (videoData.pic === null || videoData.pic == '') {
                    videoData.pic = myConstant.defaultBGVideo;
                }
 
                //重要!!防止hls类型视频在切换后不停在后台缓存
                if (this.hls != null) {
                    this.hls.destroy();
                }
 
                this.disabledPointer = false;
                this.isPlaying = false;
 
                //重要!!防止hls类型视频在切换后不停在后台缓存
                if (videoData.type == "customHls") {
                    this.hls = new Hls();
 
                }
 
                this.dp.switchVideo(videoData)
 
            },
            //播放器初始化
            init() {
                var _this = this;
                this.dp = new DPlayer({
                    element: document.getElementById("videoPlay"),
                    //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
                    hotkey: true, // 是否支持热键,调节音量,播放,暂停等
                    mutex: false, //  防止同时播放多个用户,在该用户开始播放时暂停其他用户
                    theme: "#b7daff", // 风格颜色,例如播放条,音量条的颜色
                    loop: false, // 是否自动循环
                    lang: "zh-cn", // 语言,'en', 'zh-cn', 'zh-tw'
                    // screenshot: true, // 是否允许截图(按钮),点击可以自动将截图下载到本地
                    preload: "metadata", // 自动预加载 'none', 'metadata', 'auto'
                    volume: _this.volumeInit, // 初始化音量
                    playbackSpeed: [2, 1, 0.5], //可选的播放速度,可自定义
                    video: {
                        pic: _this.defalutImg, // 视频封面
                        // url: videoInfo.url,
                        //url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
                        type: "normal",
                        customType: {
                            customHls: function(video, player) {
                                //const hls = new Hls()
                                if (_this.hls != null) {
                                    _this.hls.loadSource(video.src)
                                    _this.hls.attachMedia(video)
 
                                    // 监听Hls.Events.ERROR事件,
                                    // DNS解析、下载超时,都会触发manifestLoadError错误
                                    _this.hls.on(Hls.Events.ERROR, function(eventName, data) {
                                        // 埋点上报,可以追踪data.details
                                        // track()
                                        _this.$message.error("hls加载异常", 5)
                                        console.log(eventName);
                                        console.log(data);
                                    })
                                }
 
                            }
                        }
                    }
                })
 
                // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
                document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
 
                // document.querySelector(".dplayer-mask").remove();
                // document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
                // let length = document.querySelectorAll(".dplayer-menu-item").length;
                // document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
                // document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
            },
        }
 
    }
</script>
 
<style>
</style>