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. json_encode 中文乱码

    用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似"\u***"的格式, 还会在一定程度上增加传输的数据量. 而在PHP5.4, 这个问题终 ...

  2. springmvc的foward和redirect跳转简单解析

    Spring MVC 中,我们在返回逻辑视图时,框架会通过 viewResolver 来解析得到具体的 View,然后向浏览器渲染.假设逻辑视图名为 hello,通过配置,我们 配置某个 ViewRe ...

  3. Android Studio安装和配置（个人研究，有错请指导）

    安装Android Studio的原因:公司有app开发者,然而公司没有测试,只好互相测试,本人并没有接触过app开发,纯小白: 自己试着安装了一下Android Studio来这里记录并分享遇到的问 ...

  4. 重温Javascript第一章

    一.script标签 script标签有6个属性,其中一个废弃,五个可选. 按照传统的写法,<script>的标签都是放在<head>元素中,但是在<head>中包 ...

  5. jsexcel导出插件

    ExcelTable.js /* * author:wenluanlai */ (function ($) { Date.prototype.Format = function (fmt) { var ...

  6. 判断一个url地址是不是404状态（用curl函数）

    <?php $url = "http://www.kxblogs.com/n/20161108/74429879.html"; $ch = curl_init (); cur ...

  7. oracle当前的连接数

    怎样查看oracle当前的连接数呢?只需要用下面的SQL语句查询一下就可以了. select * from v$session where username is not null select us ...

  8. ArcGIS GDB 文件中的lock文件影响复制

    复制或压缩gdb文件的时候,经常碰到有lock文件,解决方法是: 在catalog中停止相应的地图服务 如果用catalog预览过相应的地图,关闭catalog

  9. visio个人专注

    字体颜色 1 填充 2 标注 3 箭头 4 线条 5 粗细 6

  10. Xcode相关整理

    阅读目录 javadoc格式文档注释插件 xcodekit插件 常用快捷键 XCode中快捷健字符与MAC键盘对应关系: 添加自动生成格式为javadoc文档注释的插件VVDocumenter 首先推 ...