HTML5 视频（二） <video> 使用 DOM 进行控制
HTML5 <video> 使用 DOM 进行控制
一、HTML5 <video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head> <body>
<div style="text-align:center;">
<video id="video1" width="420" style="margin-top:55px;">
<source src="img/mov_bbb.mp4" type="video/mp4" />
<source src="img/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video.
</video>
<br />
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
</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> </body> </html>
1、chrome浏览器测试
2、IE9在测试
3、IE8浏览器测试
HTML5 视频（二） <video> 使用 DOM 进行控制的更多相关文章
- HTML5视频标签video
现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...
- HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...
- HTML 5 简介、视频、Video + DOM、音频、拖放
HTML5 是下一代的 HTML. 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
- 在原生开发中控制HTML5视频!
在原生开发中控制HTML5视频! PC端 视频如何自动播放! 在video标签中添加 autoplay + muted(静音属性!) 温馨提醒: video是一个块级元素! 但是唯一的缺陷就是视频没有 ...
- HTML5视频Video 音频Audio
视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...
- [转] Android 4.4中播放HTML5视频<video>的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
- 使用 video.js 开发 HTML5 视频页面
时间 2015-05-13 17:11:58 The GIS Guy 原文 http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...
- 【转】Android 4.4中播放HTML5视频<video>的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
随机推荐
- Odoo 二次开发教程(五)-新API的介绍与应用
[关于odoo新API的介绍,Internet上资料很少,或者不够完整详实,这会对初学者造成很大的困惑,本篇的目的就是希望能帮助新手了解新API的大概] odoo 新api的实现是借助于python装 ...
- Kafka设计解析（一）- Kafka背景及架构介绍
本文转发自Jason’s Blog,原文链接 http://www.jasongj.com/2015/01/02/Kafka深度解析 背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅 ...
- Tomcat 配置续
为了便于tomcat升级 不用频繁重新修改相关配置文件 不用重新部署原有项目 新建目录将tomcat安装目录中的conf,log,webapp,work文件夹复制到里面,然后将系统变量里的CATALI ...
- Chrome必备的扩展
Devtools Terminal ——浏览器终端.牛逼的不得了! LiveReload——为官方 LiveReload 应用程序(Mac 和 Windows)和第三方,例如 guard-livere ...
- MySQL 注册码
最近开发是用MySQL数据库,之前安装后,每次打开Navicat Premium 都提示 “试用一个月”,“ 注册”,然后为了方便,就都选择了 试用的, 一个月后,就必须的输入注册码,(还有一个是 什 ...
- ios视频播放器，代码和界面分离
最近业余时间整理的一个ios播放器,界面采用storyboard,以前几乎都是用代码布局,但是用过一个项目storyboard后,就感觉storyboard很靠谱,团队合作版本控制的问题解决其实很简单 ...
- 你的应用是如何被替换的，App劫持病毒剖析
一.App劫持病毒介绍 App劫持是指执行流程被重定向,又可分为Activity劫持.安装劫持.流量劫持.函数执行劫持等.本文将对近期利用Acticity劫持和安装劫持的病毒进行分析. 二.Activ ...
- C++11 并发指南七(C++11 内存模型一：介绍)
第六章主要介绍了 C++11 中的原子类型及其相关的API,原子类型的大多数 API 都需要程序员提供一个 std::memory_order(可译为内存序,访存顺序) 的枚举类型值作为参数,比如:a ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- java中文乱码解决之道（三）-----编码详情：伟大的创想---Unicode编码
随着计算机的发展.普及,世界各国为了适应本国的语言和字符都会自己设计一套自己的编码风格,正是由于这种乱,导致存在很多种编码方式,以至于同一个二进制数字可能会被解释成不同的符号.为了解决这种不兼容的问题 ...