Question

我正在尝试使用自定义控件播放三种不同的视频文件类型。第一个视频回放得很好，但我似乎无法弄清楚为什么其他两个不播放。我有什么想法吗？

<!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;
}

Answer 1

您的ID（视频控件）应始终是唯一的。如果您不希望它们是唯一的，请使用class。否则使用2个不同的ID。

自定义视频播放控件 - 只有一个视频可用

1 个答案: