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>
controls属性供添加播放、暂停、音量控件。video标签下插入的内容是供不支持video的浏览器显示的
<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 进行控制的更多相关文章

  1. HTML5 视频（二） <video> 使用 DOM 进行控制

    HTML5 <video> 使用 DOM 进行控制 一.HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音 ...

  2. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  3. HTML5: HTML5 Video(视频)

    ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...

  4. 使用jQuery和CSS自定义HTML5 Video 控件 简单适用

    Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...

  5. Html5 Video 实现方案

    来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...

  6. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  7. DCloud-Video：Html5 Video 实现方案

    ylbtech-DCloud-Video:Html5 Video 实现方案 1.返回顶部 1.1. http://ask.dcloud.net.cn/article/569 1.2. 一. Html5 ...

  8. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  9. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

随机推荐

  1. CentOS6.4x64_安装Qt5

    1.安装Qt5.3.2x86 由于 OS是x64,Qt是x86,∴需要在 系统中安装相关的32位的程序(比如 报错"bad elf interpreter"的时候 就需要" ...

  2. 6.1-CALayer 使用

    @设置圆角 注意点 1圆角效果,并不是在给定frame布局后有,要给定内容后才有 //头像 NSData *data = [[DJXMPPTool sharedInstance].cardAvatar ...

  3. RANSAC　剔除错误匹配　估计模型

    随机抽样一致,这个算法,我以前一直都没有理解透彻.只知道可以用来直线拟合,网上大多数中文博客也都是写直线拟合的,但是用来匹配二维特征的时候,总还是没弄明白. 基本概念参考 http://www.cnb ...

  4. npm install报错Error: ENOENT

    E:\projects\ueditor\ueditor1_4_3_3-src>npm installError: ENOENT, stat 'C:\Users\Lucas\AppData\Roa ...

  5. MR21、MR22和CK24的区别

      MR21和CK24都是用于修改物料标准价,但两者功能和用法上有所区别:MR21是直接更改单价, CK24是在CK11N或CK40N价格评估的基础上的价格核发, CK24记录价格评估, 价格评估在做 ...

  6. Apache Commons BeanUtils

    http://commons.apache.org/proper/commons-beanutils/javadocs/v1.9.2/apidocs/org/apache/commons/beanut ...

  7. dos2unix 命令

    最近在学习shell编程,可是在<Linux程序设计>指定的网站上下载了源码,使用的时候却一直出问题.提示:"bash: ./here1:/bin/sh^M:损坏的解释器: 没有 ...

  8. sql server sql语句导入数据到execl2007中

    insert into OPENROWSET('Microsoft.ACE.OLEDB.12.0','Excel 12.0;Database=C:\c.xlsx','select 字段1,字段2 FR ...

  9. Code First Migrations 数据迁移小记

    用了codefirst后一个很大的问题就是代码中的属性字段与数据库中表的同步问题,删掉数据库重新生成当然可以解决,不过数据就丢失了(当然通过代码中初始化数据库添加数据也可以解决,初始化的任务可以通过重 ...

  10. Balanced Binary Tree [LeetCode]

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...