文档章节

HTML5 video标签

ForingY
 ForingY
发布于 2015/12/04 09:43
字数 297
阅读 126
收藏 2
点赞 0
评论 0

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
博文 252
码字总数 156129
作品 0
杭州
程序员
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗 ⋅ 2017/03/04 ⋅ 0

html5-web本地存储

在html5中为我们提供了一种本地缓存机制,它将取代我们的cookie,并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage,和...

zting科技 ⋅ 2017/01/10 ⋅ 0

爱创课堂每日一题第四十八天- html5有哪些新特性、移除了那些元素?

问题: html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? 答案: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务...

全栈web笔记 ⋅ 2017/11/07 ⋅ 0

可用但最不常见的 HTML5 标签

原文地址:The most uncommon HTML5 tags you can use right now 原文作者:Pedro M. S. Duarte 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:lsvih 校对者:sophi...

lsvih ⋅ 05/19 ⋅ 0

实现多个标签页之间通信的几种方法(sharedworker)

示例地址 prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信。我目前想到的方法有三种:使用websocket协议、通过localstorage、以及使用html5浏览器的新特性SharedW...

ITgecko ⋅ 04/11 ⋅ 0

2018-05-24 H5新元素搭建个人博客(仿Ghost开源)

一、语义化元素 1.1 HTML5出来之前,我们往往使用div元素来将网页分成一个个大小不一的区域,尽管可以添加class属性、id属性,然后通过在css当中对class属性、id属性添加样式,但是这些div元...

瑾瑜爱上猫 ⋅ 05/23 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 57分钟前 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部