|
|
@@ -4,14 +4,18 @@
|
|
|
<div v-for="item in videoList" :key="item.plateId">
|
|
|
<div class="fs16">{{item.plateName}}</div>
|
|
|
<div :class="item.displayMode === 1 ? 'jjjc-list' : 'jcjc-list'">
|
|
|
- <video v-for="ele in item.videoCourseList" :id="'el-video-' + ele.id" :key="ele.id" class="w165h148" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" @click="play(item, ele)" />
|
|
|
+ <div v-for="ele in item.videoCourseList" :key="ele.id" class="video-card">
|
|
|
+ <video :id="'el-video-' + ele.id" class="w165h148" :x5-video-player-fullscreen="true" x5-video-player-type="h5" style="object-fit:fill" x5-video-orientation="landscape|portrait" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" @click="play(item, ele)" />
|
|
|
+ <div class="video-card-title">{{ele.videoName}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="return out"><div class="in"><img src="~/assets/image/activity/invite-user/guide/left.png" /></div></div>
|
|
|
+ <!-- <div class="return out"><div class="in"><img src="~/assets/image/activity/invite-user/guide/left.png" /></div></div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import screenfull from "screenfull"
|
|
|
import { fileKeyToUrl } from '@/plugins/file-center.js';
|
|
|
export default {
|
|
|
name: 'Guide',
|
|
|
@@ -23,13 +27,17 @@ export default {
|
|
|
token: ''
|
|
|
}
|
|
|
},
|
|
|
- fetch() {
|
|
|
- this.token = this.$route.query.token;
|
|
|
+ async fetch() {
|
|
|
+ if (this.$userAgent.isAndroid) {
|
|
|
+ this.token = await window.native.getToken();
|
|
|
+ } else {
|
|
|
+ this.token = this.$route.query.token;
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
videoURL() {
|
|
|
return (key) => {
|
|
|
- return fileKeyToUrl + key
|
|
|
+ return fileKeyToUrl(key)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -39,29 +47,50 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
async getActiveInfo() {
|
|
|
- const res = await this.$axios.$get('/videoCourse/client/list');
|
|
|
+ const res = await this.$axios.$get('/activity/videoCourse/client/list');
|
|
|
this.videoList = res.data;
|
|
|
},
|
|
|
async getAdInfoByAdPlace() {
|
|
|
const data = {
|
|
|
- id: 1,
|
|
|
- adPlace: 511,
|
|
|
- os: 1
|
|
|
- }
|
|
|
- const res = await this.$axios.$post('/v5/advertising/getAdInfoByAdPlace', data);
|
|
|
+ id: 1,
|
|
|
+ adPlace: 20,
|
|
|
+ os: 1
|
|
|
+ }
|
|
|
+ const res = await this.$axios.$post('/public/v5/advertising/getAdInfoByAdPlace', data);
|
|
|
this.topADList = res.data;
|
|
|
},
|
|
|
play(item, ele) {
|
|
|
const elVideo = document.getElementById('el-video-' + ele.id)
|
|
|
- if (elVideo.requestFullscreen) {
|
|
|
- elVideo.requestFullscreen()
|
|
|
- elVideo.play()
|
|
|
- } else if (elVideo.mozRequestFullscreen) {
|
|
|
- elVideo.mozRequestFullscreen()
|
|
|
- elVideo.play()
|
|
|
- } else if (elVideo.webkitRequestFullscreen) {
|
|
|
- elVideo.webkitRequestFullscreen()
|
|
|
- elVideo.play()
|
|
|
+ if (this.$userAgent.isAndroid) {
|
|
|
+ if (screenfull.isEnabled) {
|
|
|
+ screenfull.request(elVideo);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (elVideo.requestFullscreen) {
|
|
|
+ elVideo.requestFullscreen()
|
|
|
+ elVideo.play()
|
|
|
+ } else if (elVideo.mozRequestFullscreen) {
|
|
|
+ elVideo.mozRequestFullscreen()
|
|
|
+ elVideo.play()
|
|
|
+ } else if (elVideo.msRequestFullscreen) {
|
|
|
+ elVideo.msRequestFullscreen()
|
|
|
+ elVideo.play()
|
|
|
+ } else if (elVideo.webkitRequestFullscreen) {
|
|
|
+ elVideo.webkitRequestFullscreen()
|
|
|
+ elVideo.play()
|
|
|
+ } else {
|
|
|
+ elVideo.requestFullscreen()
|
|
|
+ elVideo.play()
|
|
|
+ }
|
|
|
+ elVideo.addEventListener("webkitfullscreenchange", function (e) {
|
|
|
+ if (!document.webkitIsFullScreen) {// 退出全屏暂停视频
|
|
|
+ elVideo.pause();
|
|
|
+ };
|
|
|
+ }, false);
|
|
|
+
|
|
|
+ elVideo.addEventListener('ended', function () {
|
|
|
+ document.webkitCancelFullScreen(); // 播放完毕自动退出全屏
|
|
|
+ }, false);
|
|
|
}
|
|
|
this.submit(item, ele, 1)
|
|
|
},
|
|
|
@@ -81,15 +110,43 @@ export default {
|
|
|
},
|
|
|
submit(item, ele, flag) {
|
|
|
const data = flag === 1 ? { id: ele.id, plateId: item.plateId, type: flag, videoId: ele.id } : { type: 2 }
|
|
|
- this.$axios.$post('/videoCourse/statistics/save', data, {headers: {Authorization: this.token}});
|
|
|
+ this.$axios.$post('/activity/videoCourse/statistics/save', data, { headers: { Authorization: this.token } });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.video-player--is-cssfullscreen {
|
|
|
+ position: fixed !important;
|
|
|
+ left: 0 !important;
|
|
|
+ top: 0 !important;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+.video-card {
|
|
|
+ width: 165px;
|
|
|
+ height: 148px;
|
|
|
+ border-radius: 5px;
|
|
|
+ position: relative;
|
|
|
+ & .video-card-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ line-height: 45px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1c1c1e;
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ border-radius: 0 0 9px 9px;
|
|
|
+ }
|
|
|
+}
|
|
|
.bg2C2C2D {
|
|
|
- background-color: #1C1C1E;
|
|
|
+ background-color: #1c1c1e;
|
|
|
min-height: 100vh;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
@@ -109,9 +166,10 @@ export default {
|
|
|
.jcjc-list {
|
|
|
padding: 0 15px;
|
|
|
overflow-x: scroll;
|
|
|
+ overflow-y: hidden;
|
|
|
display: flex;
|
|
|
margin: 15px 0;
|
|
|
- .w165h148 {
|
|
|
+ .video-card {
|
|
|
margin-right: 10px;
|
|
|
&:last-child {
|
|
|
margin-right: 0;
|
|
|
@@ -147,6 +205,7 @@ export default {
|
|
|
height: 148px;
|
|
|
object-fit: contain;
|
|
|
margin-bottom: 15px;
|
|
|
+ border-radius: 10px;
|
|
|
}
|
|
|
.return {
|
|
|
width: 42px;
|
|
|
@@ -156,19 +215,23 @@ export default {
|
|
|
&.out {
|
|
|
border-radius: 50%;
|
|
|
padding: 1px;
|
|
|
- background: linear-gradient(46deg, rgba(48, 49, 53, 1), rgba(113, 116, 127, 1));
|
|
|
- box-shadow: 0px 9px 17px 0px rgba(0,0,0,0.5);
|
|
|
+ background: linear-gradient(
|
|
|
+ 46deg,
|
|
|
+ rgba(48, 49, 53, 1),
|
|
|
+ rgba(113, 116, 127, 1)
|
|
|
+ );
|
|
|
+ box-shadow: 0px 9px 17px 0px rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
.in {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
border-radius: 50%;
|
|
|
- background: linear-gradient(180deg, #232427 0%, #4B4C52 100%);
|
|
|
+ background: linear-gradient(180deg, #232427 0%, #4b4c52 100%);
|
|
|
opacity: 1;
|
|
|
text-align: center;
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
img {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
zengzhixiang