| | |
| | | <template> |
| | | <div> |
| | | <div> |
| | | <div v-if="!this.$attrs.showTar"> |
| | | 正在播放: <span> {{playingVideoData.title}} </span> |
| | | </div> |
| | | <div class="myVideo fade"> |
| | | <div id="videoPlay" ref="myVdeoPlay"></div> |
| | | </div> |
| | | <div style="border-radius: 0 0 4px 4px;"> |
| | | <div style="border-radius: 0 0 4px 4px;" v-if="!this.$attrs.showTar"> |
| | | |
| | | <div style="padding: 10px 0px;"> |
| | | 音量 : |
| | | <a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" /> |
| | |
| | | {{Math.floor(duration/60)}}:{{Math.floor(duration%60)}} |
| | | <a-slider v-model="currentTime" :max="duration" @afterChange="changeTime" /> |
| | | </div> |
| | | |
| | | <a-collapse activeKey="playHistory"> |
| | | <a-collapse-panel key="playHistory" header="播放记录"> |
| | | <div v-for="(item,index) in playHistory"> |
| | |
| | | var _this = this; |
| | | |
| | | //调整音量 |
| | | _this.$message.success("加载完成,请注意音量是否合适..") |
| | | _this.$message.success("模块加载完成,请注意音量是否合适..") |
| | | |
| | | this.dp.volume(this.volumeInit, true, false); |
| | | |
| | |
| | | |
| | | }, |
| | | methods: { |
| | | pauseMyVideo() { |
| | | this.dp.pause(); |
| | | this.isPlaying = false; |
| | | }, |
| | | togglePlay() { |
| | | this.dp.toggle(); |
| | | this.isPlaying = !this.isPlaying; |
| | |
| | | }, |
| | | //加载播放 |
| | | startPlay(videoData) { |
| | | if (videoData == null || videoData == undefined) { |
| | | this.$message.error("无效资源..") |
| | | return |
| | | } |
| | | |
| | | if (videoData.url != null && videoData.urlL != "" && videoData.url.endsWith("m3u8")) { |
| | | videoData.type = "customHls"; |
| | | } else { |
| | | videoData.type = "normal"; |
| | | } |
| | | |
| | | |
| | | //重要!!防止hls类型视频在切换后不停在后台缓存 |
| | | if (this.hls != null) { |
| | | this.hls.destroy(); |
| | |
| | | this.hls = new Hls(); |
| | | } |
| | | |
| | | setTimeout(() => { |
| | | this.dp.switchVideo(this.playingVideoData) |
| | | }, 500); |
| | | this.dp.switchVideo(this.playingVideoData) |
| | | |
| | | }, |
| | | //播放器初始化 |
| | | init() { |
| | |
| | | }, |
| | | |
| | | ], |
| | | |
| | | highlight: [ |
| | | //进度条上的自定义时间标记 |
| | | // 进度条时间点高亮 |
| | |
| | | position: relative; |
| | | } |
| | | |
| | | .mark { |
| | | border-radius: 14px; |
| | | background: #00000073; |
| | | width: 100%; |
| | | height: 100%; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .playItem:hover { |
| | | //transform: scale(1.1) translate3d(0, 0, 0); |
| | | } |