<!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. makefile编写差异

    由于zlib动态库在linux下引用的问题引出了对于简练的makefile的学习.之前通过看网络上的一些文章自己也算简单了解如何编写一个makefile,可总是不那么美观,今天经过辉哥的指点,对于ma ...

  2. Android：实现仿 美团/淘宝 多级分类菜单效果

    本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量许多时能够考虑採用两级分类.而诸如美团这样的表现方式是一个不错的选择. 首先上效果图:      主要代码: 1. PopupWin ...

  3. UNIX网络编程---传输层：TCP、UDP、SCTP（二）

    UNIX网络编程----传输层:TCP.UDP.SCTP 一.概述 本章的焦点是传输层:包括TCP.UDP.和SCTP(流控制传输协议).SCTP是一个较新的协议,最初设计用于跨因特网传输电话信令. ...

  4. Oracle方向

    从毕业到现在工作已经4年了,入职前去过私企,干过外企,当前到了国企,各有各的不同,对于不同的人,有不同的适合的选择. 这几年的工作中也积累了不少知识,业务上的.技术上的,但始终觉得没有掌握一门核心,没 ...

  5. 两个有序list合并

    package 剑指office; import java.util.ArrayList; import java.util.List; public class ListMerge { /** * ...

  6. CDH（cdh5.7） 上集成 kafka

    CDH 可以在线下载: 离线安装

  7. C/C++ 结构体成员在内存中的对齐规则(转载)

    这几天在看王艳平的<windows 程序设计>,第5章讲解了MFC框架是怎么管理窗口句柄到窗口实例之间的映射,用到了两个类CPlex和CMapPtrToPtr,用于管理内存分配的类(避免因 ...

  8. Centos for php+mysql+apache

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...

  9. struts2笔记02-action和Action类

    1.action      action表示一个struts2的请求! 2.Action类 能够处理struts2请求的类. (1)属性的名字需要与JavaBeans属性保持一致. 属性的类型可以是任 ...

  10. caffe 配置 札记

    cudnn的配置 1. 安装前请去先官网下载cuDNN (cudnn-7.0-linux-x64-v3),建议安装v3,v4有些问题. 将cudnn-7.0-linux-x64-v3解压后会有两个文件 ...