文档章节

HTML5 video标签

ForingY
 ForingY
发布于 2015/12/04 09:43
字数 297
阅读 128
收藏 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
杭州
程序员
HTML5 视频转换软件 Freemake Video Converter

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

海纳百川
2013/01/14
0
1
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
28个你必须知道的HTML5的新特性,技巧以及技术

原文:http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/ 译文来自:http://adamlu.com/?p=584 总结一下: 1. 新的Doctype 尽管......

山哥
2012/05/10
0
0
微信小程序 Html2Wxml4J 0.95 更新,支持 Video 和 Audio 解析

html2wxml4J是微信小程序前端html渲染组件html2wxml的后台接口Java版 本次更新内容: 【新增】Video视频标签解析 支持html5中Video标签大部分属性 支持自动播放 支持静音播放 【新增】Audio...

山东-小木
08/07
0
3
HTML5和CSS3不仅仅是两项新的Web技术标准

HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术。虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那...

课工场CC老师
2017/10/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
5
0
现场看路演了!

HiBlock
昨天
16
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
9
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
19
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部