81 lines
2.5 KiB
Plaintext
81 lines
2.5 KiB
Plaintext
@page "/VideoTaskShow/{tid}"
|
|
<div>
|
|
<input type="file" id="videoFile" accept="video/*">
|
|
<input type="file" id="subtitleFile" accept=".json">
|
|
<input type="file" id="segmentsFile" accept=".json">
|
|
</div>
|
|
|
|
<div id="video-container">
|
|
<video id="videoPlayer" controls></video>
|
|
<div id="subtitleArea" class="subtitles"></div>
|
|
</div>
|
|
|
|
<div id="segmentsContainer"></div>
|
|
|
|
<script>
|
|
const
|
|
const videoPlayer = document.getElementById('videoPlayer');
|
|
const subtitleArea = document.getElementById('subtitleArea');
|
|
|
|
|
|
let subtitles = @captionsArr
|
|
let segments = @videoKnows
|
|
let displayButton = []
|
|
let lastSegments = null;
|
|
window.onload(() => {
|
|
videoPlayer.src = @videoPath
|
|
})
|
|
|
|
|
|
videoPlayer.addEventListener('timeupdate', function () {
|
|
const currentTime = videoPlayer.currentTime;
|
|
subtitleArea.textContent = '';
|
|
|
|
subtitles.forEach(subtitle => {
|
|
|
|
let textContent = subtitle.Text || subtitle.Content;
|
|
if (currentTime >= subtitle.Start
|
|
&& currentTime <= subtitle.End
|
|
&& subtitleArea.textContent != textContent) {
|
|
|
|
subtitleArea.textContent = textContent;
|
|
}
|
|
});
|
|
let segment = displayButton.find(s => currentTime >= s.开始秒
|
|
&& currentTime <= s.结束秒)
|
|
if (segment) {
|
|
segment.button.style.backgroundColor = "rgb(238, 200, 118)";
|
|
if (lastSegments && lastSegments != segment) lastSegments.button.style.backgroundColor = "rgb(240, 249, 235)";
|
|
lastSegments = segment
|
|
}
|
|
});
|
|
function getF(segment) {
|
|
let sf = parseInt(segment.开始秒 / 60)
|
|
let sm = parseInt(segment.开始秒 % 60)
|
|
let ef = parseInt(segment.结束秒 / 60)
|
|
let em = parseInt(segment.结束秒 % 60)
|
|
return `${sf}:${sm} - ${ef}:${em}`
|
|
}
|
|
function displaySegments() {
|
|
const segmentsContainer = document.getElementById('segmentsContainer');
|
|
segmentsContainer.innerHTML = '';
|
|
segments.forEach(segment => {
|
|
const button = document.createElement('button');
|
|
displayButton.push(segment);
|
|
segment.button = button;
|
|
button.textContent =
|
|
`${getF(segment)} ${segment.主题}`;
|
|
button.addEventListener('click', () => {
|
|
videoPlayer.currentTime = segment.开始秒;
|
|
videoPlayer.play();
|
|
});
|
|
segmentsContainer.appendChild(button);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
|
|
@code {
|
|
|
|
}
|