修改短视频播放处理
于肖磊
parent
55e2479ac9
commit
3fd5468ee1
|
|
@ -21,8 +21,14 @@
|
||||||
<view class="video-bg" :style="!isEmpty(video_item.poster_url) ? 'background-image: url(' + video_item.poster_url + ')' : ''"></view>
|
<view class="video-bg" :style="!isEmpty(video_item.poster_url) ? 'background-image: url(' + video_item.poster_url + ')' : ''"></view>
|
||||||
|
|
||||||
<video class="video" :src="video_item.video_url" :poster="video_item.poster_url" :id="`video_${index}`" :loop="true" :show-fullscreen-btn="false" :show-center-play-btn="false" :show-play-btn="false" :controls="true" :show-mute-btn="true" object-fit="contain" @timeupdate="handle_time_update"></video>
|
<video class="video" :src="video_item.video_url" :poster="video_item.poster_url" :id="`video_${index}`" :loop="true" :show-fullscreen-btn="false" :show-center-play-btn="false" :show-play-btn="false" :controls="true" :show-mute-btn="true" object-fit="contain" @timeupdate="handle_time_update"></video>
|
||||||
|
|
||||||
<view v-if="paused && current_index === index" class="play-icon">
|
<view v-if="paused && current_index === index" class="play-icon">
|
||||||
<text>▶</text>
|
<view class="pr">
|
||||||
|
<view class="play-icon-bg"></view>
|
||||||
|
<view class="pa z-i play-icon-iconfont">
|
||||||
|
<iconfont name="icon-bofang" size="120rpx" propClass="" color="#4F3E35"></iconfont>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<template v-if="!show_comment_modal">
|
<template v-if="!show_comment_modal">
|
||||||
|
|
@ -338,7 +344,18 @@
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (this.video_contexts[0]) { // 当前播放的视频索引为0
|
if (this.video_contexts[0]) { // 当前播放的视频索引为0
|
||||||
this.video_contexts[0].play();
|
console.log(this.video_contexts[0]);
|
||||||
|
// try {
|
||||||
|
this.video_contexts[0].play().catch(error => {
|
||||||
|
this.setData({
|
||||||
|
paused: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// } catch (error) {
|
||||||
|
// this.setData({
|
||||||
|
// paused: true,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
}, 200);
|
}, 200);
|
||||||
}, 0);
|
}, 0);
|
||||||
|
|
@ -862,12 +879,22 @@
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
font-size: 80rpx;
|
.play-icon-bg {
|
||||||
color: rgba(255, 255, 255, 0.6);
|
position: absolute;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
top: 50%;
|
||||||
width: 120rpx;
|
left: 50%;
|
||||||
height: 120rpx;
|
transform: translate(-50%, -50%);
|
||||||
border-radius: 50%;
|
background: #fff;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.play-icon-iconfont {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-actions {
|
.right-actions {
|
||||||
|
|
|
||||||
|
|
@ -1,191 +0,0 @@
|
||||||
[
|
|
||||||
{
|
|
||||||
"id": "1",
|
|
||||||
"isFabulous": 1,
|
|
||||||
"userNick": "WX: MAMBA_4EVER24",
|
|
||||||
"videoContent": "第一条视频",
|
|
||||||
"fabulous_count": 1,
|
|
||||||
"videoUrl": "http://8.146.211.120:8080/upload/douyin/e6fddef474951cc15f5aeb99219b4a91.mp4",
|
|
||||||
"poster_url": "http://8.146.211.120:8080/upload/notes/ce5082f76cc9bd82a2bd97ce8b45ea32.jpg",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/8f5ebdab07f9fb592895bd3f0f230ea9.jpg",
|
|
||||||
"comment_obj": {
|
|
||||||
"count": 2,
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"id": "c1",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/b11b2d741a5132b0d733a9861c9f6c7c.jpg",
|
|
||||||
"userNick": "评论员A",
|
|
||||||
"content": "这视频太酷了！",
|
|
||||||
"time": "2024-07-07 10:00:00"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "c2",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/590118acb7cda2039657d464fdc285d6.jpg",
|
|
||||||
"userNick": "评论员B",
|
|
||||||
"content": "沙发！",
|
|
||||||
"time": "2024-07-07 09:30:00"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "c3",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/590118acb7cda2039657d464fdc285d6.jpg",
|
|
||||||
"userNick": "评论员B",
|
|
||||||
"content": "沙发！",
|
|
||||||
"time": "2024-07-07 09:30:00"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "c4",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/590118acb7cda2039657d464fdc285d6.jpg",
|
|
||||||
"userNick": "评论员B",
|
|
||||||
"content": "沙发！",
|
|
||||||
"time": "2024-07-07 09:30:00"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "2",
|
|
||||||
"isFabulous": 0,
|
|
||||||
"userNick": "WX: MAMBA_4EVER24",
|
|
||||||
"videoContent": "第二条视频",
|
|
||||||
"fabulous_count": 1,
|
|
||||||
"videoUrl": "http://8.146.211.120:8080/upload/douyin/0985b0f3879c7dca9f6c1c6fb59d4a79.mp4",
|
|
||||||
"poster_url": "http://8.146.211.120:8080/upload/background/dab42015a50709f68a75306a572aaaca.jpg",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/background/735feb718119ea7e5f206be7b4410dd6.jpg",
|
|
||||||
"comment_obj": {
|
|
||||||
"count": 0,
|
|
||||||
"list": []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "3",
|
|
||||||
"isFabulous": 1,
|
|
||||||
"userNick": "WX: MAMBA_4EVER24",
|
|
||||||
"videoContent": "第三条视频内容",
|
|
||||||
"fabulous_count": 1,
|
|
||||||
"videoUrl": "http://8.146.211.120:8080/upload/douyin/a4832a9a37b44196b49c646db148ec65.mp4",
|
|
||||||
"poster_url": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/b11b2d741a5132b0d733a9861c9f6c7c.jpg",
|
|
||||||
"comment_obj": {
|
|
||||||
"count": 1,
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"id": "c3",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/701eb0ea365754a9d61778a787b27a49.jpg",
|
|
||||||
"userNick": "评论员C",
|
|
||||||
"content": "有趣！",
|
|
||||||
"time": "2024-07-07 11:00:00"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "4",
|
|
||||||
"isFabulous": 1,
|
|
||||||
"userNick": "WX: MAMBA_4EVER24",
|
|
||||||
"videoContent": "第四条视频内容",
|
|
||||||
"fabulous_count": 1,
|
|
||||||
"videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267725487534.mp4",
|
|
||||||
"poster_url": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/b11b2d741a5132b0d733a9861c9f6c7c.jpg",
|
|
||||||
"comment_obj": {
|
|
||||||
"count": 1,
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"id": "c3",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/701eb0ea365754a9d61778a787b27a49.jpg",
|
|
||||||
"userNick": "评论员C",
|
|
||||||
"content": "有趣！",
|
|
||||||
"time": "2024-07-07 11:00:00"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "5",
|
|
||||||
"isFabulous": 1,
|
|
||||||
"userNick": "WX: MAMBA_4EVER24",
|
|
||||||
"videoContent": "第五条视频内容",
|
|
||||||
"fabulous_count": 1,
|
|
||||||
"videoUrl": "http://shopxo.com/static/upload/video/goods/2019/01/14/1547458876723311.mp4",
|
|
||||||
"poster_url": "",
|
|
||||||
"userHead": "",
|
|
||||||
"comment_obj": {
|
|
||||||
"count": 1,
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"id": "c3",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/701eb0ea365754a9d61778a787b27a49.jpg",
|
|
||||||
"userNick": "评论员C",
|
|
||||||
"content": "有趣！",
|
|
||||||
"time": "2024-07-07 11:00:00"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "6",
|
|
||||||
"isFabulous": 1,
|
|
||||||
"userNick": "WX: MAMBA_4EVER24",
|
|
||||||
"videoContent": "第六条视频内容",
|
|
||||||
"fabulous_count": 1,
|
|
||||||
"videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267246598639.mp4",
|
|
||||||
"poster_url": "",
|
|
||||||
"userHead": "",
|
|
||||||
"comment_obj": {
|
|
||||||
"count": 1,
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"id": "c3",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/701eb0ea365754a9d61778a787b27a49.jpg",
|
|
||||||
"userNick": "评论员C",
|
|
||||||
"content": "有趣！",
|
|
||||||
"time": "2024-07-07 11:00:00"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "7",
|
|
||||||
"isFabulous": 1,
|
|
||||||
"userNick": "WX: MAMBA_4EVER24",
|
|
||||||
"videoContent": "第七条视频内容",
|
|
||||||
"fabulous_count": 1,
|
|
||||||
"videoUrl": "http://8.146.211.120:8080/upload/douyin/a4832a9a37b44196b49c646db148ec65.mp4",
|
|
||||||
"poster_url": "",
|
|
||||||
"userHead": "",
|
|
||||||
"comment_obj": {
|
|
||||||
"count": 1,
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"id": "c3",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/701eb0ea365754a9d61778a787b27a49.jpg",
|
|
||||||
"userNick": "评论员C",
|
|
||||||
"content": "有趣！",
|
|
||||||
"time": "2024-07-07 11:00:00"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "8",
|
|
||||||
"isFabulous": 1,
|
|
||||||
"userNick": "WX: MAMBA_4EVER24",
|
|
||||||
"videoContent": "第八条视频内容",
|
|
||||||
"fabulous_count": 1,
|
|
||||||
"videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267725487534.mp4",
|
|
||||||
"poster_url": "",
|
|
||||||
"userHead": "",
|
|
||||||
"comment_obj": {
|
|
||||||
"count": 1,
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"id": "c3",
|
|
||||||
"userHead": "http://8.146.211.120:8080/upload/notes/701eb0ea365754a9d61778a787b27a49.jpg",
|
|
||||||
"userNick": "评论员C",
|
|
||||||
"content": "有趣！",
|
|
||||||
"time": "2024-07-07 11:00:00"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
Loading…
Reference in New Issue