2

当我第一次加载包含我制作的自定义嵌入式视频播放器的页面时，不会显示经过时间和总时间。但是，当我播放视频时，它会显示出来。任何人都可以帮助我并告诉我我可能做错了什么，拜托。谢谢！

示例图片：

页面首次加载时视频播放器的外观： 页面首次加载时视频播放器的外观。

视频播放器播放时的样子： 视频播放器播放时的样子。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Video Player - HTML5</title>
    <link rel="stylesheet" href="css/video_player.css">
</head>
<body>
    <section id="main">
        <video id="videoPlayer" width="640" height="480">
            <source src="video/test.webm" type="video/webm"></source>
            <source src="video/test.ogv" type="video/ogv"></source>
            <source src="video/test.mp4" type="video/mp4"></source>
            This is a video for html5 browsers.
        </video>

        <nav id="vidControls" class="clearfix">
            <div id="playPauseBtn" class="left">Play</div>
            <div id="scrubberContainer" class="left">
                <div id="scrubberBar"></div>
            </div>
            <div id="timer" class="left">
                <span></span>
            </div>
        </nav>
    </section>

    <!-- JAVASCRIPT -->
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/VideoPlayer.js"></script>
    <script>
        $(document).ready(function(){
            VP.init();
        });
    </script>
    <!-- END JAVASCRIPT -->

</body>
</html>

CSS：

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

#main {
    width: 720px;
    margin: 20px auto;
    padding: 12px;
    background: #CCC;
    text-align: center;
    border-radius: 5px;
    -moz-box-shadow: 2px 5px 5px #888;
    -webkit-box-shadow: 2px 5px 5px #888;
    box-shadow: 2px 5px 5px #888;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#888')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#888');
    /* For Non-CSS3 Browsers */
    background: #EBF1F6;
    /* For IE */
    filter: 
        progid:DXImageTransform.Microsoft.gradient(startColorstr='#F3F4F5', endColorstr='#DADADA');
    /* For WebKit Browsers */
    background: 
        -webkit-gradient(linear, left top, left bottom, from(#F3F4F5), to(#DADADA));
    /* For Firefox 3.6+ */
    background: 
        -moz-linear-gradient(top,  #F3F4F5,  #DADADA);
}

nav {
    margin: 5px;
    width: 100%;
}

#timer {
    display: block;
    color: #000;
    text-align: center;
    height: 28px;
    padding-top: 12px;
    font-size: 12px;
    font-family: Arial;
}

#playPauseBtn {
    display: block;
    background: #656565;
    color: #FFF;
    text-align: center;
    padding: 9px;
    border: 1px solid #DADADA;
    cursor: pointer;
    width: 64px;
}

#playPauseBtn:hover {
    background: #FFF;
    color: #333;
}

#playPauseBtn:active {
    background: #333;
    color: #999;
}

#scrubberContainer {
    position: relative;
    width: 500px;
    height: 20px;
    padding: 4px;
    margin: 6px;
    background: #000;
}

#scrubberBar {
    position: absolute;
    background: #FF6600;
    width: 0px;
    height: 20px;
}

Javascript：

var VP = VP || {};

var barSize = new Number(500);
var scrubberContainer = $('#scrubberContainer')[0];
var scrubberBar = $('#scrubberBar')[0];
var playPauseBtn = $('#playPauseBtn')[0];
var videoPlayer = $('#videoPlayer')[0];
var updatePlayer;
var updateTimer;

VP.init = function(){
    playPauseBtn.addEventListener('click', VP.togglePlayPause, false);
    scrubberContainer.addEventListener('click', VP.scrubberClicked, false);
    videoPlayer.addEventListener('timeupdate', VP.updateTimer);
}

VP.togglePlayPause = function(){
    if(!videoPlayer.paused && !videoPlayer.ended){
        videoPlayer.pause();
        $('#playPauseBtn').html('Play');
        window.clearInterval(updatePlayer);
        window.clearInterval(updateTimer);
    } else {
        videoPlayer.play();
        $('#playPauseBtn').html('Pause');
        updatePlayer = setInterval(function()
        {
            VP.updateScrubber();
        }, 100);
    }
}

