Question

我有一个简单的自定义HTML 5视频播放器，我想在视频播放器中添加标记，进度指示栏类似这样。

到目前为止，这是我的解决方案，仅适用于0.6s的一个标记。

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侦听器之外，对每个range或marker都执行相同的操作。

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

然后在循环中创建每个标记，将其赋予left属性值，然后将其添加到#seekbar中。

// Video and seekbar
var video = document.getElementById('videoplayer');
var seekBar = document.getElementById('seekbar');

// Positions of markers in seconds.
var positions = [3, 6.5, 7];

// 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 and add to the #seekbar.
    var left = (position / video.duration) * 100 + '%';

    // Create marker and give it the left value.
    var marker = document.createElement('div');
    marker.classList.add('bubles');
    marker.style.left = left;
    seekBar.appendChild(marker);
  }

});

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

如果像您的示例一样，要合并 ranges ，则需要进行一些修改。但这将帮助您入门。

Answer 2

看看以前关于类似问题的答案，我想您会在这里找到解决方案。 vnponce回答了。

https://stackoverflow.com/a/39127919/12212335

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

2 个答案: