如何将动态字幕文本值从html5视频播放器传递到数据库 [英] How to pass a dynamic subtitle text value to a database from html5 video player
问题描述
我创建了带有字幕的html5视频播放器.现在，我希望用户能够按提交"，并且该特定时间戳记下的字幕文本应该进入数据库. 我尝试了几种方法，但没有一种对我有用，因为我什至无法在特定时间戳下获取字幕文本.
Ive created a html5 video player with subtitle. Now I want the user to be able to press submit and the subtitle text at that particular timestamp should go to a database. I tried several ways but none of them are working for me as Im unable to even fetch the subtitle text at a particular timestamp.
<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'已提交"
I can see the subtitles, but the submit button isnt fetching the text when i click submit. It restarts playing the video with no subtitle text being fetched. Atleast it should fetch the text and show "The following text '1234' has been submitted"
推荐答案
您可以在from内使用隐藏的输入字段，并将字幕文本设置为其值. from可能看起来像这样
You can use a hidden input field inside your from and set subtitle text as its value. The from might look something like this
<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>
在跟踪更改方法上，您可以更新输入字段值
And on track change method you can update the input field value
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
//----
};
如果您想在特定时间内更新此值，可以执行以下操作
If you want to update this value for a specific time you can do something like this
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);
}
};
这篇关于如何将动态字幕文本值从html5视频播放器传递到数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
