HTML5 规定了一种通过 video 元素来包含视频的标准方法

当前video元素支持的三种视频格式

首先呢，显示视频所需要的是

<video src="movie.ogg" controls="controls">

</video>

control 属性供添加播放、暂停和音量控件。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器会使用第一个可识别的格式：

<video width="320" height="240" controls="controls">

  <source src="img/ogg-19M.ogg" type="video/ogg">

  <source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

效果：

<video>标签的属性

属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮
height pixels 设置视频播放器的高度
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放
preload preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性
src url 要播放的视频的 URL
width pixels 设置视频播放器的宽度

为视频创建简单的播放/暂停以及调整尺寸控件：

调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width

<!DOCTYPE html>

<html>

<body> 

<div style="text-align:center;">

  <button onclick="playPause()">播放/暂停</button>

  <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 playPause()

{

if (myVideo.paused)

  myVideo.play();

else

  myVideo.pause();

} 

function makeBig()

{

myVideo.width=560;

} 

function makeSmall()

{

myVideo.width=320;

} 

function makeNormal()

{

myVideo.width=420;

}

</script> 

</body>

</html>

 

续Html5的更多相关文章

  1. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  2. html5增强元素--续

    progress元素使用例子 <script> ; function progress_demo() { ) { i++; updateProgress(i); setTimeout(pr ...

  3. HTML5实现文件断点续传

    HTML5的FILE api,有一个slice方法,可以将BLOB对象进行分割.前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段 ...

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

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

  5. HTML5服务器推送消息的各种解决办法

    摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在的问题就是,服务器一直采用的是一问一答的机制.这就意味着如 ...

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

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

  7. HTML5 随音乐节奏变化的频谱图动画

    这里将要介绍的HTML5 音频处理接口与Audio标签是不一样的.页面上的Audio标签只是HTML5更语义化的一个表现,而HTML5提供给JavaScript编程用的Audio API则让我们有能力 ...

  8. HTML5 乱记

    HTML5 的文档类型声明可以触发所有具备标准模式的浏览器的标准模式,包括那些对 HTML5 一无所知的浏览器,也就是说,可以在任何网页中都使用 HTML5 文档类型声明 <!DOCTYPE h ...

  9. HTML5 File api 实现断点续传

    目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...

随机推荐

  1. Git命令之回退篇 git revert git reset

    Git command之回退篇 欲练回退 必先了解:HEAD.index.WorkingCopy HEAD: 当前所在的分支版本顶端的别名,也就是最新的一次commit. git commit 之后与 ...

  2. js 面向对象 定时器 046

    获取DOM对象补充 document.getElementsByTagName('div'); //获取的多个DOM对象 这种对象叫伪数组 如果想遍历此对象 通过for(var i=0; i < ...

  3. 常用sql记录

    一.修改字段默认值 alter table 表名 drop constraint 约束名字   ------说明:删除表的字段的原有约束 alter table 表名 add constraint 约 ...

  4. sql 性能优化相关--总结别人的总结，未做验证，先归纳

    sql语句性能达不到你的要求,执行效率让你忍无可忍,一般会时下面几种情况. 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语句设计不合理 没有相应的索引,索引不合理 没有 ...

  5. IO概念解析------同步异步阻塞非阻塞

    各个IO Model的比较如图所示: 阻塞和非阻塞强调的是程序在等待调用结果(消息,返回值)时的状态.  阻塞调用是指调用结果返回之前,当前线程会被挂起.调用线程只有在得到结果之后才会返回.非阻塞调用 ...

  6. 《JavaScript编程精解》读书笔记

    第一章 JavaScript基础:值.变量.控制流程 JavaScript里有六种基本类型:number类型.string类型.boolean类型.object.function和undefined. ...

  7. MySQL比较运算符的子查询

    使用比较运算符的子查询 =.>.<.>=.<=.<>.!=.<=> 语法结构 operand comparison_operator subquery ...

  8. centos 7编译安装php7

    0.下载php源代码 http://www.php.net/releases/ 1.配置编译环境 yum install -y gcc gcc++ libxml2-devel openssl open ...

  9. 如何正确且高效地中文汉化Spyder 2 或 Spyder3（图文详解）（博主推荐）

    不多说,直接上干货!   汉化下载和教程页面 : https://github.com/kingmo888/Spyder_Simplified_Chinese 汉化文件最新版直接下载 : https: ...

  10. 关于echart没有数据显示暂无数据

    对于echart当没有数据的时候怎么显示, 首先,如果你的series的值为空值的话,曲线将是一片空白,什么都不会有,所以在这里就要进行一个判断,如果没有值的话,人为的添加一个键 if(Object. ...