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. Android之mtk上传log

    Android之mtk上传log 1,打开浏览器 2.输入地址http://eservice.mediatek.com/eservice-portal/login 3.输入用户名,密码 4.提eser ...

  2. Spring IOC/DI- 3 different types

    理论: IOC(Inversion of Control控制反转) DI(依赖注入) (Dependency Injection)   它不是一种技术而是一种思想.当初IOC理论的提出就是为了解决对象 ...

  3. 里面的div怎么撑开外面的div,让高度自适应

    关于容器高度自适应的兼容性问题.1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-h ...

  4. MySQL使用用户变量更新分组排序

    第一个需求是根据A字段进行排序,排序结果更新到B字段 简单搜索之后,很快得到答案 http://dev.mysql.com/doc/refman/5.7/en/update.html ; ) ORDE ...

  5. cf Gym 101086M ACPC Headquarters : AASTMT (Stairway to Heaven)

    题目: Description standard input/output As most of you know, the Arab Academy for Science and Technolo ...

  6. Codility Tree Height

    public class HeightOfTreeSolution { static int height=-1; public int solution(Tree T) { // write you ...

  7. SpringMVC Model

    处理模型数据 ModelAndView:处理方法返回值类型为ModelAndView时,方法体即可通过该对象添加模型数据. @ModelAttribute:方法入参标注了该注解后,入参对象会放到数据模 ...

  8. css中的一些概念

    1.伪类与伪元素 1.单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素. 2.对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用 ...

  9. php fastcgi_finish_request让你的程序由等待时间，瞬间完成，提高用户体验

    当PHP运行在FastCGI模式时,PHP FPM提供了一个名为fastcgi_finish_request的方法.按照文档上的说法,此方法可以提高请求的处理速度,如果有些处理可以在页面生成完后再进行 ...

  10. 织梦系统dedecms如何开启伪静态

    做为一名网站建设工程师,必须要考虑到网站优化方面的工作,那么选择CMS系统的时候,有良好的网站 优化功能就是一个好的CMS的标准之一,而系统是否支持伪静态,则是URL优化的工作之一,而织梦系统能良好的 ...