javascript - HTML5 视频书签 - 在点击和播放时存储当前时间

Question

我正在使用 jquery 为视频创建书签部分。目前这是静态的。

单击时，我将在 div 中附加带有 currenttime 的链接。然后，您可以单击附加链接以从该位置(例如第 5 秒)播放视频。

目前，我在点击功能中使用点击功能，这不是一个好方法。如果我在外面删除第二个函数，那么它就无法工作，因为它无法找到该值。

有人可以建议一个更好的方法来实现这个目标吗？我已经创建了代码的 fiddle 链接。

Js Fiddle 链接 - https://jsfiddle.net/cp89db4u/1/

HTML

<a href="javascript:;" class="getTime">Bookmark</a>
<div class="bookmarkList"></div>

JS

var myVid = document.getElementById('videoElement');

$('.getTime').on('click', function() {
    var mycurrentTime = myVid.currentTime;
    $(".bookmarkList").append("<a href='javascript:;' rel='" + mycurrentTime + "' class='bookmarkLink'>" + mycurrentTime + "sec How to get wealth?</a>");

    $('.bookmarkList a').click(function(){
        myVid.currentTime = $(this).attr('rel');
    });
});

Answer 1

如下改变你的Js。

var myVid = document.getElementById('videoElement');

$('.getTime').on('click', function() {
    var mycurrentTime = myVid.currentTime;
    $(".bookmarkList").append("<a href='javascript:;' rel='" + mycurrentTime + "' class='bookmarkLink'>" + mycurrentTime + "sec - Click to Play</a>");
});

$(document).on('click', ".bookmarkList a", function() {
    myVid.currentTime = $(this).attr('rel');
    myVid.play();
});

希望对你有帮助