【问题标题】:Play video in loop from the selected duration从选定的持续时间循环播放视频
【发布时间】:2016-09-29 19:42:52
【问题描述】:

我的设计中有一个长度为 2 分钟的视频文件。第一次视频将从头开始播放,然后视频必须从 1.00 秒到 2.00 秒循环播放。使用jquery可以做到这一点吗?我已经尝试过替代方法。它有效,但视频中有跳跃。 Change video source after the first video ends

这是我的代码:

JQuery:

document.getElementById('bgvid').addEventListener('ended', myHandler, false);

function myHandler(e) {
   //*what to do?*//
}

HTML:

div class="anim-logo ">
    <video playsinline autoplay muted  poster="assets/img/video3.jpg" id="bgvid">
    <source src="assets/img/video3.webm" type="video/webm">
    <source src="assets/img/video3.mp4" type="video/mp4">
</video>
      </div><!--end of anim logo-->

【问题讨论】:

    标签: javascript jquery html html5-video


    【解决方案1】:

    你可以这样做:

    var video = document.getElementById('videoElm')
    video.addEventListener('ended',function(){
        // set the video's start position to the video's duration minus 10 seconds. "video.currentTime" is in milliseconds, "video.duration" is in seconds
        video.currentTime = (parseInt(video.duration) - 10) * 1000;
        video.play();
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
        <video id="videoElm" autoplay muted>
        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
    </video>
    </div>

    【讨论】:

    • no.. 第一次(每次页面加载)它从头开始播放。之后它会循环播放最后 60 秒。
    • @SharavnanKv 我已经编辑了我的答案来解决这个问题。更改视频的currentTime 以寻找视频中的特定时间,并更改setInterval(...) 函数的第二个参数以查看循环应该多长时间。
    • 视频加载问题 :)
    • @SharavnanKv 它适用于我的系统,可能是浏览器兼容性问题,我使用的是 Chrome。用另一个视频试试。
    • @SharavnanKv 我再次更改了答案。你也可以试试这个here
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-08
    • 2015-10-15
    • 1970-01-01
    • 2022-11-23
    • 1970-01-01
    相关资源
    最近更新 更多