豆包多组连环画漫画旁白如何自动采集生成json数组？
网友回复
下面的代码可以实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频合并预览工具</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
color: #333;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #2c3e50;
}
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.upload-section {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.upload-btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.upload-btn:hover {
background-color: #2980b9;
}
.preview-section {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.video-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
background-color: #000;
border-radius: 8px;
overflow: hidden;
}
#previewVideo {
width: 100%;
display: block;
}
.timeline-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
.timeline {
width: 100%;
min-height: 100px;
background-color: #ecf0f1;
border-radius: 4px;
padding: 10px;
display: flex;
gap: 5px;
overflow-x: auto;
position: relative;
}
.timeline-indicator {
position: absolute;
width: 2px;
height: 100%;
background-color: red;
top: 0;
left: 0;
pointer-events: none;
z-index: 10;
}
.video-clip {
min-width: 120px;
height: 80px;
background-color: #3498db;
border-radius: 4px;
display: flex;
flex-direction: column;
padding: 5px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.video-clip.active {
border: 2px solid #e74c3c;
}
.video-clip-thumbnail {
width: 100%;
height: 50px;
background-color: #2c3e50;
border-radius: 2px;
overflow: hidden;
}
.video-clip-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-clip-title {
margin-top: 5px;
font-size: 12px;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.video-clip-duration {
position: absolute;
bottom: 5px;
right: 5px;
font-size: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 2px 4px;
border-radius: 2px;
}
.controls {
display: flex;
gap: 10px;
margin-top: 10px;
justify-content: center;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
.timeline-scrubber {
width: 100%;
margin-top: 10px;
}
#timelineScrubber {
width: 100%;
}
.video-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.video-item {
background-color: #ecf0f1;
padding: 10px;
border-radius: 4px;
width: calc(33.33% - 10px);
min-width: 200px;
display: flex;
align-items: center;
gap: 10px;
}
.video-item-thumbnail {
width: 80px;
height: 60px;
background-color: #2c3e50;
border-radius: 4px;
overflow: hidden;
}
.video-item-thumbnail video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-item-info {
flex: 1;
}
.video-item-title {
font-weight: bold;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.video-item-actions {
display: flex;
gap: 5px;
}
.add-to-timeline-btn {
background-color: #2ecc71;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.3s;
}
.add-to-timeline-btn:hover {
background-color: #27ae60;
}
.remove-btn {
background-color: #e74c3c;
}
.remove-btn:hover {
background-color: #c0392b;
}
/* 响应式设计 */
@media (max-width: 768px) {
.video-item {
width: 100%;
}
.upload-section, .preview-section, .timeline-container {
padding: 15px;
}
.video-clip {
min-width: 100px;
}
}
</style>
</head>
<body>
<h1>视频合并预览工具</h1>
<div class="container">
<div class="upload-section">
<input type="file" id="videoInput" accept="video/*" multiple style="display: none;">
<button class="upload-btn" id="uploadBtn">选择视频文件</button>
<div class="video-list" id="videoList">
<!-- 上传的视频将在此显示 -->
</div>
</div>
<div class="timeline-container">
<h2>时间轴</h2>
<div class="timeline" id="timeline">
<div class="timeline-indicator" id="timelineIndicator"></div>
<!-- 时间轴上的视频片段将在此显示 -->
</div>
<div class="timeline-scrubber">
<input type="range" id="timelineScrubber" min="0" max="100" value="0" step="0.1">
</div>
<div class="controls">
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<button id="clearTimelineBtn" class="remove-btn">清空时间轴</button>
</div>
</div>
<div class="preview-section">
<h2>预览</h2>
<div class="video-container">
<video id="previewVideo" controls></video>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取DOM元素
const videoInput = document.getElementById('videoInput');
const uploadBtn = document.getElementById('uploadBtn');
const videoList = document.getElementById('videoList');
const time...点击查看剩余70%
by 钱端世界
我知道答案，我要回答
私活外包
最新提问
