| commit | author | age | ||
| 105729 | 1 | <template> |
| I | 2 | <div> |
| 0dd41b | 3 | <div> |
| e4f086 | 4 | 正在播放: <span> {{playingVideoData.title}} </span> |
| 0dd41b | 5 | </div> |
| 105729 | 6 | <div class="myVideo"> |
| 0dd41b | 7 | <div id="videoPlay" ref="myVdeoPlay"></div> |
| I | 8 | </div> |
| 9 | <div style="border-radius: 0 0 4px 4px;"> | |
| 10 | <div style="padding: 10px 0px;"> | |
| 11 | 音量 : | |
| 12 | <a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" /> | |
| 105729 | 13 | </div> |
| e4f086 | 14 | <a-collapse activeKey="playHistory"> |
| I | 15 | <a-collapse-panel key="playHistory" header="播放记录"> |
| 16 | <div v-for="(item,index) in playHistory"> | |
| 17 | <div v-if="index==0"> | |
| 18 | <a-tooltip placement="bottomRight" title="播放/暂停"> | |
| 19 | <div @click="togglePlay" class="playItem"> | |
| 20 | {{item.title}} | |
| 21 | <a-icon type="youtube" class="playIcon" /> | |
| 22 | </div> | |
| 23 | </a-tooltip> | |
| 24 | </div> | |
| 25 | <div v-else> | |
| 26 | <div @click="swichPlay(item.id)" class="playItem"> | |
| 27 | <a-tooltip placement="bottomRight" title="切换播放"> | |
| 28 | <div> | |
| 29 | {{item.title}} | |
| 30 | </div> | |
| 31 | </a-tooltip> | |
| 32 | </div> | |
| 33 | </div> | |
| 0dd41b | 34 | </div> |
| I | 35 | </a-collapse-panel> |
| 36 | </a-collapse> | |
| 105729 | 37 | </div> |
| I | 38 | </div> |
| 39 | </template> | |
| e4f086 | 40 | |
| 105729 | 41 | |
| I | 42 | <script> |
| 43 | import Hls from 'hls.js' | |
| 44 | import DPlayer from 'dplayer' | |
| 45 | ||
| 46 | export default { | |
| 47 | data() { | |
| 48 | return { | |
| 49 | dp: null, | |
| e4f086 | 50 | playHistory: [], |
| I | 51 | playRecordIds: [], |
| 0dd41b | 52 | volumeInit: 0.1, |
| I | 53 | isPlaying: false, |
| e4f086 | 54 | swichLock: false, |
| I | 55 | playingVideoData: { |
| 56 | img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", | |
| 57 | url: "", | |
| 58 | type: "normal", | |
| 59 | title: "", | |
| 60 | id: "" | |
| 61 | }, | |
| 62 | ||
| 105729 | 63 | } |
| I | 64 | }, |
| 0dd41b | 65 | mounted() { |
| I | 66 | //弹窗初始化后先不加载视频,等待手动播放 |
| 67 | this.init(); | |
| e4f086 | 68 | var _this = this; |
| I | 69 | |
| 70 | //调整音量 | |
| 71 | _this.$message.success("加载完成,请注意音量是否合适..") | |
| 72 | ||
| 73 | this.dp.volume(this.volumeInit, true, false); | |
| 74 | ||
| 75 | this.dp.on('pause', function() { | |
| 76 | _this.$message.info("停止播放") | |
| 77 | this.isPlaying = false; | |
| 78 | }); | |
| 79 | ||
| 80 | this.dp.on('play', function() { | |
| 81 | _this.$message.info("开始播放..") | |
| 82 | this.isPlaying = true; | |
| 83 | }); | |
| 0dd41b | 84 | }, |
| 105729 | 85 | methods: { |
| e4f086 | 86 | togglePlay() { |
| I | 87 | this.dp.toggle(); |
| 88 | this.isPlaying = !this.isPlaying; | |
| 89 | }, | |
| 0dd41b | 90 | changeVolume(value) { |
| I | 91 | this.dp.volume(value, true, false); |
| af029b | 92 | }, |
| e4f086 | 93 | //切换视频源 |
| I | 94 | swichPlay(videoId) { |
| 95 | if (this.swichLock) { | |
| 96 | this.$message.info("切换太快啦,缓一缓..", 5) | |
| 0dd41b | 97 | return |
| I | 98 | } |
| 99 | ||
| e4f086 | 100 | if (videoId == this.playingVideoData.id) { |
| I | 101 | this.$message.info("同一个视频..", 1) |
| 102 | return | |
| 103 | } | |
| 104 | let tempData = this.playHistory.filter(item => item.id == videoId)[0] | |
| af029b | 105 | |
| e4f086 | 106 | this.$message.info("切换视频源..", 1) |
| I | 107 | this.swichLock = !this.swichLock; |
| af029b | 108 | |
| e4f086 | 109 | this.startPlay(tempData) |
| 0dd41b | 110 | |
| e4f086 | 111 | setTimeout(() => { |
| I | 112 | this.swichLock = !this.swichLock; |
| 113 | }, 5000); | |
| 0dd41b | 114 | |
| e4f086 | 115 | //通知父组件更换评论信息 |
| I | 116 | this.$emit("swichPlay", tempData) |
| 0dd41b | 117 | |
| I | 118 | }, |
| e4f086 | 119 | //调整播放记录 |
| I | 120 | adjustOrder(videoData) { |
| 121 | if (this.playRecordIds.findIndex(id => id == videoData.id) == -1) { | |
| 122 | //新纪录 | |
| 123 | this.playRecordIds.push(videoData.id) | |
| 124 | this.playHistory.unshift(videoData) | |
| 125 | } else { | |
| 126 | //旧记录 | |
| 127 | this.playHistory = this.playHistory.filter(item => item.id != videoData.id); | |
| 128 | this.playHistory.unshift(videoData) | |
| 129 | } | |
| 130 | }, | |
| 131 | //加载播放 | |
| 132 | startPlay(videoData) { | |
| 133 | ||
| 134 | this.adjustOrder(videoData) | |
| 135 | ||
| 136 | this.playingVideoData = videoData | |
| 137 | ||
| 138 | this.isPlaying = false; | |
| 139 | this.dp.switchVideo(this.playingVideoData, null) | |
| 140 | ||
| 141 | ||
| 142 | }, | |
| 143 | //播放器初始化 | |
| 0dd41b | 144 | init() { |
| 105729 | 145 | this.dp = new DPlayer({ |
| I | 146 | element: document.getElementById("videoPlay"), |
| 147 | //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo | |
| 0dd41b | 148 | hotkey: true, // 是否支持热键，调节音量，播放，暂停等 |
| 105729 | 149 | mutex: false, // 防止同时播放多个用户，在该用户开始播放时暂停其他用户 |
| I | 150 | theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色 |
| 151 | loop: false, // 是否自动循环 | |
| 152 | lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw' | |
| 153 | // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地 | |
| 0dd41b | 154 | preload: "metadata", // 自动预加载 'none', 'metadata', 'auto' |
| I | 155 | volume: this.volumeInit, // 初始化音量 |
| 105729 | 156 | playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义 |
| I | 157 | contextmenu: [ |
| 158 | //右键菜单 | |
| 159 | { | |
| 160 | text: "b站", | |
| 161 | link: "https://www.bilibili.com" | |
| 162 | }, | |
| 0dd41b | 163 | |
| 105729 | 164 | ], |
| 0dd41b | 165 | |
| 105729 | 166 | highlight: [ |
| I | 167 | //进度条上的自定义时间标记 |
| 168 | // 进度条时间点高亮 | |
| 0dd41b | 169 | // { |
| I | 170 | // text: "10M", |
| 171 | // time: 60 | |
| 172 | // }, | |
| 105729 | 173 | ], |
| I | 174 | video: { |
| 0dd41b | 175 | pic: this.defalutImg, // 视频封面 |
| I | 176 | // url: videoInfo.url, |
| e4f086 | 177 | //url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3", |
| I | 178 | type: "normal", |
| 105729 | 179 | customType: { |
| I | 180 | customHls: function(video, player) { |
| 181 | const hls = new Hls() | |
| 182 | hls.loadSource(video.src) | |
| 183 | hls.attachMedia(video) | |
| 184 | } | |
| 185 | } | |
| 186 | } | |
| 187 | }) | |
| e4f086 | 188 | |
| I | 189 | // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除 |
| 190 | // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单 | |
| 191 | ||
| 192 | document.querySelector(".dplayer-mask").remove(); | |
| 193 | document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源 | |
| 194 | let length = document.querySelectorAll(".dplayer-menu-item").length; | |
| 195 | document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息 | |
| 196 | document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息 | |
| 0dd41b | 197 | }, |
| 105729 | 198 | } |
| af029b | 199 | |
| 105729 | 200 | } |
| I | 201 | </script> |
| 202 | <style lang="less" scoped> | |
| 0dd41b | 203 | .playItem { |
| I | 204 | border: 1px solid #d9d9d9; |
| 205 | padding: 10px; | |
| 206 | border-radius: 5px; | |
| 207 | margin: 10px; | |
| 208 | transition: all .5s; | |
| 209 | position: relative; | |
| 210 | } | |
| 211 | ||
| 212 | .playItem:hover { | |
| e4f086 | 213 | //transform: scale(1.1) translate3d(0, 0, 0); |
| 0dd41b | 214 | } |
| I | 215 | |
| 216 | .playItem:active { | |
| e4f086 | 217 | transform: scale(0.75) translate3d(0, 0, 0); |
| 0dd41b | 218 | } |
| e4f086 | 219 | |
| 0dd41b | 220 | |
| I | 221 | .playIcon { |
| 222 | transform: scale(1.3); | |
| 223 | position: absolute; | |
| 224 | top: 35%; | |
| 225 | right: 10px; | |
| 226 | } | |
| 227 | ||
| 105729 | 228 | .myVideo { |
| I | 229 | position: relative; |
| 230 | width: 300px; | |
| 231 | height: 180px; | |
| 232 | background-color: #565656; | |
| 233 | border-radius: 10px; | |
| 0dd41b | 234 | margin: 20px 0px; |
| e4f086 | 235 | display: grid; |
| 105729 | 236 | } |
| I | 237 | |
| 238 | ||
| 0dd41b | 239 | .myVideo /deep/ .dplayer { |
| I | 240 | border-radius: 5px; |
| 105729 | 241 | } |
| I | 242 | |
| e4f086 | 243 | |
| 105729 | 244 | </style> |
