HTML5中video的使用一
<!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的使用一的更多相关文章
- 解决html5中video标签无法播放mp4问题的办法
这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...
- HTML5中video 和 ogg
HTML5中 的ogg 从网上学习HTML5之video时看到了下面的代码,不太清楚ogg是什么,于是搜索了一些知识点供了解.
- HTML5中video标签与canvas绘图的使用
video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang=&quo ...
- 关于HTML5中video标签的奇怪现象
很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html&g ...
- 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
- 【HTML5】HTML5中video元素事件详解(实时监测当前播放时间)
html 代码..video后边几个元素,可处理ios 系统的兼容性 <video id="myVideo" controls="controls" po ...
- HTML5中Video和Audio
相关属性 src属性 该属性指定媒体数据的URL地址. autoplay属性 在该属性中指定是否在页面加载后自动播放,使用方法: <video src="test.mov" ...
- 关于HTML5中Video标签无法播放mp4的解决办法
1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...
- html5 中video标签属性
<video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.j ...
随机推荐
- 论山寨手机与Android联姻 【8】 自己动手做XP手机
2010年1月20日,ViewSonic在北京发布了一款真正意义的电脑手机VCP08.根据商家的宣传,VCP08之所以能够被称为真正的电脑手机,是因为“该机做到了把真正的WindowsXP操作系统嵌入 ...
- Qt for Android遇到的几个错误解决[Win7 + Qt5.6 +jdk 8u91]
[1]SDK Manager无法更新Android SDK安装后需要运行SDK Manager下载安装包,默认从google网站下载,但被GWF和谐了,感谢一位网友提供的镜像站点.具体步骤是:运行SD ...
- 大数据为什么要选择Spark
大数据为什么要选择Spark Spark是一个基于内存计算的开源集群计算系统,目的是更快速的进行数据分析. Spark由加州伯克利大学AMP实验室Matei为主的小团队使用Scala开发开发,其核心部 ...
- 跨平台的C++应用和UI开发库 QT
跨平台的C++应用和UI开发库 QT 运行环境: 授权方式:BSD 软件大小:M 下载量:3912 更新日期:2012-04-05 来源地址: 联系作者:Linux Qt是诺基亚开发的一个跨平 ...
- Java书籍推荐
Java书籍推荐 转自:http://www.cnblogs.com/exclm/archive/2009/01/03/1367597.html 一.入门 <Java 2从入门到精通>- ...
- 习题3.15 自调整表Find例程
#include<stdio.h> #include<stdlib.h> typedef int * List; /* 自调整表的Find数组实现 */ int Find(Li ...
- 收敛 p75
三种收敛.中心极限定理.大数定理.delta方法
- android setCompoundDrawables和setCompoundDrawablesWithIntrinsicBounds差别
手工设置文本与图片相对位置时.经常使用到例如以下方法: setCompoundDrawables(left, top, right, bottom) setCompoundDrawablesWithI ...
- C#.net连接SQLite及遇到的问题
1.Slite简介 SQLite,是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低,在嵌入式设备中,可能只需 ...
- Fedora 20忘记root密码
1.忘记root密码的情况下.用sudo账户$sudo su就行了. 2.直接sudo passwd root就重置了roor密码了.