<!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. FastJSON应用前测试

    FastJSON 应用前测试 FastJSON是一个很好的java开源json工具类库,相比其他同类的json类库,它的速度的确是fast,最快!但是文档做得不好,在应用前不得不亲测一些功能.\ 实际 ...

  2. Xlint以及Java Lint 选项

    Java Lint 选项 Java 编译器的选项包括所谓的标准选项和非标准选项.标准选项是指在当前版本的开发环境中支持,且在未来版本中也将被支持的选项.常用的标准选项比如 -classpath 以及 ...

  3. Unix/Linux环境C编程入门教程（19）Red Hat Entetprise Linux 7.0环境搭建

    位架构,包括英特尔X-86_64.Power和s390.动态定时能力将降低内核内部中断数量,Open vSwitch 2.0功能可调节虚拟机之间的流量.RHEL 7中默认的文件系统是XFS,包含了一个 ...

  4. 在Word中为标题样式添加自动编号功能

    原文地址:http://blog.chinaunix.net/uid-16685753-id-2738270.html 摘要: 本文可以帮助你在Office 2007中为Word标题样式添加和设置自动 ...

  5. Kruskal-Wallis Test and Friedman test

  6. Python学习笔记9-Python 链接MySql数据库

    Python 链接MySql数据库,方法很简单: 首先需要先 安装一个MySql链接插件:MySQL-python-1.2.3.win-amd64-py2.7.exe 下载地址:http://dev. ...

  7. jsxtransformer.js 和browser.js有什么关系？

    这个确实是百度就能解决的问题 补充下楼上的回答在react 0.14前,浏览器端实现对jsx的编译依赖jsxtransformer.js 在react 0.14后,这个依赖的库改为browser.js ...

  8. Phoegap（cordova）开发跨平台app之HelloWorld

    PhoneGap(cordova)的hellworld程序 1           安装JDK 配置环境变量: 2           安装android-sdk 配置环境变量: set Path=E ...

  9. CentOS 配置防火墙操作实例（启、停、开、闭端口）CentOS Linux-FTP/对外开放端口（接口）TomCat相关

    链接地址:http://blog.csdn.net/jemlee2002/article/details/7042991 CentOS 配置防火墙操作实例(启.停.开.闭端口): 注:防火墙的基本操作 ...

  10. python打包成.exe工具py2exe0-----No such file or directory错误

    转自:http://justcoding.iteye.com/blog/900993 一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具, ...