<!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的使用一的更多相关文章

  1. 解决html5中video标签无法播放mp4问题的办法

    这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...

  2. HTML5中video 和 ogg

    HTML5中 的ogg 从网上学习HTML5之video时看到了下面的代码,不太清楚ogg是什么,于是搜索了一些知识点供了解.

  3. HTML5中video标签与canvas绘图的使用

    video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang=&quo ...

  4. 关于HTML5中video标签的奇怪现象

    很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html&g ...

  5. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  6. 【HTML5】HTML5中video元素事件详解（实时监测当前播放时间）

    html 代码..video后边几个元素,可处理ios 系统的兼容性 <video id="myVideo" controls="controls" po ...

  7. HTML5中Video和Audio

    相关属性 src属性 该属性指定媒体数据的URL地址. autoplay属性 在该属性中指定是否在页面加载后自动播放,使用方法: <video src="test.mov" ...

  8. 关于HTML5中Video标签无法播放mp4的解决办法

    1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...

  9. html5 中video标签属性

      <video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.j ...

随机推荐

  1. 论山寨手机与Android联姻 【7】 MTK手机软件系统

    MTK feature phone的基本功能是通话和短信,要了解MTK手机软件系统,首先需要简要回顾几个移动网络通讯的基本概念. Figure 38. GSM-GPRS Architecture Co ...

  2. STM32与LPC系列ARM资源之比较

    由于有周立公开发板的影响,LPC系列的开发板在工程师心目中一般是入门的最好型号之一.这次刚好有STM32的竞赛,正好将两者的资源进行比较一下(LPC系列以LPC213X为例). LPC213X包括LP ...

  3. Delphi代码中嵌入ASM代码

    前言 Delphi作为一个快速高效的开发平台,使用的人越来越多,但熟悉在Delphi代码中嵌入ASM代码的程序员我想不多,因为这方面的资料太少了,另一方面,它还需要有基本的汇编语言知识,关於汇编语言的 ...

  4. 14.2.3 InnoDB Redo Log

    14.2.3 InnoDB Redo Log 14.2.3.1 Group Commit for Redo Log Flushing redo log 是一个基于磁盘数据结构的用于在crash 恢复正 ...

  5. linux centos 配置 svn 服务器

    首先介绍一下吧,Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库 (repository) 中.  ...

  6. ios 常用宏（copy）

    分享一下我现在用的 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3 ...

  7. Global.asax 文件说明

    引用 来自  http://www.cnblogs.com/jianshao810/archive/2011/02/03/1948912.htm 在网上找了N多相关的东西总说的不够细,现在终于找到了. ...

  8. VBA基础概念

    一:VBA对象 'VBA对象 'VBA中的对象其实就是我们操作的具有方法.属性的excel中支持的对象 'Excel中的几个常用对象表示方法 '1.工作簿 ' Workbooks 代表工作簿集合,所有 ...

  9. interview collect

    1. binary tree inorder traversal 不能用recursive写 (LC原题)2. 比如有个数组F={1,3, 4, 5, 2, 0}, A=3, 那么F[A]=5, F[ ...

  10. php中date函数获取当前时间的时区误差解决办法

    例:echo date('Y-m-d H:i:s', time()); 输出时间:2008-10-12 02:32:17 但实际时间是:2008-10-12 10:32:17时间误差8个小时 PHP手 ...