VP.updateScrubber = function(){
    if(!videoPlayer.ended){
        var size = parseInt(videoPlayer.currentTime * barSize/videoPlayer.duration);
        $('#scrubberBar').css('width', size + 'px');
    }
    else{
        $('#scrubberBar').css('width', '0px');
        $('#playPauseBtn').css('Play');
        window.clearInterval(updatePlayer);
    }
};

VP.scrubberClicked = function(e){
    if(!videoPlayer.paused && !videoPlayer.ended){
        var mouseX = e.pageX - scrubberContainer.offsetLeft;
        var newTime = mouseX * videoPlayer.duration/barSize;
        videoPlayer.currentTime = newTime;
        $('#scrubberBar').css('width', mouseX + 'px');
    }
};

VP.updateTimer = function(){
    var eTime;
    var tTime;

    //calculate elapsed time
    var eSeconds = Math.round(videoPlayer.currentTime);
    var eMinutes = Math.floor(eSeconds/60);
    eMinutes = (eMinutes >= 10) ? eMinutes : "0" + eMinutes;
    eSeconds = Math.floor(eSeconds % 60);
    eSeconds = (eSeconds >= 10) ? eSeconds : "0" + eSeconds;

    //calculate total time
    var tSeconds = Math.round(videoPlayer.duration);
    var tMinutes = Math.floor(tSeconds/60);
    tMinutes = (tMinutes >= 10) ? tMinutes : "0" + tMinutes;
    tSeconds = Math.floor(tSeconds % 60);
    tSeconds = (tSeconds >= 10) ? tSeconds : "0" + tSeconds;

    //assign these values to our variables
    eTime = '' + eMinutes + ':' + eSeconds;
    tTime = '' + tMinutes + ':' + tSeconds;

    //display in timer
    $('#timer').html('' + eTime + ' / ' + tTime);
};
4

3 回答 3

1

这有点杂乱无章，当 html5 视频播放器发展时，可能会有更好的方法来做到这一点，但无论如何它对我有用。只需将其放在document.ready代码的末尾...

$("#videoPlayer")[0].play();
setTimeout(function() {
    $("#videoPlayer")[0].pause();
}, 100);

它开始播放视频，然后在 1/10 秒后停止。查看页面的人应该不会注意到任何东西，它给了它足够的时间来显示视频的播放信息。

于 2013-07-05T14:00:44.060 回答
0

您的 HTML 也必须包含数据。

        <span id="currentTime">00:00</span> / <span id="durationTime">00:00</span>

放这样的东西也许很好

currentTime.innerHTML = formatTime(秒);

其中格式化时间是您的函数（）；秒是存储视频数据的变量，在本例中为秒。

这就是我所做的。

    video.addEventListener("timeupdate", function() {





            function formatTime(seconds) {
        minutes = Math.floor(seconds / 60);
        minutes = (minutes >= 10) ? minutes : "0" + minutes;
        seconds = Math.floor(seconds % 60);
        seconds = (seconds >= 10) ? seconds : "0" + seconds;
        return minutes + ":" + seconds;
      }




                      var seconds = video.currentTime;





        currentTime.innerHTML = formatTime(seconds);


        });




    video.addEventListener("timeupdate", function() {





        function formatTime(seconds) {
    minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : "0" + minutes;
    seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    return minutes + ":" + seconds;
  }




                  var seconds = video.duration;





    durationTime.innerHTML = formatTime(seconds);


    });

//在 HTML 中如下

<span id="currentTime">00:00</span> / <span id="durationTime">00:00</span>
于 2016-06-24T18:24:50.453 回答
0

@Verde Mc 你的答案都很好。但是，它缺少 var 关键字，这会使代码无法工作。只需这样做：

    video.addEventListener("timeupdate", function() {
  function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : "0" + minutes;
    var seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    return minutes + ":" + seconds;
}

var seconds = video.currentTime;
currentTime.innerHTML = formatTime(seconds);
});




video.addEventListener("timeupdate", function() {
function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : "0" + minutes;
    var seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    return minutes + ":" + seconds;
}
var seconds = video.duration;
durationTime.innerHTML = formatTime(seconds);
});
于 2019-10-10T17:07:50.633 回答