文档章节

HTML5 video标签

ForingY
 ForingY
发布于 2015/12/04 09:43
字数 297
阅读 130
收藏 2

HTML

<video id="v_video" src="" class="video-js vjs-default-skin" data-setup="{}" controls preload="none" poster="../../../imgs/0000.jpg"></video>

JS

<script type="text/javascript">
	var myVideo = document.getElementById('v_video');//获取video元素
	eventTester = function(e) {
		myVideo.addEventListener(e, function() {
			console.log(e);
			if(e == "ended"){
				$("#"+playfile).attr('class','dd'); 
		 		$("#"+playfile).attr('src','../../../imgs/1097510.png'); 
		 		$("#"+playfile).removeAttr('onclick');
		 		$("#"+playfile).attr("onclick","viewplay(this)");
			}else if(e == "pause"){
		 		$("#"+playfile).attr('class','dd'); 
		 		$("#"+playfile).attr('src','../../../imgs/1097510.png'); 
		 		$("#"+playfile).removeAttr('onclick');
		 		$("#"+playfile).attr("onclick","viewplay(this)");
			}else if(e == "play"){
		 		$("#"+playfile).attr('class','dd'); 
		 		$("#"+playfile).attr('src','../../../imgs/1097509.png'); 
		 		$("#"+playfile).removeAttr('onclick');
		 		$("#"+playfile).attr("onclick","StopPlayback(this)");
			}
		});
	};
 	eventTester("loadstart"); //客户端开始请求数据 
 	eventTester("progress"); //客户端正在请求数据 
 	eventTester("suspend"); //延迟下载 
 	eventTester("abort"); //客户端主动终止下载(不是因为错误引起), 
 	eventTester("error"); //请求数据时遇到错误 
 	eventTester("stalled"); //网速失速 
	eventTester("play"); //play()和autoplay开始播放时触发 
	eventTester("pause"); //pause()触发 
 	eventTester("loadedmetadata"); //成功获取资源长度 
 	eventTester("loadeddata"); // 
 	eventTester("waiting"); //等待数据,并非错误 
	eventTester("playing"); //开始回放 
 	eventTester("canplay"); //可以播放,但中途可能因为加载而暂停 
 	eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕 
 	eventTester("seeking"); //寻找中 
 	eventTester("seeked"); //寻找完毕 
 	eventTester("timeupdate"); //播放时间改变 
	eventTester("ended"); //播放结束 
 	eventTester("ratechange"); //播放速率改变 
 	eventTester("durationchange"); //资源长度改变 
 	eventTester("volumechange"); //音量改变
 </script>


© 著作权归作者所有

共有 人打赏支持
ForingY
粉丝 23
博文 272
码字总数 156129
作品 0
杭州
程序员
私信 提问
最好的 6 个 HTML5 的多媒体播放器

是 HTML5 中新引入的标签,用来在 Web 网页中嵌入视频播放功能,无需 Flash 和其他嵌入式插件的支持,是浏览器内建的功能,不过 旨在一些高级浏览器中支持,例如 Firefox, Safari, Chrome, a...

红薯
2011/11/27
9.3K
9
HTML5 视频转换软件 Freemake Video Converter

HTML5的Video标签可以说算是HTML5的重头戏,各大浏览器都纷纷响应,现代浏览器都能支持Video标签,基于Video标签的播放器也越来越多,但问题是每个浏览器所支持的视频格式不同,想在各大浏览...

海纳百川
2013/01/14
0
1
现在就开始使用 HTML5 的十大原因

日期:2011/12/05 来源:GBin1.com 你 难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码。HTML5是w...

gbin1
2011/12/07
4.1K
31
HTML4 和 HTML5 的10个关键区别

HTML5是HTML标准的下一个版本。越来越多的程序员开始HTML5来构建网站。如果你同时使用HTML4和HTML5的话 ,你会发现用HTML5从头构建,比从HTML4迁移到HTML5要方便很多。虽然HTML5没有完全颠覆...

虫虫
2011/10/13
89.7K
14
HTML5怎么就成了RIA“杀手”?

最近,我想IT领域最为火爆的一个词汇就是:HTML5了。随着Google Wave揭开面纱,FireFox 3.5、Opear 10、Chrome相继支持HTML5特性后,本来就不是一个新词汇的HTML5突然之间进入到了更多人的视...

老枪
2009/07/22
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

新手也能看懂,消息队列其实很简单

该文已加入开源项目:JavaGuide(一份涵盖大部分Java程序员所需要掌握的核心知识的文档类项目,Star 数接近 16k)。地址:https://github.com/Snailclimb/JavaGuide. 本文内容思维导图: 消息...

阿里云官方博客
11分钟前
0
0
如何在Chrome浏览器中启动deviceready事件(尝试调试phonegap项目)?

我正在开发PhoneGap应用程序,我希望能够在Chrome中调试它,而不是在电话上调试。但是,我在onGetReady()函数中初始化我的代码,该函数在PhoneGap触发“deviceready”事件时触发。由于Chr...

kisshua
今天
9
0
nginx中部署vue打包后的静态文件

如何在nginx中部署静态资源就不描述了, 请看我的这篇博客 将vue脚手架项目打包后的静态文件放到nginx上, 发现有个问题, 即url上有#, 怎么去掉这个#呢. 1 项目中router的mode 路由的mode要为h...

克虏伯
今天
13
0
JS容易理解错误的地方

在这端代码执行的末尾,你会不会hi变量回事函数中的hi了?你会不会认为这不是按引用传递了? 对值传递和引用传递产生质疑了? 1 var hi = {};2 function sayHello(hi) { ...

器石_
今天
9
0
Java开发学习--MongoDB

之前只学过sql,第一次使用非关系型数据库。以前对于关系型数据库与非关系型数据库的概念很模糊,通过这次的学习对这两者有了一个清晰的概念。 主键 在MongoDB中,主键名叫"_id",如果在生成...

微笑向暖wx
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部