<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的更多相关文章

  1. jQuery 事件方法

    事件方法触发器或添加一个函数到被选元素的事件处理程序. 下面的表格列出了所有用于处理事件的 jQuery 方法. 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将 ...

  2. JQuery(选择器、事件、DOM操作)

    一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...

  3. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  4. jQuery 事件 方法

    jQuery 事件方法 事件方法触发器或添加一个函数到被选元素的事件处理程序. 下面的表格列出了所有用于处理事件的 jQuery 方法. 方法 描述 bind() 向元素添加事件处理程序 blur() ...

  5. 5事件DOM零级事件跟DOM二级事件

    事件的行为传播,行为本身跟事件绑定没有关系:1.全新认识事件(某一个具体的行为)->行为本身:浏览器天生自带的一些行为操作->click,mouseover(mouseenter),mou ...

  6. js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  7. jQuery入门基础(事件、DOM操作)

    http://www.w3school.com.cn/b.asp 一.事件 1.常规事件——把js事件前面的on去掉 比如:js:onclick——JQuery:click 下面是 jQuery 中事 ...

  8. Jq_DOM元素方法跟JQuery 核心函数跟JQuery 事件方法

    JQuery DOM 元素 函数                            描述 .get()                           从队列中删除所有未运行的项目. .ind ...

  9. jQuery绑定事件方法及区别(bind,click,on,live,one)

    第一种方式: ? 1 2 3 4 5 $(document).ready(function(){  $("#clickme").click(function(){  alert(& ...

  10. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

随机推荐

  1. Eclipse中添加android sdk javadoc和source

    在 javadoc location path中添加file:/D:/Android_SDK/sdk/docs/reference/   在 source attachment中添加为 Externa ...

  2. C#语言的几个层次

    接到一位前不久C#培训学员的来信,这位学员虽然以前功底欠缺,但学习劲头很足,在培训中成长很快.即便基本吃透<.NET框架(修订版)>还嫌不够过瘾,一心要成为高手中的高手.来信的目的是希望我 ...

  3. BZOJ_1002_[FJOI2007]_轮状病毒_(递推+高精)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1002 )*&*(^&*^&*^**()*) 1002: [FJOI20 ...

  4. BZOJ2464: 中山市选[2009]小明的游戏

    2464: 中山市选[2009]小明的游戏 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 280  Solved: 124[Submit][Statu ...

  5. uploadify上传图片(限制最多五张)

    项目中遇到图片上传的情况,好多都是使用服务器上传控件进行上传的,很是不爽. 然后在网上找到了uploadify的方法,自己总结和修改后分享给大家. 项目文档预览: 1.引用原有css和js    &l ...

  6. 在CentOS上为DiscuzX3安装ImageMagick支持。

    找了几篇外文的,写的很好,按照参考安装成功! http://www.tecmint.com/install-imagemagick-in-linux/ ImageMagick is an free o ...

  7. asp.mvc 插件式框架

    参考文档: http://blog.csdn.net/bitfan/article/details/17260775 http://www.cnblogs.com/Mainz/archive/2012 ...

  8. Android 快捷方式

    1. 需要权限: <uses-permission android:name="com.android.launcher.permission.INSTALL_SHORTCUT&quo ...

  9. Hadoop--Map/Reduce实现多表链接

    MR实现多表连接的原理和单表连接时一样的,甚至比单表连接还要简单. 在map阶段只需要根据文件的名称区分左表还是右表.使用关联的字段作为key2. 在reduce中对values中的值分别存储到一个左 ...

  10. Ruby on Rails Session 2: How to install Aptana Studio 3 on Ubuntu 12.04 LTS

    Update: An updated version of these instructions for Ubuntu 12.10 (Quantal Quetzal) is available her ...