码迷,mamicode.com
首页 > Web开发 > 详细

HTML5中video的使用一

时间:2014-07-21 00:05:01      阅读:369      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   

<!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="width: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的使用一,布布扣,bubuko.com

HTML5中video的使用一

标签:style   blog   http   java   color   使用   

原文地址:http://www.cnblogs.com/yanshanshuo/p/3849992.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!