查找与视频 currentTime 相关的文本行并使用 javascript 突出显示它?

问题描述

我的目标是有一些文本，当嵌入视频的 currentTime 位于开始和结束标记之间时，使用 JavaScript 更改文本的颜色.我有一些文本如下，使用 JavaScript 循环浏览它并读取开始和结束标签的最佳方法是什么?

<h3>成绩单</h3><p class="tran"><span tag="ID_1" start="0" end="6">成绩单行#1</span><span tag="ID_2" start="6" end="9">转录线#2</span></p>

使用教程我设法隐藏文本并将其显示为标题，但我真正想做的是显示全文并突出显示当前部分.使用下面这样的东西.

 for (var i = 0; i 

我不确定 document.getElementById(transcript) 是否可以用于获取所有数据.任何帮助将非常感激.谢谢！

解决方案

你可以这样做:

var lines = document.getElementById("transcript").getElementsByTagName("span");现在无功 = 4;for (var i = 0, l = lines.length; i < l; i++) {if (now >= +lines[i].getAttribute("start") &&现在 <= +lines[i].getAttribute("end")) {线条[i].style.color = "红色";休息;}}

你可以在这里测试//但由于我们使用了无效的属性，还不如使用 HTML5 有效的 data- 属性(例如 data-start 而不是 start)，我也会使用一个类来设置样式，像这样:

for (var i = 0, l = lines.length; i < l; i++) {if (now >= +lines[i].getAttribute("data-start") &&现在 <= +lines[i].getAttribute("data-end")) {行[i].className =当前"；} 别的 {行 [i].className = "";}}

您可以在此处测试该版本，它使您可以更轻松地设置样式只需更改 CSS 中的 .current 类即可跨越.此外，随着视频的播放，这将清除先前选定元素的样式，获得您所追求的当前行"效果.

What I aim to do is have some text and using JavaScript change the colour of the text when the currentTime of the embedded video is between the start and end tags. I have some text as below, what is the best way, using JavaScript, to cycle through it and read the start and end tags?

<div id="transcript">
<h3>Transcript</h3>
<p class="tran">
<span tag="ID_1" start="0" end="6">transcript line #1</span>
<span tag="ID_2" start="6" end="9"> transcript line #2</span>
</p>
</div>

Using tutorials I have managed to hide text and show it as captions, but what I really want to do is show the full text and just highlight the current part. Using something like this below.

 for (var i = 0; i < transcriptlength; i++) {
 if (now >= tran.start && now <= tran.end){
 span.style.color = red; //
 break;
 }}

I'm not sure if document.getElementById(transcript) would work in getting all the data.Any help would be much appreciated.Thanks!

解决方案

You could do what you're after like this:

var lines = document.getElementById("transcript").getElementsByTagName("span");
var now = 4;

for (var i = 0, l = lines.length; i < l; i++) {
  if (now >= +lines[i].getAttribute("start") &&
      now <= +lines[i].getAttribute("end")) {
    lines[i].style.color = "red";
    break;
  }
}

You can test it here///but since we're using invalid attributes, might as well use HTML5 valid data- attributes (e.g. data-start instead of start), and I'd also use a class for styling, like this:

for (var i = 0, l = lines.length; i < l; i++) {
  if (now >= +lines[i].getAttribute("data-start") &&
      now <= +lines[i].getAttribute("data-end")) {
    lines[i].className = "current";
  } else {
    lines[i].className = "";
  }
}

You can test that version here, it allows you to more easily style that span by simply changing the .current class in the CSS. Also, as the video progresses, this will clear the styling from the previously selected element, getting the "current line" effect you're after.

这篇关于查找与视频 currentTime 相关的文本行并使用 javascript 突出显示它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！