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