HTML | DOM Video videoTracks 属性(1)

📌 相关文章

📜 HTML | DOM Video videoTracks 属性(1)

📅 最后修改于: 2023-12-03 15:15:35.989000 🧑 作者: Mango

HTML | DOM Video videoTracks 属性

简介

videoTracks属性是HTML DOM中HTMLVideoElement对象的一个属性，用于获取视频的轨道（track）列表。每个轨道描述了视频中的文本轨道或元数据轨道。

语法

var tracksList = videoElement.videoTracks;

属性值

tracksList是VideoTrackList对象的一个只读的实例，它包含了视频的轨道数据。该对象有以下属性值：

length：返回轨道的数量。
selectedIndex：返回选中的轨道的索引，或-1，如果没有选中的轨道。
onchange：设置一个事件处理程序，当轨道列表的选中状态发生变化时会被调用。

使用示例

<html>
  <head>
    <meta charset="UTF-8">
    <title>Video Track List demo</title>
  </head>
  <body>
    <video id="myVideo" controls>
      <source src="video.mp4" type="video/mp4">
      <track label="English subtitles" kind="subtitles" srclang="en" src="subtitles_en.vtt">
      <track label="Français sous-titres" kind="subtitles" srclang="fr" src="subtitles_fr.vtt">
    </video>

    <script>
      var videoElement = document.getElementById("myVideo");

      console.log(videoElement.videoTracks.length); //2

      var videoTrackList = videoElement.videoTracks;

      for (var i = 0; i < videoTrackList.length; i++) {
        console.log(videoTrackList[i].kind);
      }

      videoTrackList[0].mode = "hidden";
      console.log(videoTrackList[0].mode); //hidden
    </script>
  </body>
</html>

总结

videoTracks属性是一个很有用的API，它提供了对轨道数据的访问和控制能力。通过轨道列表，我们可以读取所有的轨道，关闭某些轨道或开启某些轨道，实现更好的视频体验。