| | |
| | | </el-aside> |
| | | |
| | | <el-container class="point-container"> |
| | | <el-header style="display: flex; flex-direction: column; height: 120px;padding: 0 40px"> |
| | | <el-header |
| | | style=" |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: 120px; |
| | | padding: 0 40px; |
| | | " |
| | | > |
| | | <div |
| | | style="display: flex; justify-content: space-between; height: 80px" |
| | | > |
| | |
| | | <div |
| | | v-for="item in videoData" |
| | | :key="item.id" |
| | | style="position: relative;height:350px" |
| | | style="position: relative; height: 350px" |
| | | > |
| | | <div class="video-title">{{ item.name }}{{ item.community }}</div> |
| | | |
| | |
| | | .catch((err) => this.$message.error(err)); |
| | | }, |
| | | loadVideo(item) { |
| | | if (item.code) { |
| | | if (item.code || item.platResourceId) { |
| | | if (Hls.isSupported()) { |
| | | var video = document.getElementById(item.id); |
| | | var hls = new Hls(); |
| | | videoPoint.getVideoPointUrl(item.code).then((res) => { |
| | | if (res.code === 0) { |
| | | hls.loadSource(res.data); |
| | | hls.attachMedia(video); |
| | | this.videoList.push(video); |
| | | // hls.on(Hls.Events.MANIFEST_PARSED, function () { |
| | | // // video.play(); |
| | | // document.body.addEventListener( |
| | | // "click", |
| | | // function () { |
| | | // video.play(); |
| | | // }, |
| | | // false |
| | | // ); |
| | | // }); |
| | | setTimeout(() => { |
| | | video.play(); |
| | | }, 2000); |
| | | } |
| | | }); |
| | | videoPoint |
| | | .getVideoPointUrl(item.code || item.platResourceId) |
| | | .then((res) => { |
| | | if (res.code === 0) { |
| | | hls.loadSource(res.data); |
| | | hls.attachMedia(video); |
| | | this.videoList.push(video); |
| | | // hls.on(Hls.Events.MANIFEST_PARSED, function () { |
| | | // // video.play(); |
| | | // document.body.addEventListener( |
| | | // "click", |
| | | // function () { |
| | | // video.play(); |
| | | // }, |
| | | // false |
| | | // ); |
| | | // }); |
| | | setTimeout(() => { |
| | | video.play(); |
| | | }, 2000); |
| | | } |
| | | }); |
| | | } |
| | | } else { |
| | | this.$message.error("暂无视频"); |
| | |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .point-container{ |
| | | .point-container { |
| | | margin-left: 5px; |
| | | border: 1px solid #ccc; |
| | | padding: 10px; |
| | |
| | | color: rgb(75, 155, 183); |
| | | border: 1px solid rgb(75, 155, 183); |
| | | } |
| | | .title{ |
| | | .title { |
| | | color: #333; |
| | | } |
| | | .button-two { |