我创建了一个带有字幕的html5视频播放器。现在我希望用户能够按提交，并且该特定时间戳的字幕文本应该转到数据库。 我尝试了几种方法，但没有一种方法对我有用，因为我什至无法在特定时间戳获取字幕文本。
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
//here the value is stored in variable.
var x = document.getElementById("subt").getAttribute('value') ;
document.getElementById("demo").innerHTML = x;
});
});
</script>
<body>
<section>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="400" height="268"
data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4'>
<track src='https://html5-demos.appspot.com/static/video/track/video-subtitles-en.vtt' kind="subtitles" srclang="en" label="English" default>
</video>
<form>
<div >
<input type="hidden" id="hidden-sub" />
<div id="subt">test1
<button>
Get the value of the input field
</button>
<p id="demo"></p>
</div>
<div>asdf2</div>
</div>
</form>
</section>
<script>
if (!document.createElement('track').track) {
alert('<track is not available in your browser.');
}
var video = document.querySelector('video');
var span1 = document.querySelector('section > div :first-child');
var span2 = document.querySelector('section > div :last-of-type');
var track = video.textTracks[0];
track.mode = 'hidden';
console.log(track);
var idx = 0;
track.oncuechange = function(e) {
var cue = this.activeCues[0];
//EDIT//
$('#demo').text(cue.text);
$('#hidden-sub').val(cue.text);
if (cue) {
if (idx == 0) {
span2.className = '';
span1.classList.remove('on');
span1.innerHTML = '';
span1.appendChild(cue.getCueAsHTML());
span1.classList.add('on');
} else {
span1.className = '';
span2.classList.remove('on');
span2.innerHTML = '';
span2.appendChild(cue.getCueAsHTML());
span2.classList.add('on');
}
idx = ++idx % 2;
}
};
</script>
</body>
</html>
我可以看到字幕，但是当我单击提交时，提交按钮没有获取文本。它会重新开始播放视频，而不会获取字幕文本。 至少它应该获取文本并显示"已提交以下文本'1234'">
您可以在 from 中使用隐藏的输入字段，并将字幕文本设置为其值。发件人可能看起来像这样
<form>
<div >
<input type="hidden" id="hidden-sub" />
<div id="subt">test1
<button>
Get the value of the input field
</button>
<p id="demo"></p>
</div>
<div>asdf2</div>
</div>
</form>
在跟踪更改方法中，您可以更新输入字段值
track.oncuechange = function(e) {
var cue = this.activeCues[0];
// console.log(cue);
$('#demo').text(cue.text);
$('#hidden-sub').val(cue.text);
//rest of your code
//----
};
如果要在特定时间内更新此值，可以执行以下操作
track.oncuechange = function(e) {
var cue = this.activeCues[0];
// console.log(cue);
if (cue.startTime == '2.935') {
$('#demo').text(cue.text);
$('#hidden-sub').val(cue.text);
}
};