使用HTML5视频事件示例
<!DOCTYPE html > <html >
<head>
<title>Video events example</title>
<!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->
</head>
<body > <div>
<label>Type or paste a video URL: <br/>
<input type="text" id="videoFile" style="width: 300px;" title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />
<button id="loadVideo" title="Load video button" >Load</button>
</label>
</div>
<video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element">
HTML5 Video is required for this example
</video> <div id="buttonbar" style="display: none; font-size:larger;")>
<button id="restart" title="Restart button">[]</button>
<button id="slower" title="Slower playback button">-</button>
<button id="rew" title="Rewind button" ><<</button>
<button id="play" title="Play button">></button>
<button id="fwd" title="Forward button" >>></button>
<button id="faster" title="Faster playback button">+</button>
<button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
<br />
<label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button>
<br />
<label> Volume: </label>
<button id="volDn" title="Volume down button">-</button>
<button id="volUp" title="Volume up button">+</button>
<br />
<div id="status" >Length(seconds): <span id="vLen"></span> <br />
Current time: <span id="curTime" title="Current time"></span><br /> Remaining time: <span id="vRemaining" title="Remaining time"></span></div>
</div>
<br/> <div title="Error message area" id="errorMsg" style="color:Red;"></div>
<div title="Event status area" >
<label>oncanplaythrough: </label><span class="stats" id="cpt"></span><br />
<label>onloadstart: </label><span class="stats" id="ls"></span><br />
<label>onprogress: </label><span class="stats" id="pg"></span><br />
<label>onloadeddata: </label><span class="stats" id="ld"></span><br />
<label>onended: </label><span class="stats" id="ndd"></span><br />
<label>onemptied: </label><span class="stats" id="mt"></span><br />
<label>onstalled: </label><span class="stats" id="stall"></span><br />
<label>onwaiting: </label><span class="stats" id="waiting"></span><br />
<label>ondurationchange: </label><span class="stats" id="dc"></span><br />
</div> <script>
var video = document.getElementById("Video1");
var vLength;
var pgFlag = ""; // used for progress tracking
if (video.canPlayType) { // 检测是否支持HTML5视频标签 // 播放视频
function vidplay(evt) {
if (video.src == "") { // 初始化视频资源
getVideo();
}
if (video.paused) { //检测视频播放状态
video.play();
} else {
video.pause();
}
} // 从输入框获取视频文件
function getVideo() {
var fileURL = document.getElementById("videoFile").value; // 获取输入框的值
if (fileURL != "") {
video.src = fileURL;
video.load();
document.getElementById("play").click(); // 开始播放
} else {
errMessage("Enter a valid video URL"); // 抛出异常
}
} // 设置播放时间
function setTime(tValue) {
// 视频文件没有加载，则抛出异常
try {
if (tValue == 0) {
video.currentTime = tValue;
}
else {
video.currentTime += tValue;
} } catch (err) {
// 抛出异常
errMessage("Video content might not be loaded");
}
} // 改变音量
function setVol(value) {
var vol = video.volume;
vol += value;
if (vol >= 0 && vol <= 1) {
video.volume = vol;
} else {
video.volume = (vol < 0) ? 0 : 1;
}
}
// 按钮事件
// 播放
document.getElementById("play").addEventListener("click", vidplay, false);
// 重置视频
document.getElementById("restart").addEventListener("click", function () {
setTime(0);
}, false);
// 后退10秒
document.getElementById("rew").addEventListener("click", function () {
setTime(-10);
}, false);
// 前进10秒
document.getElementById("fwd").addEventListener("click", function () {
setTime(10);
}, false);
// 设置视频文件
document.getElementById("loadVideo").addEventListener("click", getVideo, false); // 音量按钮
document.getElementById("volDn").addEventListener("click", function () {
setVol(-.1); // 调低 10%
}, false);
document.getElementById("volUp").addEventListener("click", function () {
setVol(.1); // 升高 10%
}, false); // 播放速度按钮
document.getElementById("slower").addEventListener("click", function () {
video.playbackRate -= .25;
}, false);
document.getElementById("faster").addEventListener("click", function () {
video.playbackRate += .25;
}, false);
document.getElementById("normal").addEventListener("click", function () {
video.playbackRate = 1;
}, false);
document.getElementById("mute").addEventListener("click", function (evt) {
if (video.muted) {
video.muted = false;
} else {
video.muted = true;
}
}, false); // 抛出错误
video.addEventListener("error", function (err) {
errMessage(err);
}, true);
// 加载完毕
video.addEventListener("canplay", function () {
document.getElementById("buttonbar").style.display = "block";
}, false); // 显示视频的持续时间
video.addEventListener("loadedmetadata", function () {
vLength = video.duration.toFixed(1);
document.getElementById("vLen").textContent = vLength;
}, false); // 显示视频播放当前时间和剩余时间
video.addEventListener("timeupdate", function () {
// 当前时间
var vTime = video.currentTime;
document.getElementById("curTime").textContent = vTime.toFixed(1);
document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
}, false);
// 终止和播放事件来改变按钮的状态
video.addEventListener("pause", function () {
document.getElementById("play").textContent = ">";
}, false); video.addEventListener("playing", function () {
document.getElementById("play").textContent = "||";
}, false); video.addEventListener("volumechange", function () {
if (video.muted) {
// 如果没有声音，则显示该图标
document.getElementById("mute").innerHTML = "<img alt='volume off button' src='mute2.png' />";
} else {
// 如果有声音则显示该图标
document.getElementById("mute").innerHTML = "<img alt='volume on button' src='vol2.png' />";
}
}, false);
// 开始加载时触发事件
video.addEventListener("loadstart", function () {
document.getElementById("ls").textContent = "Started";
}, false);
// 加载结束时触发事件
video.addEventListener("loadeddata", function () {
document.getElementById("ld").textContent = "Data was loaded";
}, false);
// 视频播放结束时触发事件
video.addEventListener("ended", function () {
document.getElementById("ndd").textContent = "Playback ended";
}, false); video.addEventListener("emptied", function () {
document.getElementById("mt").textContent = "Video reset";
}, false); video.addEventListener("stalled", function () {
document.getElementById("stall").textContent = "Download was stalled";
}, false);
video.addEventListener("waiting", function () {
document.getElementById("waiting").textContent = "Player waited for content";
}, false);
video.addEventListener("progress", function () {
pgFlag += "+";
if (pgFlag.length > 10) {
pgFlag = "+";
}
document.getElementById("pg").textContent = pgFlag; }, false);
video.addEventListener("durationchange", function () {
document.getElementById("dc").textContent = "Duration has changed";
}, false);
video.addEventListener("canplaythrough", function () {
document.getElementById("cpt").textContent = "Ready to play whole video";
}, false);
} else {
errMessage("HTML5 Video is required for this example");
// 结束
}
// 显示错误信息
function errMessage(msg) {
// displays an error message for 5 seconds then clears it
document.getElementById("errorMsg").textContent = msg;
setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
}
</script> </body>
</html>
使用HTML5视频事件示例的更多相关文章
- 使用 HTML5 视频事件
转自:http://msdn.microsoft.com/zh-cn/library/hh924822(v=vs.85).aspx 为什么要使用事件? HTML5 视频对象提供了很多事件,这些事件可以 ...
- 使用 video.js 开发 HTML5 视频页面
时间 2015-05-13 17:11:58 The GIS Guy 原文 http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...
- javascript权威指南第13章 事件示例代码
html 部分 <!DOCTYPE html> <html> <head> <title>Event Bubling Example</title ...
- HTML5视频Video 音频Audio
视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...
- [转] Android 4.4中播放HTML5视频<video>的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
- html5视频全频播放
html5视频全频播放 旋转90度 对video进行缩放 修正position 效果还凑合 代码 $(media).rotate({ // angle: 90, duration: 100, anim ...
- HTML5视频标签video
现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...
- HTML5 视频规范简介
HTML5 视频规范简介 创建于 2013-02-03, 周日 00:56 作者 白建鹏 HTML 一词是“超文本标记语言”(Hyper-Text Markup Language)的缩写,是用于描 ...
- php大力力 [027节] 被百度收录较好的几个视频网站示例
php大力力 [027节] 被百度收录较好的几个视频网站示例 56网 很清晰 :2014 兄弟连高洛峰 PHP教程14.1.7 在PHP脚本中操作MySQL数据库4_视频在线观看 - 56.com 土 ...
随机推荐
- enable_shared_from_this类的作用和实现
使用举例 实际中, 经常需要在一个被shared_ptr管理的对象的内部获取自己的shared_ptr. 比如: 通过this指针来构造一个shared_ptr, 如下: struct Bad { v ...
- kerberos下JAVA代码操作hbase的方式（客户端方式，应用程序方式）
(一)如果部署JAVA 代码的主机用户获取了kerberos权限情况下 假设主机名是:client su - client 登录主机后 kinit -kt /keytab的路径/client.keyt ...
- javascript 原型及原型链详解
我们创建的每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向一个原型对象,而这个原型对象中拥有的属性和方法可以被所以实例共享. function Person(){ } Pe ...
- n皇后问题与2n皇后问题
n皇后问题 问题描述: 如何能够在 n×n 的棋盘上放置n个皇后,使得任何一个皇后都无法直接吃掉其他的皇后 (任两个皇后都不能处于同一条横行.纵行或斜线上) 结题思路: 可采用深度优先算法,将棋盘看成 ...
- delphi 数组复制利用CopyMemory 最为完美
在各网站的文章里面,见复制数据的方法中,有move的,有system.copy的,而要实际应用中,这两种方法,并不是很完美,会遇到一些问题,比如copy在记录里面的复制时,编译都过不去,而CopyMe ...
- 20165230 《Java程序设计》第1周学习总结
20165230 2017-2018-2 <Java程序设计>第1周学习总结 教材学习内容总结 本周通过学习了解了java的历史,地位,特点以及java的应用和基本的开发步骤,对Java有 ...
- Java读取properties文件连接数据库
先说为什么要有这种东西,或者我们为什么要用这种方式来写,先看经常用的方法,我们经常写的 package util; import java.sql.Connection; import java.sq ...
- 用golang 实现一个代理池
背景 写爬虫的时候总会遇到爬取速度过快而被封IP的情况,这个时候就需要使用代理了.在https://github.com/henson/ProxyPool 的启发下,决定自己实现一个代理池.项目已经开 ...
- 笔记：Maven 聚合和继承
聚合模块 我们希望一次构建两个或更多项目,而不是到每个模块的目录下分别执行mvn命令,Maven 聚合这一特性就是为该需求服务的, 为了使用聚合,我们必须创建一个聚合模块,通过该模块与其他项目聚合,并 ...
- 源码实现 --> itoa函数实现
itoa函数实现 itoa()函数的功能是将一个整数转换为一个字符串 例如12345,转换之后的字符串为"12345",-123转换之后为"-123",欢迎大家 ...