134 lines
4.9 KiB
Plaintext
134 lines
4.9 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];
|
|
<div class="knowDiv">
|
|
|
|
<div class="knowTtile">
|
|
<div style="cursor: pointer" onclick="spClick(@i,this)">
|
|
<div class="knowTtileTheme">@getF(item) @item.Theme</div>
|
|
<span class="kSpan">#@item.KnowPointId @item.KnowPoint</span>
|
|
</div>
|
|
<div>概览: @item.Content</div>
|
|
<br />
|
|
@foreach (var q in item.QuestionArr)
|
|
{
|
|
|
|
<div class="knowQuestion" onclick="spClickTime(@q.StartTime)">
|
|
<h3>问题: <span class="kSpan">@q.StartTime 秒</span></h3>
|
|
<div class="kSpan">@q.TopicStem</div>
|
|
<div >@q.Question</div>
|
|
<img style="text-align:center" src="@q.ImageUrl" width="320" height="180" />
|
|
</div>
|
|
<br />
|
|
}
|
|
<br />
|
|
<br />
|
|
|
|
</div>
|
|
<button class="kBtn" >
|
|
<span>@getF(item) @item.Theme</span>
|
|
<br /><span class="kSpan textEllipsis">#@item.KnowPointId @item.KnowPoint</span>
|
|
</button>
|
|
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
<video id="videoPlayer" controls autoplay>
|
|
<source type="video/mp4" />
|
|
</video>
|
|
<div id="subtitleArea" class="subtitles"></div>
|
|
|
|
<div id="subtitleArea1" class="subtitles" style="
|
|
bottom: 101px;
|
|
background-color: rgb(99 129 103 / 50%);
|
|
"></div>
|
|
|
|
</div>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" crossorigin="anonymous"></script>
|
|
|
|
<script>
|
|
MathJax = {
|
|
tex: {
|
|
inlineMath: [['$', '$'], ['\(', '\)']],
|
|
displayMath: [['$$', '$$'], ['\[', '\]']]
|
|
}
|
|
};
|
|
window.b = []
|
|
window.subtitles = []
|
|
window.subtitles1 = []
|
|
var displayButton = []
|
|
var lastSegments = null;
|
|
function init() {
|
|
const videoPlayer = document.getElementById('videoPlayer');
|
|
const subtitleArea = document.getElementById('subtitleArea');
|
|
const subtitleArea1 = document.getElementById('subtitleArea1');
|
|
//视频时间变化时
|
|
videoPlayer.addEventListener('timeupdate', function () {
|
|
if (displayButton.length == 0) initKD()
|
|
const currentTime = videoPlayer.currentTime;
|
|
subtitleArea.textContent = '';
|
|
subtitleArea1.textContent = '';
|
|
//字幕
|
|
window.subtitles.forEach(subtitle => {
|
|
let textContent = subtitle.text
|
|
if (currentTime >= subtitle.start
|
|
&& currentTime <= subtitle.end
|
|
&& subtitleArea.textContent != textContent) {
|
|
subtitleArea.textContent = textContent;
|
|
subtitleArea1.textContent = window.subtitles1[window.subtitles.indexOf(subtitle)].text;
|
|
}
|
|
});
|
|
//时间片
|
|
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,a1, b,c) {
|
|
console.log("setDB", a1,a, b, c)
|
|
window.subtitles = a
|
|
window.subtitles1 = a1
|
|
window.b = b
|
|
const videoPlayer = document.getElementById('videoPlayer');
|
|
videoPlayer.src = c
|
|
init()
|
|
}
|
|
//点击时间片时
|
|
function spClick(i, button) {
|
|
videoPlayer.currentTime = displayButton[i].startTime;
|
|
}
|
|
function spClickTime(startTime) {
|
|
videoPlayer.currentTime = 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>
|