如何在视频进度指示栏上的 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 seekbarconst 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', () => {&nbsp; // Add each marker to the #seekbar element.&nbsp; positions.forEach(function(position) {&nbsp; &nbsp; // Is position within range of the duration?&nbsp; &nbsp; if (position <= video.duration) {&nbsp; &nbsp; &nbsp; // Calculate position in percentage..&nbsp; &nbsp; &nbsp; const left = (position / video.duration) * 100 + '%';&nbsp; &nbsp; &nbsp; // ..create marker and give it the left value..&nbsp; &nbsp; &nbsp; const marker = document.createElement('div');&nbsp; &nbsp; &nbsp; marker.classList.add('bubles');&nbsp; &nbsp; &nbsp; marker.style.left = left;&nbsp; &nbsp; &nbsp; // ..and add the marker to the #seekbar.&nbsp; &nbsp; &nbsp; seekBar.appendChild(marker);&nbsp; &nbsp; }&nbsp; });});这会将每个标记放置在时间轴上，并带有一个百分比值。在循环之后继续监听timeupdate事件。如果您想合并Ranges，就像在您的示例中一样，则需要进行一些修改。但这将帮助你开始你想要去的地方。