修改短视频播放处理
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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<template v-if="!show_comment_modal">
|
||||
|
|
@ -338,7 +344,18 @@
|
|||
|
||||
setTimeout(() => {
|
||||
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);
|
||||
}, 0);
|
||||
|
|
@ -862,12 +879,22 @@
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
font-size: 80rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
.play-icon-bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -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 {
|
||||
|
|
|
|||
|
|
@ -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