文档章节

HTML5 video标签

ForingY
 ForingY
发布于 2015/12/04 09:43
字数 297
阅读 126
收藏 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
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
给网页设计师的30个HTML5学习资源

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

晨曦之光
2012/03/09
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux环境搭建 | VMware下共享文件夹的实现

在进行程序开发的过程中,我们经常要在主机与虚拟机之间传递文件,比如说,源代码位于虚拟机,而在主机下阅读或修改源代码,这里就需要使用到 「共享文件」 这个机制了。本文介绍了两种共享文...

良许Linux
58分钟前
4
0
JUC锁框架——AQS源码分析

JUC锁介绍 Java的并发框架JUC(java.util.concurrent)中锁是最重要的一个工具。因为锁,才能实现正确的并发访问。而AbstractQueuedSynchronizer(AQS)是一个用来构建锁和同步器的框架,使用A...

长头发-dawn
今天
1
0
docker中安装了RabbitMQ后无法访问其Web管理页面

在官网找了"$ docker run -d --hostname my-rabbit --name some-rabbit -p 8080:15672 rabbitmq:3-management"这条安装命令,在docker上安装了RabbitMQ,,结果输入http://localhost:8080并不......

钟然千落
今天
4
1
spring-cloud | 分布式session共享

写在前面的话 各位小伙伴,你们有福了,这一节不仅教大家怎么实现分布式session的问题,还用kotlin开发,喜欢kotlin的小伙伴是不是很开心! 以前在写Android的时候,就对客户端请求有一定的认...

冯文议
今天
3
0
c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部