当嵌入式视频到达特定位置时,使用JavaScript突出显示文本

dan_vn

我有一个页面,其中包含较长的嵌入式视频和带有标题的部分标题,这些按钮使用户可以跳至视频中的特定时间。当视频时间达到相关时间戳时,我希望能够突出显示下一个标题。

<body>
    <div class="wrapper">
        <table class="toc" width="400">
            <tbody>
                <tr>
                    <td>1.1 Course Introduction</td>
                    <td><button class="playbutton" onclick="Section11()" type="button">
                        </button></td>
                </tr>
                <tr>
                    <td>1.2 Introduction to the Software</td>
                    <td><button class="playbutton" onclick="Section12()" type="button">
                        </button></td>
                </tr>
            </tbody>
        </table>
        <video id="myvideo" width="1160" height="100%" controls>
            <source src="SW101.mp4" type="video/mp4">
        </video>
    </div>
</body>
<script>
    var vid = document.getElementById("myvideo");
    function Section11() {
        vid.currentTime = 0;
        vid.play();
    }
    function Section12() {
        vid.currentTime = 312;
        vid.play();
    } 
</script>
干弗洛林

这是您想要的工作版本,您基本上可以听视频上的按时更新事件,如果当前时间超过您在章节对象中定义的某个阈值,则添加一个类。

var vid = document.getElementById("myvideo");
const wrapper = document.querySelector('.wrapper')
const chapters = {
  0: wrapper.querySelector('[data-chapter="1"]'),
  5: wrapper.querySelector('[data-chapter="2"]')
}

vid.addEventListener('timeupdate', (event) => {
  let currentChapter = null
  for (let chapter in chapters) {
    if (chapter < vid.currentTime) {
      //search for the latest chapter to the current time
      currentChapter = chapter
    }

  }
  wrapper.querySelectorAll('.highlighted').forEach(ele => {
    ele.classList.remove('highlighted')
  })
  chapters[currentChapter].classList.add('highlighted')
})
.highlighted {
  color: red;
}
<body>
  <div class="wrapper">
    <table class="toc" width="400">
      <tbody>
        <tr>
          <td data-chapter="1">1.1 Course Introduction</td>
          <td><button class="playbutton" onclick="Section11()" type="button"> 
</button></td>
        </tr>
        <tr>
          <td data-chapter="2">1.2 Introduction to SuccessFactors</td>
          <td><button class="playbutton" onclick="Section12()" type="button"> 
</button></td>
        </tr>
      </tbody>
    </table>
    <video id="myvideo" width="1160" height="100%" controls>
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
  </div>
</body>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

加载时在特定位置启动HTML5视频?

eclipse 2020-06语法突出显示无法与php或html文件中的嵌入式javascript一起使用

将嵌入式地图(谷歌地图)的中心设置到特定位置

如何使用Jquery选择嵌入式文本?

Angular Bootstrap DateTimePicker-在嵌入式日历上突出显示Today Date

Atom编辑器和嵌入式Perl:语法突出显示

如何恢复嵌入式YouTube视频?

尝试使用嵌入式JDK而非自定义安装时,Android Studio显示错误

使用嵌入式Firebird时,删除表失败并显示“元数据更新失败”

如何使用$ .each在JSON中显示嵌入式数组?

为什么我不能显示YouTube Live流中的嵌入式视频?

使用BeautifulSoup提取带有嵌入式链接的文本

创建嵌入式视图时未显示图标

Vue.js,未显示嵌入式Facebook视频

嵌入式视频无法以模式打开

PHP文件中嵌入式SQL的Notepad ++语法突出显示

CSS仅在需要时截断嵌入式文本

使用JavaScript在HTML选择的嵌入式DIV中显示DIV

使用OwnerDrawText模式定位和突出显示TreeView节点文本

使用ggplot根据x轴上的特定位置突出显示该值

使用jw播放器时,如何让视频在特定位置播放?

嵌入式YouTube视频无法加载

显示来自嵌入式代码块的HTML文本

使用jQuery控制嵌入式视频

SSH:X转发浏览器的嵌入式视频时,CPU使用率超高

UIWebView嵌入式视频全屏问题

改变嵌入式Youtube视频的宽高比

无法使用jQuery定位嵌入式Flickr视频iframe

YouTube嵌入式视频无法启动