<!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. Keil MDK中使用pc-lint的详细方法

    keil MDK版本:V4.03 PC-lint版本:  V8.0 关于pc-lint的强大作用,网上有很多,这里不想再复述,只说一句:能通过pc-lint检验的程序不一定没有问题,但通过了pc-li ...

  2. ln 命令

    ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s,具体用法是:ln –s 源文件 目标文件. 当我们需要在不同的目录,用到相同的 ...

  3. Android UI ActionBar功能-自定义 Action Bar 样式

    ActionBar的样式官方提供了三种: Theme.Holo Theme.Holo.Light Theme.Holo.Light.DarkActionBar 但不仅仅是这三种,我们还可以自己定义Ac ...

  4. UBUNTU 下如何升级 gcc, g++

    正如大家所知道的GCC并不支持"make uninstall". 一种推荐安装方式就是把GCC 安装在你自己指定的一个路径,当你不须要某个GCC版本号的时候你仅仅须要移除相应版本号 ...

  5. uva 10051 Tower of Cubes(DAG最长路）

    题目连接:10051 - Tower of Cubes 题目大意:有n个正方体,从序号1~n, 对应的每个立方体的6个面分别有它的颜色(用数字给出),现在想要将立方体堆成塔,并且上面的立方体的序号要小 ...

  6. 利用协议代理实现导航控制器UINavigationController视图之间的正向传值和反向传值

    实验说明 (1)正向传值:比如A类里地值要传给B类用,就是我们先在A类中声明一个B类对象(当然B类头文件要import过来),然后把A类中得某个 值传递给B类中得某个值(所以需要在B类中先准备一个变量 ...

  7. NPOI.dll 用法。单元格，样式，字体，颜色，行高，宽度。读写excel

    NPOI.dll 用法.单元格,样式,字体,颜色,行高,宽度.读写excel 转载:http://yuncode.net/code/c_531e679b3896495 view source prin ...

  8. table+js实现网站左侧列表下拉隐藏

    <script language="javascript">                    function showHide(obj){            ...

  9. centos防火墙端口配置

    增加防火墙配置,允许8080端口: # vi /etc/sysconfig/iptables 在允许ssh的下面增加一条: -A INPUT -m state --state NEW -m tcp - ...

  10. 扩展第三方DropDownMenu

    找工作之际,静下心总结工作中的想法. 我的简书 原来的效果 Paste_Image.png #解析结构 导读 想要扩展首先我需要执行下面几个步骤 1.fork DropDownMenu到自己的gith ...