<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. Spark大数据处理技术

    全球首部全面介绍Spark及Spark生态圈相关技术的技术书籍 俯览未来大局,不失精细剖析,呈现一个现代大数据框架的架构原理和实现细节 透彻讲解Spark原理和架构,以及部署模式.调度框架.存储管理及 ...

  2. jboss项目迁移至WebLogic12

    1 weblogic 使用jtds-1.2.3.jar驱动链接MS SQL Server 2008的数据源配置 1.1 拷贝jtds-1.2.3.jar至D:\Oracle\Middleware\wl ...

  3. 【转】为ListView每个Item上面的按钮添加事件

    原文网址:http://blog.csdn.net/qq435757399/article/details/8256453 1.先看下效果图:        在这里仅供测试,我把数据都写死了,根据需要 ...

  4. Away3d 基础 1 ---对一个简单类的解释

    转自:http://www.cnblogs.com/nooon/archive/2009/05/16/1458334.html 原英文地址: http://www.flashmagazine.com/ ...

  5. Java for selenium(webdriver) 环境搭建

    开发环境 1. jdk1.7 2. Eclipse 3. selenium(selenium-java-2.42.2.zip) 将下载下来的 selenium-java-2.42.2.zip 解压, ...

  6. Oracle SQL编写注意事项

    1.SQL语句用大写的;因为Oracle总是先解析SQL语句,把小写的字母转换成大写的再执行. 2.数据表最好起别名;因为便于sql优化器快速分析. 3.尽量不要使用 insert into tabl ...

  7. Ubuntu全新系统一些配置

    0.安装JDK,http://www.oracle.com/technetwork/java/javase/downloads/index.html 1.安装Intellij IDEA,https:/ ...

  8. JS小知识点----基本包装类型和引用类型

    var s1 = "some text"; s1.color = "red"; alert(s1.color);  //弹出 underfined var s1 ...

  9. BI-SqlServer

    一.概述 SqlServer数据仓库 ETL组件 IntegrationService OLAP组件 AnalysisService 报表 ReportingService MDX(查多维数据集用的) ...

  10. JavaScript高级程序设计44.pdf

    unload事件 与load事件对应的是unload事件,这个事件在文档被完全卸载后触发,只要用户从一个页面切换到另一个页面,就会发生unload事件,最多的情况是清除引用,避免内存泄漏 与load事 ...