88 lines
3.0 KiB
Plaintext
88 lines
3.0 KiB
Plaintext
@page "/VideoTaskShow/{taskId:long}"
|
|
|
|
<div id="video-container">
|
|
@if (videoKnows != null)
|
|
{
|
|
<div id="segmentsContainer" class="sc">
|
|
|
|
<h2>
|
|
<button class="gudingBtn" onclick="gd(this)">🔒</button>
|
|
@nowTask.MediaName</h2>
|
|
@for (int i = 0; i < videoKnows.Length; i++)
|
|
{
|
|
var item = videoKnows[i];
|
|
<button class="kBtn" onclick="spClick(@i,this)" title="@item.Content">
|
|
<span>@getF(item) @item.Theme</span>
|
|
<br /><span class="kSpan">#@item.KnowPointId @item.KnowPoint</span></button>
|
|
}
|
|
</div>
|
|
}
|
|
<video id="videoPlayer" controls autoplay>
|
|
<source type="video/mp4" />
|
|
</video>
|
|
<div id="subtitleArea" class="subtitles"></div>
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
window.b = []
|
|
window.subtitles = []
|
|
var displayButton = []
|
|
var lastSegments = null;
|
|
function init() {
|
|
const videoPlayer = document.getElementById('videoPlayer');
|
|
const subtitleArea = document.getElementById('subtitleArea');
|
|
//视频时间变化时
|
|
videoPlayer.addEventListener('timeupdate', function () {
|
|
if (displayButton.length == 0) initKD()
|
|
const currentTime = videoPlayer.currentTime;
|
|
subtitleArea.textContent = '';
|
|
//字幕
|
|
window.subtitles.forEach(subtitle => {
|
|
let textContent = subtitle.text
|
|
if (currentTime >= subtitle.start
|
|
&& currentTime <= subtitle.end
|
|
&& subtitleArea.textContent != textContent) {
|
|
subtitleArea.textContent = textContent;
|
|
}
|
|
});
|
|
//时间片
|
|
let segment = displayButton.findLast(s => currentTime >= s.startTime)
|
|
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 initKD() {
|
|
let btns = document.getElementsByClassName("kBtn")
|
|
if(btns.length == 0) return
|
|
displayButton = window.b.map((s, i) => { return { ...s, button: btns[i] } })
|
|
}
|
|
//后端传递初始化数据
|
|
function setDB(a, b,c) {
|
|
console.log("setDB", a, b,c)
|
|
window.subtitles = a
|
|
window.b = b
|
|
const videoPlayer = document.getElementById('videoPlayer');
|
|
videoPlayer.src = c
|
|
init()
|
|
}
|
|
//点击时间片时
|
|
function spClick(i, button) {
|
|
videoPlayer.currentTime = displayButton[i].startTime;
|
|
}
|
|
function gd(btn) {
|
|
let e = btn.parentElement.parentElement
|
|
if (e.style.right == "0px") {
|
|
btn.innerHTML = "🔒"
|
|
e.style.right = "-300px"
|
|
} else {
|
|
e.style.right = "0px"
|
|
btn.innerHTML = "🔓"
|
|
}
|
|
}
|
|
</script>
|