Video事件、方法-- DOM
<video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。
下例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。
实例
为视频创建简单的播放/暂停以及调整尺寸控件:
<div style="text-align:center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="420" style="margin-top:15px;">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div> <script type="text/javascript">
var myVideo=document.getElementById("video1"); function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
} function makeBig()
{
myVideo.width=560;
} function makeSmall()
{
myVideo.width=320;
} function makeNormal()
{
myVideo.width=420;
}
</script>
Video事件、方法-- DOM的更多相关文章
- jQuery 事件方法
事件方法触发器或添加一个函数到被选元素的事件处理程序. 下面的表格列出了所有用于处理事件的 jQuery 方法. 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将 ...
- JQuery(选择器、事件、DOM操作)
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- jQuery 事件 方法
jQuery 事件方法 事件方法触发器或添加一个函数到被选元素的事件处理程序. 下面的表格列出了所有用于处理事件的 jQuery 方法. 方法 描述 bind() 向元素添加事件处理程序 blur() ...
- 5事件DOM零级事件跟DOM二级事件
事件的行为传播,行为本身跟事件绑定没有关系:1.全新认识事件(某一个具体的行为)->行为本身:浏览器天生自带的一些行为操作->click,mouseover(mouseenter),mou ...
- js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- jQuery入门基础(事件、DOM操作)
http://www.w3school.com.cn/b.asp 一.事件 1.常规事件——把js事件前面的on去掉 比如:js:onclick——JQuery:click 下面是 jQuery 中事 ...
- Jq_DOM元素方法跟JQuery 核心函数跟JQuery 事件方法
JQuery DOM 元素 函数 描述 .get() 从队列中删除所有未运行的项目. .ind ...
- jQuery绑定事件方法及区别(bind,click,on,live,one)
第一种方式: ? 1 2 3 4 5 $(document).ready(function(){ $("#clickme").click(function(){ alert(& ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
随机推荐
- hadoop伪分布安装
解压 将安装包hadoop-2.2.0.tar.gz存放到/home/haozhulin/install/目录下,并解压 #将hadoop解压到/home/haozhulin/install路径下,定 ...
- Gilde加载网络图片(一)
前两天 一个朋友要在本地加载几M的大图 用于用户滚动查看.按照思路 是压缩后加载显示但是这样会不清晰, 其实gilde用来加载图片 很牛掰 于是了解一下 下面贴上两个工具类: package com. ...
- HNOI 2008:水平可见直线
Description 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为 可见的,否则Li为被覆盖的. 例如,对于直线: L1:y ...
- Can't initialize OCI. Error -1
今天使用Toad连接Oracle时出现"Can't initialize OCI. Error -1" 解决方法 因为是刚做的windows 7系统,所以没有设置更改通知的时间 把 ...
- selenium webdriver 环境搭建--java
selenium java环境的安装可以分为三个部分:jdk.eclipse和selenium. jdk jdk(java development kit)是sun公司针对java开发人员的产品,是整 ...
- Ajax初步实现页面局部内容更替
类似于QQ邮箱的那种局部页面跳转,单页应用常用到,目前很多网页都是这种,但是弊端就是一次加载过多资源,首次加载卡出翔啊
- show drop down menu within/from action bar
show drop down menu within/from action bar */--> pre { background-color: #2f4f4f;line-height: 1.6 ...
- phpDesigner 工具快捷键巧用
Zend Studio工具默认的快捷方式, 如果你从事php工作, 自然能够体会到一些便利性, 比如CTRL+D, 可以直接复制当前一行, 这对于重复代码及调试都有很大帮助. Ctrl+U转换大小写之 ...
- liunx shell数字相加
#!/bin/bash num1= num2= num3= #echo $($num1+$num2+$num3)#错误写法 echo $[$num1+$num2+$num3] echo $(($num ...
- nyoj 757 期末考试【优先队列+贪心】
期末考试 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 马上就要考试了,小T有许多作业要做,而且每个老师都给出来了作业要交的期限,如果在规定的期限内没 交作业就会扣 ...