Как передать динамическое текстовое значение субтитров в базу данных из html5 video player - PullRequest
Новая
       4

Как передать динамическое текстовое значение субтитров в базу данных из html5 video player

0 голосов
/ 26 сентября 2019

Я создал 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 »был отправлен»

1 Ответ

0 голосов
/ 26 сентября 2019

Вы можете использовать скрытое поле ввода внутри вашего from и установить текст субтитров в качестве его значения.Значение 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);
 }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...