HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。
实例
为视频创建简单的播放/暂停以及调整尺寸控件：
<!DOCTYPE html>
<html>
<body> <div style="text-align:center;">
<!--添加按钮，input button都可以-->
<input type="button" value="播放/暂停" onclick="playstop()"></input>
<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 playstop()
{
if(myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
/*放大，自己规定大小，注意不要加px*/
function makeBig()
{
myVideo.width=900;
} function makeSmall()
{
myVideo.width=320;
} function makeNormal()
{
myVideo.width=420;
}
</script> </body>
</html>
<video src="/i/movie.ogg" width="320" height="240" controls="controls">
例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
视频格式
当前，video 元素支持三种视频格式：
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
HTML5 <video> - 使用 DOM 进行控制的更多相关文章
- HTML5 视频（二） <video> 使用 DOM 进行控制
HTML5 <video> 使用 DOM 进行控制 一.HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音 ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- HTML5: HTML5 Video(视频)
ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...
- 使用jQuery和CSS自定义HTML5 Video 控件 简单适用
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...
- Html5 Video 实现方案
来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...
- 浅谈html5 video 移动端填坑记
这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...
- DCloud-Video：Html5 Video 实现方案
ylbtech-DCloud-Video:Html5 Video 实现方案 1.返回顶部 1.1. http://ask.dcloud.net.cn/article/569 1.2. 一. Html5 ...
- 移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- 移动端HTML5<video>视频播放优化实践[转]
http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...
随机推荐
- matlab 视频转换到图像并保存
图像处理中像Adas.车辆检测等都需要采用视频文件比较好处理一点,利用帧差法.背景减法.光流法等,那么将视频文件转换到图像文件怎么做呢?话不多说,见代码一目了然: %================= ...
- Ajax聊天
结构: index.html <!DOCTYPE html> <html> <head> <title>index.html</title> ...
- Android NDK 项目依赖简单示例
目录文件结构如图, 进入main目录执行命令 .ndkbuild NDK_MODULE_PATH=../ 说明 .ndkbuild请替换成有效的ndk-build的命令 所有文件下载 http://p ...
- 声明变量，一定要用 var！
public static T TryGet<T>(Func<T> func, T ifError = default(T)) { try { return func(); } ...
- 给libpcap增加一个新的捕包方法
libpcap是一个网络数据包捕获函数库,功能非常强大,提供了系统独立的用户级别网络数据包捕获接口,Libpcap可以在绝大多数类unix 平台下工作.大多数网络监控软件都以它为基础,著名的tcpdu ...
- 20169212《Linux内核原理及分析》第十二周作业
格式化字符串漏洞实验 格式化字符串漏洞是由像 printf(user_input) 这样的代码引起的,其中 user_input 是用户输入的数据,具有 Set-UID root 权限的这类程序在运行 ...
- 深入浅出Mybatis系列（七）---mapper映射文件配置之insert、update、delete
上篇文章<深入浅出Mybatis系列(六)---objectFactory.plugins.mappers简介与配置>简单地给mybatis的配置画上了一个句号.那么从本篇文章开始,将会介 ...
- HEAD FIRST HTML & CSS学习笔记
CSS部分 1. border-bottom属性控制元素下边框的外观. eg: border-bottom:1px solid maroon; P265 下划线 text-decoration: ...
- ArcGIS Add-in插件开发从0到1及实际案例分享
同学做毕设,要求我帮着写个ArcGIS插件,实现功能为:遍历所有图斑,提取相邻图斑的公共边长及其他属性(包括相邻图斑的ID),链接到属性表中.搞定后在这里做个记录.本文分两大部分: ArcGIS插件开 ...
- Linux x64 下 Matlab R2013a 300 kb 脚本文件调试的 CPU 占用过高问题的解决办法
(1) 系统+软件版本 CentOS 6.5 (Final), 64 位,内核initramfs-2.6.32-431.5.1.el6.x86_64, MATLAB Version: 8.1.0.60 ...