0
Ich versuche, drei verschiedene Videodateitypen mit benutzerdefinierten Steuerelementen abzuspielen. Das erste Video läuft gut ab, aber ich kann nicht herausfinden, warum die anderen beiden nicht spielen. Irgendwelche Ideen, was ich falsch mache?Benutzerdefinierte Videowiedergabesteuerung - Nur ein Video funktioniert
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 5 Video</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="player.js"></script>
<link href="player.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Bunny MP4 Video</h3>
<video width="480" id="vid">
<source src="http://docs.evostream.com/sample_content/assets/bun33s.mp4" type="video/mp4">
</video>
<div id="video_controls">
<div id="play_toggle" class="player-button">Play</div>
<div id="progress">
<div id="load_progress"></div>
<div id="play_progress"></div>
</div>
<div id="time">
<!--give current time of 0 for each, not started -->
<span id="current_time">00:00</span>/<!--/separates the 2 number time values -->
<span id="duration">00:00</span>
</div>
</div>
<h5>This video is about a cartoon bunny</h5>
<p>
<p>
<h3>Lego OGG Video</h3>
<video width="480" id="vid">
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
</video>
<div id="video_controls">
<div id="play_toggle" class="player-button">Play</div>
<div id="progress">
<div id="load_progress"></div>
<div id="play_progress"></div>
</div>
<div id="time">
<!--give current time of 0 for each, not started -->
<span id="current_time">00:00</span>/<!--/separates the 2 number time values -->
<span id="duration">00:00</span>
</div>
</div>
<h5>This video is about legos moving</h5>
<p>
<p>
<h3>Elephants WEBM Movie</h3>
<video width="480" id="vid">
<source src="http://video.webmfiles.org/elephants-dream.webm" type="video/webm">
</video>
<div id="video_controls">
<div id="play_toggle" class="player-button">Play</div>
<div id="progress">
<div id="load_progress"></div>
<div id="play_progress"></div>
</div>
<div id="time">
<!--give current time of 0 for each, not started -->
<span id="current_time">00:00</span>/<!--/separates the 2 number time values -->
<span id="duration">00:00</span>
</div>
</div>
<h5>This video is about elephants</h5>
</body>
</html>
Player.js
$(function(){
//Stop if HTML5 video not supported
if(!document.createElement('video').canPlayType){
$("#video_controls").hide();
}
var video = document. getElementById('vid');
//add pause/play functionality
$("#play_toggle").bind("click",function(){
if(video.paused) {
video.play();
$(this) .html("Pause");
}
else{
video.pause();
$(this) .html ("Play");
}
});
$(video).bind("timeupdate",function() {
var timePercent = (this.currentTime/this.duration)*100;
$("#play_progress").css({width:timePercent + "%" })
});
$(video).bind("timeupdate", function() {
$("#current_time").html(formatTime(this.currentTime));
});
$(video).bind("durationchange", function() {
$("#duration").html(formatTime(this.duration));
});
function formatTime(seconds) {
var seconds = Math.round(seconds);
var minutes = Math.floor(seconds/60);
// Remaining seconds
seconds = Math.floor(seconds % 60);
// Add leading Zeros
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}
});
Player.css
@import url(https://fonts.googleapis.com/css?family=Dekko);
@import url(https://fonts.googleapis.com/css?family=Pacifico);
h3
{
color: red;
font-family: 'Pacifico', cursive;
}
h5 {
color: black;
font-family: 'Dekko', cursive;
font-size: 20px;
}
#video_controls {
width: 480px;
height: 30px;
background-color: lightblue;
color:black;
font-family: Verdana, sans-serif;
font-size: 12px;
text-transform: uppercase;
}
#video_controls div {
float: left;
height: 30px;
line-height: 30px;
}
.player-button {
width: 50px;
text-align: center;
font-family: 'Pacifico', cursive;
color:red;
}
.player-button:hover{
text-decoration:underline;
/*changes cursor to pointer so user knows it is clickable */
cursor:pointer;
color:green;
}
#progress {
position: relative;
background: lightblue;
width: 280px;
}
#play_progress {
/* insures that play progress bar is always aligned to top-left and
within side of the progress bar */
position: absolute;
background: orange;
}
#time {
width: 150px;
text-align: center;
font-family: 'Pacifico', cursive;
font-size: 16px;
color:red;
}
Können Sie mir ein Beispiel geben, wie Sie das tun können, was Sie vorschlagen? –