<!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. offsetParent和parentNode区别

    offsetParent用的最普遍的就是来计算元素在页面中的位置,前面的日志理讲了 通过getBoundingClientRect() 来获取页面中元素的位置,不过这只支持最新的浏览器,如果要兼容像O ...

  2. 微信cookie内容

    #LWP-Cookies-1.0 Set-Cookie3: webwx_data_ticket="AQeVHpn/pdyrAQHCl++4ZvS0"; path="/&q ...

  3. cdoj 排名表 拓扑排序 排名输出 贪心

    //并不理解为什么需要反向建图,由大到小倒序确定排名.感觉正向由小到大和反向由大到小应该是一样的. 解:拓排+贪心,反向建边,先找排名靠后的(now,不知道为什么) #include<cstdi ...

  4. Linux学习笔记4-三种不同类型的软件的安装（绿色软件、rpm软件、源代码软件）

    在Linux下软件分三种: 1.绿色软件:即不用安装直接就能用的软件 2.rpm安装包:以rpm结尾的可执行文件  3.源码文件:没有进行过编译和打包的文件,需要编译后再进行安装 一.绿色软件的安装 ...

  5. AndroidUI 视图动画-混合动画效果 （AnimationSet）/动画效果监听

    在前面介绍了几种动画效果:透明动画效果(AlphsAnimation).移动动画效果(TranslateAnimation).旋转动画效果(RotateAnimation).缩放动画效果(ScaleA ...

  6. WinEdt7.0 初试

    刚刚开始学的时候,安装就出了些问题(关于安装的问题,请看我之前的文章)不知道如何点击运行,编译.看了些博客论坛.终于成功了. 首先先写一个小代码: \documentclass[UTF8]{ctexa ...

  7. v​s​快​捷​键

    Ctrl+E,D ----格式化全部代码 Ctrl+A+K+FCtrl+E,F ----格式化选中的代码 Ctrl+K+FCTRL + SHIFT + B生成解决方案 Alt+B+B 或 F6 生成当 ...

  8. Eclipse下运行拷贝的项目，更改项目名后报404

    右键项目->Properties->Web Project Settings 将“Context root”改为你的项目名称

  9. java：添加一条数据到数据库中文乱码

    在数据库链接地址后面加上:characterEncoding=UTF8 如:jdbc\:mysql\://localhost\:3306/db_sjzdaj?relaxAutoCommit=true& ...

  10. OCP prepare 20140626

    1. 查询空值  条件为<>''   是查不出结果的. 如果要查,应该使用  is not null 来查. QUESTION NO: 135 View the Exhibit and e ...