Question

我有一个html5视频播放器，在此视频的底部我想在特定时间范围内显示问题。例如，从0秒到2秒它的问题1，从2秒到4秒它问题2 ......

我设法在特定时间码更改DOM元素的内容。我非常接近我想要的东西。但是我的方法存在一些错误：

var interval = setInterval(myFunction, 10);

function myFunction() {
  if (Math.floor(vid.currentTime) == 2) {
    document.getElementById("demo").innerHTML = '<i>de 2 à 4 secondes</i><br><br><input type="checkbox" name="answer3" value="answer3"> answer 3<br><input type="checkbox" name="answer4" value="answer4"> answer 4<br>';
  }
}

如果您在更改后单击右键，则重置复选框。还有其他方法吗？或者我应该使用另一个图书馆？

这是我的例子： https://jsfiddle.net/5stLf6f9/28/

Answer 1

代码的问题是因为在间隔触发时你立即覆盖了#demo div的HTML内容。因此，任何选择都会立即被新创建的input元素覆盖。

要解决此问题，您可以存储上次更新HTML的时间，并仅在新时间码边界被点击时更改内容。您还可以通过将HTML放在数组中并对时间代码进行一些简单的数学运算来计算出要显示的数组索引，从而简化逻辑。您还可以使用timeupdate事件，而不是每10毫秒轮询一次视频属性。试试这个：

var video = document.getElementById('myVideo'),
  demo = document.getElementById('demo')

video.addEventListener('timeupdate', setQuestions);
video.addEventListener('ended', function() {
  demo.textContent = 'Done!';
});

var questionData = [
  '<i>de 0 à 2 secondes</i><br><br><input type="checkbox" name="answer1" value="answer1"> answer 1<br><input type="checkbox" name="answer2" value="answer2"> answer 2<br>',
  '<i>de 2 à 4 secondes</i><br><br><input type="checkbox" name="answer3" value="answer3"> answer 3<br><input type="checkbox" name="answer4" value="answer4"> answer 4<br>',
  '<i>de 4 à 6 seconde</i>s<br><br><input type="checkbox" name="answer5" value="answer5"> answer 4<br><input type="checkbox" name="answer6" value="answer6"> answer 5<br>',
  '<i>plus de 6 secondes</i><br><br><input type="checkbox" name="answer7" value="answer7">  answer 6<br><input type="checkbox" name="answer8" value="answer8"> answer 7<br>'
]

function setQuestions() {
  var index = Math.floor(video.currentTime / 2);
  if (video.dataset.lastIndex != index) {
    demo.innerHTML = questionData[index] || questionData[questionData.length - 1];
    video.dataset.lastIndex = index;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myVideo" width="320" height="176" controls>
    <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video.
</video>

<p>
  <span id="demo"></span>
</p>

更改html5视频的特定视频时间码的html内容

1 个答案: