如何在视频进度指示栏上的 html5 视频播放器中添加标记？

Question

我有一个简单的自定义 HTML 5 视频播放器，我想向我的视频播放器添加标记，进度指示栏是这样的。到目前为止，这是我仅针对 0.6 秒处的一个标记的解决方案。HTML<div canplay id="video-block">    <div id="video-container">        <video id="videoplayer" ref="video"  autoplay webkit-playsinline playsinline>            <source src="videos/vmerce.mp4" type="video/mp4">        </video>    </div>    <div id="video-controls" style="position: relative; display: block">        <div id="seek-bar-container">            <div id="seek-bar">                <div id="current-time">                </div>            </div>        </div>        <div id="pause-play-button">            <img id="play" src="images/play.png">             <img id="pause" src="images/pause.png" style="display:none">        </div>    </div></div>这是添加标记的js$(document).ready(function(){    //get videoplayer tag element        var videoplayerID =document.getElementById("videoplayer");        var ranges = [{            from: 0,            to: 6        },        {            from: 6,            to: 9        },        {            from: 9,            to: 25        },        {            from: 25,            to: 38        },     ];    console.log(ranges[0].to);        videoplayerID.addEventListener("timeupdate", function () {            if ($(this)[0].duration) {                $(this).parent().parent().find("#current-time").css("width", ($(this)[0].currentTime * 100 / $(this)[0].duration) + "%");            }            if (this.currentTime >= ranges[0].to) {                var bb =$('<div class="bubles"></div>')                $("#current-time").append(bb);            }        });})现在，当我运行我的应用程序时，我得到以下信息。我需要做什么才能得到我想要的？

Answer 1

你是正确的轨道计算上width的的#current-time吧。在timeupdate侦听器之外对每个rangeor做同样的事情marker。

循环遍历每个position标记并计算left属性的偏移量，就像您对width属性所做的一样。这将为您提供时间线上每个标记的位置。

然后在循环中创建每个标记，为其指定left属性值并将它们添加到例如#seekbar.

// Video and seekbar

const video = document.getElementById('videoplayer');

const seekBar = document.getElementById('seekbar');

// Positions of markers in seconds.

const positions = [3, 6.5, 7];

// Set the markers when we CAN know the duration of the video.

video.addEventListener('loadedmetadata', () => {

  // Add each marker to the #seekbar element.

  positions.forEach(function(position) {

    // Is position within range of the duration?

    if (position <= video.duration) {

      // Calculate position in percentage..

      const left = (position / video.duration) * 100 + '%';

      // ..create marker and give it the left value..

      const marker = document.createElement('div');

      marker.classList.add('bubles');

      marker.style.left = left;

      // ..and add the marker to the #seekbar.

      seekBar.appendChild(marker);

    }

  });

});

这会将每个标记放置在时间轴上，并带有一个百分比值。在循环之后继续监听timeupdate事件。

如果您想合并Ranges，就像在您的示例中一样，则需要进行一些修改。但这将帮助你开始你想要去的地方。