Question

我以模态打开视频，视频加载了$ .get，我无法将搜索栏的'timeupdate'功能绑定到视频。我尝试了很多解决方案，包括一个here。

这是VideoFile.php的内容：

<div id="video_container" class="l-rel l-twelve l-mb1">
    <video id="video_player" preload="auto" class="bdrRed" width="100%" poster="/Video/VisualizeTheMarkets.png">
        <source src="/Video/Vdeo.mp4" type="video/mp4">
        <source src="/Video/Video.webm" type="video/webm">
    </video>
    <div id="video_controls">
        <div class="l-twelve l-nmb">
            <div id="custom-seekbar">
              <span></span>
            </div>
       </div>
       <div id="controlBar" class="l-twelve l-nmb l-pl1 l-pr1">
           <div class="flex-1 flex-c">
               <button type="button" id="play-pause" class="play">Play</button>
               <button type="button" id="mute" class="mute">Mute</button>
               <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1"> 
               <button type="button" id="full-screen">Full-Screen</button>
           </div>
       </div>
    </div>
</div>

以下是我加载视频的方式： HTML

<a data-href="/AJAX/Video/VideoFile.php" href="#" class="vidpop">See How</a>

视频JS电话

$('.vidpop').click(function(e){
    var link = $(this).data('href');
    $.get(link, function(data){
        modal.open({content: data, "width":"700px"});
    }).then(function( data, textStatus, jqXHR ) {
        $('<svg id="video-play-button" class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video"><circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/><polygon points="70, 55 70, 145 145, 100" fill="#fff"/></svg>').appendTo($('#video_container'));
    });
    e.preventDefault();
});

最后，尝试制作'custom-seekbar＆gt; span'在timeupdate上增加宽度：

$(document).on('timeupdate', '#video_player', function(){
    var currentPos = $('#video_player')[0].currentTime;
    var maxduration = $('#video_player')[0].duration;
    var percentage = 100 * currentPos / maxduration; //in %
    console.log(currentPos, maxduration, percentage);
});
    var vid = document.getElementById("video_player");
    vid.ontimeupdate = function(){
    var percentage = ( vid.currentTime / vid.duration ) * 100;
    $("#custom-seekbar span").css("width", percentage+"%");
};

$(document).on('timeupdate', '#custom-seekbar span', function(){
     $("#custom-seekbar span").css("width", percentage+"%");
});

“custom-seekbar span”不会改变宽度。如何将函数绑定到页面上不存在的元素？

将HTML5视频进度条绑定到AJAX加载的视频

0 个答案: