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. js生成二维码

    jquery.qrcode.js 使用 1. 加载 jQuery 和 jquery.qrcode.js: <script type='text/javascript' src='http://c ...

  2. Python文件使用“wb”方式打开，写入内容

    Python文件使用"wb"方式打开,写入字符串会报错,因为这种打开方式为:以二进制格式打开一个文件只用于写入.如果该文件已存在则将其覆盖.如果该文件不存在,创建新文件. 所以写入 ...

  3. curl上传图片文件

    为了优化网站,需要做静态化和,图片分离 暂时想到的方式是: 1,php//input  流方式上传到远程服务器 2,阿里云oss收费服务 3,curl上传图片 4,phpftp上传图片 5, 服务器同 ...

  4. 把本地仓库工程上传到github上和从gitbu同步工程到本地

    1.在本地产生秘钥和公钥 [root@jacky git_project]# ssh-keygen -t rsa -C "jacky-lulu@1073740572@qq.com" ...

  5. Python网络连接

    import appuifw as ui import httplib from os import abort uia=ui.app uin=ui.note uiq=ui.query e32=ui. ...

  6. TortoiseGit编辑全局变量支持https

    在windows,右键,进入tortoisegit的设置窗口,在左边树形菜单选Git,然后店"编辑全局.gid/config"按钮 输入以下文字 [http] sslVerify ...

  7. SPSS中两种重复测量资料分析过程的比较

    在SPSS中,有两个过程可以对重复测量资料进行分析:一种是一般线性模型的重复度量:一种是混合线性模型,对于同样的数据资料,使用两种过程分析出的内容不大一样,注意是内容而不是结果,只要操作正确,结果应该 ...

  8. 20145224&20145238 《信息安全系统设计基础》 第四次实验

    20145224&20145238 <信息安全系统设计基础>第四次实验 课程:信息安全系统设计基础 班级:1452 姓名:陈颢文 荆玉茗 学号:20145224 20145238 ...

  9. Web之路笔记之二 - CSS Positioning

    CSS中控制各个Block element的位置方式之一,tag为position,有4种属性. 1. static 一般网页默认的属性,表示element根据页面正常流(normal flow)进行 ...

  10. 关于SQLite的伪随机数

    --random() 的返回值范围是:[-2^63,(2^63)-1],而通常要的是最小为 0的随机数,于是就不能直接用了,解决办法: then col else -col end) result f ...