pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化视频

pull/19/head
zyronon 4 years ago
parent
035a4710dc
commit
e8be1f796f
3 changed files with 1261 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1235
      src/assets/data/resource.js
  2. 13
      src/components/Video.vue
  3. 31
      src/pages/home/Index2.vue

1235
src/assets/data/resource.js
View File

File diff suppressed because it is too large Load Diff

13
src/components/Video.vue
Unescape View File

@ -1,7 +1,7 @@ @@ -1,7 +1,7 @@
<template>
<div class="video-wrapper" ref="videoWrapper" :class="name">
<video :src="video.video"
:poster="video.origin_cover"
<video :src="video.video + '?v=123'"
:poster="video.video + videoPoster"
ref="video"
muted
preload
@ -52,7 +52,7 @@ @@ -52,7 +52,7 @@
/>
</div>
<div class="content ml1r mb1r" v-if="!isMy">
<div class="name mb1r">{{ lVideo.author.name }}</div>
<div class="name mb1r" @click="$emit('goUserInfo')">@{{ lVideo.author.nickname }}</div>
<div class="description mb1r">
{{ lVideo.desc }}
</div>
@ -104,6 +104,7 @@ import globalMethods from '../utils/global-methods' @@ -104,6 +104,7 @@ import globalMethods from '../utils/global-methods'
import BaseMarquee from "./BaseMarquee";
import Dom from "../utils/dom";
import BaseMusic from "./BaseMusic";
import {mapState} from "vuex";
export default {
name: "Video",
@ -148,7 +149,7 @@ export default { @@ -148,7 +149,7 @@ export default {
} else {
return this.isPlaying ? '' : 'stop'
}
}
},
},
data() {
return {
@ -170,7 +171,9 @@ export default { @@ -170,7 +171,9 @@ export default {
lastClickTime: -1,
clickTimer: null,
dbClickTimer: null,
isDbClick: false
isDbClick: false,
videoPoster: `?vframe/jpg/offset/1/w/${document.body.clientWidth}`
// videoPoster: `?vframe/jpg/offset/1/w/${document.body.clientWidth}/h/${document.body.clientHeight - 50}`
}
},
mounted() {

31
src/pages/home/Index2.vue
Unescape View File

@ -191,6 +191,7 @@ import ConfirmDialog from "../../components/dialog/ConfirmDialog"; @@ -191,6 +191,7 @@ import ConfirmDialog from "../../components/dialog/ConfirmDialog";
import FollowSetting2 from "./components/FollowSetting2";
import Dom from "../../utils/dom";
import ShareToFriend from "./components/ShareToFriend";
import resource from "../../assets/data/resource.js";
export default {
name: "HomeIndex",
@ -218,10 +219,12 @@ export default { @@ -218,10 +219,12 @@ export default {
webVideos: [
{
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
"cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/48e513ae1df94a6cb0e23eabdacfdb64~c5_300x400.webp?from=4257465056_large",
// "cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/48e513ae1df94a6cb0e23eabdacfdb64~c5_300x400.webp?from=4257465056_large",
'cover': 'http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/1/w/375/h/812',
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-p-0015/80e3288d63094603beaaf2f0e1568e19_1577426215?from=4257465056_large",
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/be6a2e67b69646778749e932c6d456b6_1577426215~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459040102120742003404DFC4&biz_tag=feed_cover",
video: 'http://qy9rc9xff.hn-bkt.clouddn.com/0.mp4',
// "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/be6a2e67b69646778749e932c6d456b6_1577426215~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459040102120742003404DFC4&biz_tag=feed_cover",
'origin_cover': 'http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/1/w/375/h/762',
video: 'http://douyin.ttentau.top/0.mp4',
"video_data_size": 26829508,
"duration": 427780,
"desc": "几人到深山探险，发现里面一只动物昆虫都没有，知道原因后都怕了 #看电影",
@ -293,7 +296,7 @@ export default { @@ -293,7 +296,7 @@ export default {
"cover": "https://p3.douyinpic.com/img/tos-cn-p-0015/9208072278a34d01b3836cce1e0fca9a~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p9.douyinpic.com/obj/tos-cn-p-0015/9208072278a34d01b3836cce1e0fca9a?from=4257465056_large",
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/9ecfae1dda2141d19f3e2396d18c4f52_1610439608~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108311440160102120461454502506A&biz_tag=feed_cover",
video: 'http://qy9rc9xff.hn-bkt.clouddn.com/1.mp4',
video: 'http://douyin.ttentau.top/1.mp4',
"video_data_size": 6038796,
"duration": 90927,
"desc": "几分钟看科幻片《寄生异种》 #我的观影报告 #抖音电影",
@ -372,7 +375,7 @@ export default { @@ -372,7 +375,7 @@ export default {
"cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/3d6a0342b7f247ed999a13bd566b360e~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p26.douyinpic.com/obj/tos-cn-p-0015/3d6a0342b7f247ed999a13bd566b360e?from=4257465056_large",
"origin_cover": "https://p5-ipv6.douyinpic.com/tos-cn-p-0015/48891e08b43e47e2a3af9f3945cf941f_1607739586~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108311440220102120691615D029CD1&biz_tag=feed_cover",
video: 'http://qy9rc9xff.hn-bkt.clouddn.com/2.mp4',
video: 'http://douyin.ttentau.top/2.mp4',
"video_data_size": 8996120,
"duration": 118703,
"desc": "美女失去记忆，被囚禁在密室内，没想到逃出去后才是她噩梦的开始 #我的观影报告",
@ -444,7 +447,7 @@ export default { @@ -444,7 +447,7 @@ export default {
"cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/c3bbe172b24844eb8e576a1897e04435~c5_300x400.webp?from=4257465056_large",
"dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/12fc583b6eaa49b4a0086664c8f54a5d?from=4257465056_large",
"origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/e7db9fba822c4d81b4ec4614f5c60cae~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459170102040221632C04B06F&biz_tag=feed_cover",
video: 'http://qy9rc9xff.hn-bkt.clouddn.com/3.mp4',
video: 'http://douyin.ttentau.top/3.mp4',
"video_data_size": 37824020,
"duration": 312474,
"desc": "夫妇二人来到一个诡异小镇，看到一个孩子的手，被吓到了 #看电影 ",
@ -516,7 +519,7 @@ export default { @@ -516,7 +519,7 @@ export default {
"cover": "https://p29.douyinpic.com/img/tos-cn-p-0015/1ce2018b919d49cfbdc380e9b7bc17ce~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/1ce2018b919d49cfbdc380e9b7bc17ce?from=4257465056_large",
"origin_cover": "https://p5-ipv6.douyinpic.com/tos-cn-p-0015/697621dc8ff247aba499fdaedcf172fb_1606272887~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=2021083114402801021219919632028316&biz_tag=feed_cover",
video: 'http://qy9rc9xff.hn-bkt.clouddn.com/4.mp4',
video: 'http://douyin.ttentau.top/4.mp4',
"video_data_size": 12371092,
"duration": 139652,
"desc": "茂密森林中却没有一个动物或昆虫，专家进去研究，被吓得转身就跑 #我的观影报告",
@ -588,7 +591,7 @@ export default { @@ -588,7 +591,7 @@ export default {
"cover": "https://p3.douyinpic.com/img/tos-cn-p-0015/3099e1f9facb4f11a8d07221b39b9ffb_1575186937~c5_300x400.webp?from=4257465056_large",
"dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/f80ce3457bf34f66be9254df9544f9d8_1575186867?from=4257465056_large",
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/af2ef1dd2e864379a7a475b1db005b62_1575186867~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459070102112011425F04ED8F&biz_tag=feed_cover",
video: 'http://qy9rc9xff.hn-bkt.clouddn.com/5.mp4',
video: 'http://douyin.ttentau.top/5.mp4',
"video_data_size": 16916839,
"duration": 384068,
"desc": "男子在沙漠无意中召唤出可怕怪物，怪物的能力让他很绝望 #看电影",
@ -660,7 +663,7 @@ export default { @@ -660,7 +663,7 @@ export default {
"cover": "https://p11.douyinpic.com/img/tos-cn-i-0004/b8d9811844d14f28a5d71b13ea30d89a~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p29.douyinpic.com/obj/tos-cn-i-0004/b8d9811844d14f28a5d71b13ea30d89a?from=4257465056_large",
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/ac6b1eb1b6994ee1a284401f422f4d93_1627866958~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
video: 'http://qy9rc9xff.hn-bkt.clouddn.com/6.mp4',
video: 'http://douyin.ttentau.top/6.mp4',
"video_data_size": 26944285,
"duration": 276000,
"desc": "2100年人口锐减，文明疯狂倒退，现今科技成了神话般的存在 #抖音电影#我的观影报告 ",
@ -732,7 +735,7 @@ export default { @@ -732,7 +735,7 @@ export default {
"cover": "https://p3.douyinpic.com/img/tos-cn-p-0015/bffc96dac41548d99a23e555d2bd3d62~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/bffc96dac41548d99a23e555d2bd3d62?from=4257465056_large",
"origin_cover": "https://p1.douyinpic.com/tos-cn-p-0015/813c7bded67f4e3da0972f85be32eb3f_1608893061~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108311440220102120691615D029CD1&biz_tag=feed_cover",
video: 'http://qy9rc9xff.hn-bkt.clouddn.com/7.mp4',
video: 'http://douyin.ttentau.top/7.mp4',
"video_data_size": 9321536,
"duration": 129583,
"desc": "几分钟看科幻片《登月先锋》 #我的观影报告 #抖音电影",
@ -811,7 +814,7 @@ export default { @@ -811,7 +814,7 @@ export default {
"cover": "https://p9.douyinpic.com/img/tos-cn-p-0015/9f47c686c9224036b82f5c7b147e6119~c5_300x400.webp?from=4257465056_large",
"dynamic_cover": "https://p26.douyinpic.com/obj/tos-cn-p-0015/fde5131f00e54106877d06f775cd21ca_1572239688?from=4257465056_large",
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/8a757ad4df69407f8d0d443eaa0b60a2_1572239690~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459110102112011425F04EF3F&biz_tag=feed_cover",
video: 'http://qy9rc9xff.hn-bkt.clouddn.com/8.mp4',
video: 'http://douyin.ttentau.top/8.mp4',
"video_data_size": 25251313,
"duration": 449263,
"desc": "",
@ -883,7 +886,7 @@ export default { @@ -883,7 +886,7 @@ export default {
"cover": "https://p5-ipv6.douyinpic.com/img/tos-cn-p-0015/1941731e18714268a52855ce869e3092_1572771120~c5_300x400.webp?from=4257465056_large",
"dynamic_cover": "https://p11.douyinpic.com/obj/tos-cn-p-0015/55b40ca5368a49eca282fb868c8fb98b_1572771083?from=4257465056_large",
"origin_cover": "https://p5-ipv6.douyinpic.com/tos-cn-p-0015/cd59468a8d0149aeb5291966004ae4e0_1572771088~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459110102112011425F04EF3F&biz_tag=feed_cover",
video: 'http://qy9rc9xff.hn-bkt.clouddn.com/9.mp4',
video: 'http://douyin.ttentau.top/9.mp4',
"video_data_size": 17839401,
"duration": 262127,
"desc": "灰姑娘被前男友羞辱，霸道总裁看不下去充当男友，瞬间让渣男无地自容#西瓜放映厅",
@ -952,6 +955,7 @@ export default { @@ -952,6 +955,7 @@ export default {
}
],
videos: [],
isCommenting: false,
isSharing: false,
canMove: true,
@ -1031,7 +1035,8 @@ export default { @@ -1031,7 +1035,8 @@ export default {
this.totalSize = 11
// return this.videos = this.$clone(this.localVideos)
// await this.$sleep(200)
return this.videos = this.$clone(this.webVideos)
// return this.videos = this.$clone(this.webVideos)
return this.videos = this.$clone(resource.videos)
}
this.loading = true
let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})

Write Preview
Loading…
Cancel
Save