Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ac658bf6 1 parent a99dfd57

✨ feat(视频播放组件): 初始化视频时机调整

Inline Side-by-side
Showing 4 changed files with 80 additions and 70 deletions
...@@ -82,19 +82,21 @@ export default { ...@@ -82,19 +82,21 @@ export default {
82 created() { 82 created() {
83 }, 83 },
84 mounted() { 84 mounted() {
85 - var mp = new MuiPlayer({ 85 + setTimeout(() => {
86 - container: '#mui-player-' + this.item.case_id, 86 + var mp = new MuiPlayer({
87 - title: this.item.title, 87 + container: '#mui-player-' + this.item.case_id,
88 - src: this.item.video.url, 88 + title: this.item.title,
89 - poster: this.item.cover.url, 89 + src: this.item.video.url,
90 - autoFit: false, 90 + poster: this.item.cover.url,
91 - videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放 91 + autoFit: false,
92 - {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'}, 92 + videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
93 - {attrKey:'playsinline',attrValue:'playsinline'}, 93 + {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
94 - {attrKey:'x5-video-player-type',attrValue:'h5-page'}, 94 + {attrKey:'playsinline',attrValue:'playsinline'},
95 - ] 95 + {attrKey:'x5-video-player-type',attrValue:'h5-page'},
96 - }) 96 + ]
97 - this.detail = _.cloneDeep(this.item) 97 + })
98 + this.detail = _.cloneDeep(this.item)
99 + }, 500);
98 }, 100 },
99 methods: { 101 methods: {
100 setLike() { 102 setLike() {
......
...@@ -153,19 +153,21 @@ export default { ...@@ -153,19 +153,21 @@ export default {
153 created() { 153 created() {
154 }, 154 },
155 mounted() { 155 mounted() {
156 - var mp = new MuiPlayer({ 156 + setTimeout(() => {
157 - container: '#mui-player-' + this.item.case_id, 157 + var mp = new MuiPlayer({
158 - title: this.item.title, 158 + container: '#mui-player-' + this.item.case_id,
159 - src: this.item.video.url, 159 + title: this.item.title,
160 - poster: this.item.cover.url, 160 + src: this.item.video.url,
161 - autoFit: false, 161 + poster: this.item.cover.url,
162 - videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放 162 + autoFit: false,
163 - { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' }, 163 + videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
164 - { attrKey: 'playsinline', attrValue: 'playsinline' }, 164 + { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
165 - { attrKey: 'x5-video-player-type', attrValue: 'h5-page' }, 165 + { attrKey: 'playsinline', attrValue: 'playsinline' },
166 - ] 166 + { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
167 - }) 167 + ]
168 - this.detail = _.cloneDeep(this.item) 168 + })
169 + this.detail = _.cloneDeep(this.item)
170 + }, 500);
169 }, 171 },
170 methods: { 172 methods: {
171 setLike() { 173 setLike() {
......
...@@ -42,12 +42,6 @@ import { useRoute, useRouter } from 'vue-router' ...@@ -42,12 +42,6 @@ import { useRoute, useRouter } from 'vue-router'
42 const $route = useRoute(); 42 const $route = useRoute();
43 const $router = useRouter(); 43 const $router = useRouter();
44 44
45 -const goTo = () => { // 跳转作品详情页
46 - $router.push({
47 - path: '/client/videoDetail'
48 - });
49 -}
50 -
51 onMounted(() => { 45 onMounted(() => {
52 }) 46 })
53 47
...@@ -64,21 +58,31 @@ export default { ...@@ -64,21 +58,31 @@ export default {
64 created() { 58 created() {
65 }, 59 },
66 mounted() { 60 mounted() {
67 - var mp = new MuiPlayer({ 61 + setTimeout(() => {
68 - container: '#mui-player-' + this.item.id, 62 + var mp = new MuiPlayer({
69 - title: this.item.title, 63 + container: '#mui-player-' + this.item.id,
70 - src: this.item.video, 64 + title: this.item.title,
71 - poster: this.item.cover, 65 + src: this.item.video,
72 - autoFit: false, 66 + poster: this.item.cover,
73 - videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放 67 + autoFit: false,
74 - { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' }, 68 + videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
75 - { attrKey: 'playsinline', attrValue: 'playsinline' }, 69 + { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
76 - { attrKey: 'x5-video-player-type', attrValue: 'h5-page' }, 70 + { attrKey: 'playsinline', attrValue: 'playsinline' },
77 - ] 71 + { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
78 - }) 72 + ]
79 - this.detail = _.cloneDeep(this.item) 73 + })
74 + this.detail = _.cloneDeep(this.item)
75 + }, 500);
80 }, 76 },
81 methods: { 77 methods: {
78 + goTo () { // 跳转作品详情页
79 + this.$router.push({
80 + path: '/client/videoDetail',
81 + query: {
82 + prod_id: this.item.id
83 + }
84 + });
85 + },
82 setLike() { 86 setLike() {
83 this.detail.is_like = !this.detail.is_like 87 this.detail.is_like = !this.detail.is_like
84 }, 88 },
...@@ -106,9 +110,7 @@ export default { ...@@ -106,9 +110,7 @@ export default {
106 color: #713610; 110 color: #713610;
107 padding: 1rem; 111 padding: 1rem;
108 padding-bottom: 0.5rem; 112 padding-bottom: 0.5rem;
109 - .avatar { 113 +
110 -
111 - }
112 } 114 }
113 } 115 }
114 </style> 116 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="video-wrapper"> 2 <div class="video-wrapper">
3 - <div class="video-div" :id="'mui-player-' + item.case_id"></div> 3 + <div class="video-div" :id="'mui-player-' + item.id"></div>
4 <div class="video-bar"> 4 <div class="video-bar">
5 <van-row style="text-align: center;"> 5 <van-row style="text-align: center;">
6 <van-col span="7"> 6 <van-col span="7">
7 <span style="color: #777777;"> 7 <span style="color: #777777;">
8 - 3068次播放 8 + {{ item.play_num }}次播放
9 </span> 9 </span>
10 </van-col> 10 </van-col>
11 <van-col span="1" style="color: #EEEDED;"> 11 <van-col span="1" style="color: #EEEDED;">
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
13 </van-col> 13 </van-col>
14 <van-col span="8"> 14 <van-col span="8">
15 <span @click="setCollect"> 15 <span @click="setCollect">
16 - <van-icon v-if="!detail.collected" :name="icon_shoucang1" size="1.2rem" style="vertical-align: bottom;" /> 16 + <van-icon v-if="!detail.is_favor" :name="icon_shoucang1" size="1.2rem" style="vertical-align: bottom;" />
17 <van-icon v-else :name="icon_shoucang2" size="1.2rem" style="vertical-align: bottom;" /> 17 <van-icon v-else :name="icon_shoucang2" size="1.2rem" style="vertical-align: bottom;" />
18 - 10086 18 + {{ item.favor_num }}
19 </span> 19 </span>
20 </van-col> 20 </van-col>
21 <van-col span="1" style="color: #EEEDED;"> 21 <van-col span="1" style="color: #EEEDED;">
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
23 </van-col> 23 </van-col>
24 <van-col span="7"> 24 <van-col span="7">
25 <span @click="setLike()"> 25 <span @click="setLike()">
26 - <van-icon v-if="!detail.liked" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" /> 26 + <van-icon v-if="!detail.is_like" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
27 <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" /> 27 <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
28 - 10086 28 + {{ item.like_num }}
29 </span> 29 </span>
30 </van-col> 30 </van-col>
31 </van-row> 31 </van-row>
...@@ -70,30 +70,34 @@ export default { ...@@ -70,30 +70,34 @@ export default {
70 created() { 70 created() {
71 }, 71 },
72 mounted() { 72 mounted() {
73 - var mp = new MuiPlayer({ 73 + setTimeout(() => {
74 - container: '#mui-player-' + this.item.case_id, 74 + var mp = new MuiPlayer({
75 - title: this.item.title, 75 + container: '#mui-player-' + this.item.id,
76 - src: this.item.video.url, 76 + title: this.item.title,
77 - poster: this.item.cover.url, 77 + src: this.item.video,
78 - autoFit: false, 78 + poster: this.item.cover,
79 - videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放 79 + autoFit: false,
80 - {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'}, 80 + videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
81 - {attrKey:'playsinline',attrValue:'playsinline'}, 81 + {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
82 - {attrKey:'x5-video-player-type',attrValue:'h5-page'}, 82 + {attrKey:'playsinline',attrValue:'playsinline'},
83 - ] 83 + {attrKey:'x5-video-player-type',attrValue:'h5-page'},
84 - }) 84 + ]
85 - this.detail = _.cloneDeep(this.item) 85 + })
86 + this.detail = _.cloneDeep(this.item)
87 + }, 500)
86 }, 88 },
87 methods: { 89 methods: {
88 setCollect() { 90 setCollect() {
89 - this.detail.collected = !this.detail.collected 91 + console.warn(this.detail.is_favor);
92 + // this.detail.is_favor = this.detail.is_favor ? 1 : 0
90 }, 93 },
91 setLike() { 94 setLike() {
92 - this.detail.liked = !this.detail.liked 95 + console.warn(this.detail.is_like);
96 + // this.detail.is_like = this.detail.is_like ? 1 : 0
93 }, 97 },
94 setCommit() { 98 setCommit() {
95 console.warn('跳转详情页，移动到留言页'); 99 console.warn('跳转详情页，移动到留言页');
96 - console.warn(this.detail.case_id); 100 + console.warn(this.detail.id);
97 } 101 }
98 } 102 }
99 } 103 }
......