Question

我的问题很简单：

我有下一个HTML5视频：

<div class="video_container">
    <video id="home_explainer_placeholder" class="video_placeholder" poster="/static/images/white_background.jpg">
        <source src="/static/videos/zapyo_intro.mp4" type="video/mp4">
    </video>

    <div>Current Time : <span  id="currentTime">0</span></div>
    <div>Total time : <span id="totalTime">0</span></div>

    <div id="home_explainer_overlay" class="placeholder_overlay">
        <div class="video_overlay">
        <div class="play_control">
            <div class="play_button"></div>
            <span class="gray">Click for video</span>
        </div>
        <div class="controls">
            <div class="video_mute off"></div>
            <div class="video_mute on"></div>
            <div class="video_fullscreen"></div>
            <div class="video_play"></div>
            <div class="video_pause"></div>
        </div>
        </div>
    </div>
</div>

我想在JS中获得向后计时器，这将在我按下播放按钮后启动，如果有人按下暂停则停止。

我试图在JavaScript中做这样的事情但是当我按下我的播放按钮时，没有任何反应（更多，视频不起作用）：

$(function(){
    $('#currentTime').html($('#home_explainer_overlay').find('video').get(0).load());
    $('#currentTime').html($('#home_explainer_overlay').find('video').get(0).play());
})
setInterval(function(){
    $('#currentTime').html($('#home_explainer_overlay').find('video').get(0).currentTime);
    $('#totalTime').html($('#home_explainer_overlay').find('video').get(0).duration);
},500)

该JS的HTML：

<div>Current Time : <span  id="currentTime">0</span></div>
<div>Total time : <span id="totalTime">0</span></div>

有关如何实现这一目标的任何提示？我想提一下，我没有扎实的JS背景，所以请解释一下你带来的任何解决方案。

我已经验证了其他simillar questions，但在我的情况下没有任何效果。

Answer 1

加载视频是异步的，因此您需要点击canplay的事件广播，并且有时可以使用timeupdate事件。

您还可以将属性preload="auto"以及autoplay添加到视频标记本身（如下面的修改后的代码所示）。

修改示例

var video = $('#home_explainer_placeholder');

// on each timeupdate event we update time data:      
video.bind("timeupdate", function() {
  $('#currentTime').html(video[0].currentTime.toFixed(2));
  $('#remTime').html((video[0].duration - video[0].currentTime).toFixed(2));
  $('#totalTime').html(video[0].duration.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video_container">
    <video id="home_explainer_placeholder" class="video_placeholder" poster="/static/images/white_background.jpg" preload="auto" autoplay>
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
    </video>

    <div>Current Time : <span  id="currentTime">0</span></div>
    <div>Remainding Time : <span  id="remTime">0</span></div>
    <div>Total time : <span id="totalTime">0</span></div>

    <div id="home_explainer_overlay" class="placeholder_overlay">
        <div class="video_overlay">
        <div class="play_control">
            <div class="play_button"></div>
        </div>
        <div class="controls">
            <div class="video_mute off"></div>
            <div class="video_mute on"></div>
            <div class="video_fullscreen"></div>
            <div class="video_play"></div>
            <div class="video_pause"></div>
        </div>
        </div>
    </div>
</div>

Answer 2

也许这就是你要找的东西，试试看

Link to JSfiddle

$(function(){
$('#currentTime').html($('#video_container').find('video').get(0).load());                          
$('#currentTime').html($('#video_container').find('video').get(0).play());
})
setInterval(function(){

$('#currentTime').html($('#video_container').find('video').get(0).currentTime);
$('#totalTime').html($('#video_container').find('video').get(0).duration);
$('#RemainingTime').html($('#video_container').find('video').get(0).duration - $('#video_container').find('video').get(0).currentTime)
},500)

Answer 3

基于current/duration time of html5 video?的解决方案：

<div class="video_container">
    <video id="home_explainer_placeholder" class="video_placeholder" controls>
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    </video>

    <div>Current Time : <span  id="currentTime">0</span></div>
    <div>Total time : <span id="totalTime">0</span></div>
    <div> Remaining: <span id="remainingTime">0</span></div>
</div>

一些基本的JS：

$(function(){
    $("#home_explainer_placeholder").on(
        "timeupdate", 
        function(event){
          onTrackedVideoFrame(this.currentTime, this.duration);
        });
});


function onTrackedVideoFrame(currentTime, duration){
    $("#currentTime").text(currentTime);
    $("#totalTime").text(duration);
    $("#remainingTime").text(duration-currentTime);
}

这里有一个JSFiddle：http://jsfiddle.net/4cvvg4b4/3/

Answer 4

var video = $('#home_explainer_placeholder');

// on each timeupdate event we update time data:      
video.bind("timeupdate", function() {
  $('#currentTime').html(video[0].currentTime.toFixed(2));
  $('#remTime').html((video[0].duration - video[0].currentTime).toFixed(2));
  $('#totalTime').html(video[0].duration.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video_container">
    <video id="home_explainer_placeholder" class="video_placeholder" poster="/static/images/white_background.jpg" preload="auto" autoplay>
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
    </video>

    <div>Current Time : <span  id="currentTime">0</span></div>
    <div>Remainding Time : <span  id="remTime">0</span></div>
    <div>Total time : <span id="totalTime">0</span></div>

    <div id="home_explainer_overlay" class="placeholder_overlay">
        <div class="video_overlay">
        <div class="play_control">
            <div class="play_button"></div>
        </div>
        <div class="controls">
            <div class="video_mute off"></div>
            <div class="video_mute on"></div>
            <div class="video_fullscreen"></div>
            <div class="video_play"></div>
            <div class="video_pause"></div>
        </div>
        </div>
    </div>
</div>

在javascript中以div显示HTML5持续时间

4 个答案:

修改示例