HTML5中添加多媒体支持（三）

最新推荐文章于 2019-09-01 19:21:36 发布

Soloman

最新推荐文章于 2019-09-01 19:21:36 发布

阅读量2.2k

点赞数

分类专栏： Android移动开发 HTML5/CSS/JavaScript 文章标签： html5 video function stylesheet div button

Android移动开发同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

HTML5/CSS/JavaScript

36 篇文章 0 订阅

订阅专栏

ok，最后我们来一段通过JavaScript创建并且控制播放Video的代码：

js代码：

$(function(){

  // Stop if HTML5 video isn't supported
  if (!document.createElement('video').canPlayType) {
    $("#video_controls").hide();
    return;
  }

// 获取video对象
  var video = document.getElementById("my_video");

  // Play/Pause ============================//
  $("#play_button").bind("click", function(){
    video.play();
  });

  $("#pause_button").bind("click", function(){
    video.pause();
  });

  $("#play_toggle").bind("click", function(){
    if (video.paused) {
      video.play();
      $(this).html("Pause");
    } else {
      video.pause();
      $(this).html("Play");
    }
  });

// 显示播放进度
  // Play Progress ============================//
  $(video).bind("timeupdate", function(){
    var timePercent = (this.currentTime / this.duration) * 100;
    $("#play_progress").css({ width: timePercent + "%" })
  });

  // Load Progress ============================//
  $(video).bind("progress", function(){
    updateLoadProgress();
  });
  $(video).bind("loadeddata", function(){
    updateLoadProgress();
  });
  $(video).bind("canplaythrough", function(){
    updateLoadProgress();
  });
  $(video).bind("playing", function(){
    updateLoadProgress();
  });
  
  function updateLoadProgress() {
    if (video.buffered.length > 0) {
      var percent = (video.buffered.end(0) / video.duration) * 100;
      $("#load_progress").css({ width: percent + "%" })
    }
  }
  
  // Time Display =============================//
  $(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;
  }

});

css代码：

#video_controls {
  width: 480px;
  height: 30px;
  background-color: #333;
  color: #fff;
  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;
  cursor: pointer;
}

#progress {
  position: relative;
  background: #555;
  width: 310px;
}

#play_progress {
  position: absolute;
  background: #6C3;
}

#load_progress {
  position: absolute;
  background: #69C;
}

#time {
  width: 120px;
  text-align: center;
}

html代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML5 Video Player</title>
  <script src="../_scripts/jquery-1.5.1.min.js"></script>
  <script src="player_DONE.js"></script>
  <link href="player_DONE.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <video id="my_video" width="480" height="300" preload="none" poster="../_video/podcast-poster.jpg">
  <!--	浏览器将按照顺序选取第一个能够解析的源进行播放	-->
    <source src="../_video/podcast.mp4" type="video/mp4" />
    <source src="../_video/podcast.webm" type="video/webm" />
    <source src="../_video/podcast.ogv" type="video/ogg" />
    <p>Your browser does not support HTML5 video.</p>
  </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">
      <span id="current_time">00:00</span> / 
      <span id="duration">00:00</span>
    </div>
  </div>

</body>
</html>

Soloman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中添加多媒体支持（三）

ok，最后我们来一段通过JavaScript创建并且控制播放Video的代码：js代码：$(function(){ // Stop if HTML5 video isn't supported if (!document.createElement('video').canPlayType) { $("#video_controls").hide(); r
复制链接

扫一扫