0
Я пытаюсь воспроизвести три разных типа видеофайлов с помощью пользовательских элементов управления. Первое видео воспроизводится просто отлично, но я не могу понять, почему другие два не играют. Любые идеи, что я делаю неправильно?Пользовательские элементы управления воспроизведением видео - только одно видео работает
<!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;
}
Можете ли вы привести мне пример того, как делать то, что вы предлагаете? –