2
當我第一次加載我的網頁包含我定製的嵌入式視頻播放器我做了，經過&總時間不顯示。但是，當我播放視頻時，它顯示出來了。任何人都可以幫助我，告訴我我可能做錯了什麼，請。謝謝！顯示時間不斷地爲自定義HTML5和jQuery的視頻播放器
示例圖片：
視頻播放器是什麼樣子時，第一次加載頁面： 
視頻播放器看起來怎麼打的時候像這樣： 
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);
};
有沒有因爲視頻文件尚未在這一點上打開時出現。一旦視頻開始播放，它只能顯示你的時間。或者，如果您知道時間（手動或通過某些服務器代碼），則可以自己顯示。 – Archer
@Archer我怎樣才能讓一次頁面加載視頻開放沒有它實際玩？ – JordanDevelop
不知道這是否會工作，但你可以稱之爲一個'玩（）'，然後'暫停（）'之後。 – Archer