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 ...
随机推荐
- app被Rejected 的各种原因翻译(转)
原文:http://www.cnblogs.com/sell/archive/2013/02/16/2913341.html 1. Terms and conditions(法律与条款) 1.1 As ...
- 用C#实现生成PDF文档
using System; using System.IO; using System.Text; using System.Collections; namespace PDFGenerator { ...
- poj 1064 Cable master ,二分 精度!!!
给出n根绳子,求把它们分割成K条等长的绳子的最大长度是多少? 二分 用 for(int i=0; i<100; ++i) 取代 while(r-l>eps) 循环100次精度能达到1e ...
- QRMaker生成二维码,支持中文
QRMaker如果想支持中文,可以将中文转为UTF8,然后用InputDateB直接传入Byte() Option Explicit Private Declare Function WideChar ...
- SQL 语句整理
1. /* SQL CASE 语句写法 * SELECT TABLE1.USER_ID, TABLE1.COMP_CODE, TABLE1.DEPT_CODE, TABLE1.USER_ ...
- Javascript 常用
第一步,实现百度输入法的页面布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- iOS 自定义button
UIButton默认的布局是左侧image,右侧title,如果想要改变image与title的frame,直接设置是不会有效果的.可以通过titleEdgeInsets.imageEdgeInset ...
- Oracle查看被锁的表和解锁[转]
查看被锁的表 select p.spid,a.serial#, c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$p ...
- IS--A与 Has-a 区别
- Windows的历史zt
原文地址:http://windows.microsoft.com/zh-CN/windows/history#T1=era0 1975–1981:Microsoft 起步 Microsoft 联合创 ...