HTML5中video的使用一

<!DOCTYPE html>

<html>
<head>
<title>HTML5 </title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // 在这里写你的代码...
  //alert("哈哈");
  //var video = $('#videoPlay')[0];//这样返回的是DOM对象
  var video = $('#videoPlay').get(0); //这样返回的是DOM对象
  var videoJquery = $('#videoPlay'); //这样返回的是Jquery的对象
  $(".btnPlay").on("click", function() { //播放暂停按钮的点击事件
    //alert( $(this).text() );
    //alert( video.paused );
    if (video.paused) {　　
      video.play(); //播放
      　　
    }　　
    else {　　
      video.pause(); //暂停
      　　
    }　
    return false;
  });

  //获得视频的时间总长度
  videoJquery.on('loadedmetadata', function() {
    //alert("a");
    $('.duration').text(video.duration);
  });

  // 更新当前HTML5视频播放时间
  videoJquery.on('timeupdate', function() {
    $('.current').text(Math.round(video.currentTime) + "秒"); //Math.round()四舍五入取整
    var currentPos = video.currentTime; //播放时间
    var maxduration = video.duration; //视频总时间
    var percentage = (100 * currentPos / maxduration).toFixed(2); //得到百分比.toFixed()小数点
    $('.timeBar').css('width', percentage + '%');
    $('.percentage').text(percentage);
  });

  //进度条拖动
  var timeDrag = false; /* 初始默认的拖动状态为false*/
  $('.progressBar').mousedown(function(e) {
    //alert(e.pageX);
    timeDrag = true;
    updatebar(e.pageX);
  });
  //鼠标移动方法
  $(document).mousemove(function(e) {
    if (timeDrag) {
      updatebar(e.pageX);
    }
  });
  //放开鼠标
  $(document).mouseup(function(e) {　　
    if (timeDrag) {　　
      timeDrag = false; //停止拖动，设置timeDrag为false
      updatebar(e.pageX);　　
    }　　
  });
  //更新进度条
  var updatebar = function(x) {　　
    var progress = $('.progressBar');　　
    var maxduration = video.duration;　　
    var position = x / progress.width();　　
    var percentage = 100 * position　　 //检查拖动进度条的范围是否合法
    if (percentage > 100) {　　
      percentage = 100;　　
    }　　
    if (percentage < 0) {　　
      percentage = 0;　　
    }　　 
    $('.timeBar').css('width', percentage + '%');　　
    video.currentTime = maxduration * percentage / 100;　　
  };
});
</script>
<style>
.progressBar
{
   position: relative;
   width: 100%;
   height: 10px;
   background-color: #000;
}
.timeBar
{
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background-color: #ccc;
}
</style>
</head>
<body>
<video src="535b565203633.mp4" width="320" height="240" controls="controls" autoplay="autoplay">
<!-- 中间写上文字，当不支持时，就会显示了 -->
你的浏览器不支持video标签，升级吧骚年！
</video>
<br/>

<br/>
<video width="320" height="240" controls="controls">
<!-- video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式 -->
<source src="535b565203633.avi" type="video/avi"> 
<source src="video2.mp4" type="video/mp4">
你的浏览器不支持video标签，升级吧骚年！
</video>
poster="/images/video2.gif" poster属性预览图图片
<br/>
<div style="640px;">
<video id='videoPlay' width='640' height='360'  onplay='alert("开始播放")' onpause='alert("暂停播放")' >
    <source src="video2.mp4" type="video/mp4">
</video>
<div class="control">
    <a href="#" class="btnPlay">播放/暂停</a>
</div>
<div class="progressTime">
    播放时间: <span class="current"></span>
    视频总时间: <span class="duration"></span>
    百分比: <span class="percentage"></span>
</div>
<div class="progressBar">
   <div class="timeBar">11</div>
</div>
</div>
</body>
</html>
实现简单的播放暂停，进度拖拽功能。
支持的方法属性和事件
方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width
HTML5中video的使用一

相关推荐
