| | |
| | | <template> |
| | | <div> |
| | | <div> |
| | | <div v-if="!this.$attrs.showTar"> |
| | | 正在播放: <span> {{playingVideoData.title}} </span> |
| | | </div> |
| | | <div class="myVideo fade"> |
| | | <div class="myVideo fade" v-bind:class="{disabledPointer:disabledPointer}"> |
| | | <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"> |
| | |
| | | <script> |
| | | import Hls from 'hls.js' |
| | | import DPlayer from 'dplayer' |
| | | import myConstant from "../../config/myConstant.js" |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | disabledPointer: false, |
| | | dp: null, |
| | | hls: null, |
| | | playHistory: [], |
| | | playRecordIds: [], |
| | | volumeInit: 0.1, |
| | |
| | | currentTime: 0, |
| | | duration: 0, |
| | | playingVideoData: { |
| | | img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", |
| | | pic: "", |
| | | url: "", |
| | | type: "normal", |
| | | title: "", |
| | | id: "" |
| | | }, |
| | | hls: null, |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | var _this = this; |
| | | |
| | | //调整音量 |
| | | _this.$message.success("模块加载完成,请注意音量是否合适..") |
| | | //_this.$message.success("模块加载完成,请注意音量是否合适..") |
| | | |
| | | this.dp.volume(this.volumeInit, true, false); |
| | | |
| | |
| | | this.dp.on('volumechange', function() { |
| | | _this.volumeInit = _this.dp.video.volume; |
| | | }); |
| | | this.dp.on('loadedmetadata', function() { |
| | | _this.duration = _this.dp.video.duration; |
| | | }); |
| | | this.dp.on('error', function() { |
| | | _this.duration = 0 |
| | | _this.disabledPointer = true |
| | | }); |
| | | |
| | | }, |
| | | methods: { |
| | | pauseMyVideo() { |
| | | this.dp.pause(); |
| | | this.isPlaying = false; |
| | | }, |
| | | togglePlay() { |
| | | this.dp.toggle(); |
| | | this.isPlaying = !this.isPlaying; |
| | |
| | | }, |
| | | //切换视频源 |
| | | swichPlay(videoId) { |
| | | |
| | | if (this.swichLock) { |
| | | this.$message.info("切换太快啦,缓一缓..", 5) |
| | | return |
| | |
| | | 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.playingVideoData = videoData |
| | | |
| | | this.disabledPointer = false; |
| | | this.isPlaying = false; |
| | | |
| | | //重要!!防止hls类型视频在切换后不停在后台缓存 |
| | | if (videoData.type == "customHls") { |
| | | this.hls = new Hls(); |
| | | |
| | | } |
| | | |
| | | this.dp.notice("播放器加载完成..", 3) |
| | | |
| | | this.dp.switchVideo(this.playingVideoData) |
| | | |
| | | |
| | | }, |
| | | //播放器初始化 |
| | | init() { |
| | |
| | | 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); |
| | | }) |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | |
| | | 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); |
| | | } |
| | |
| | | height: 180px; |
| | | background-color: #565656; |
| | | border-radius: 10px; |
| | | margin: 20px 0px; |
| | | margin: 20px auto; |
| | | display: grid; |
| | | } |
| | | |