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. spring cloud知识点

    eureka注册中心(zookeeper,eureka) 也要集群,可以相互注册,网状结构.后面很多高可用的服务都是用这种方式.Eureka的客户端缓存技术 spring boot actuator ...

  2. fastjson反序列化多层嵌套泛型类与java中的Type类型

    在使用springmvc时,我们通常会定义类似这样的通用类与前端进行交互,以便于前端可以做一些统一的处理: public class Result<T> { private int ret ...

  3. MyBatis整合Spring详细教程

    1整合思路 1.SqlSessionFactory对象应该放到spring容器中作为单例存在. 2.传统dao的开发方式中,应该从spring容器中获得sqlsession对象. 3.Mapper代理 ...

  4. CentOS6.4 安装Redis

    按照下面步骤依次执行1.检查依赖,安装依赖 [root@ecs-3c46 ~]# whereis gcc gcc: /usr/bin/gcc /usr/lib/gcc /usr/libexec/gcc ...

  5. Program, Process and Thread

    A program is an executable file store. A process is a running program. A thread is a single sequence ...

  6. OGNL与值栈

    一.OGNL入门 1.什么是OGNL OGNL的全称是对象图导航语言(Object-Graph Navigation Language),它是一种功能强大的开源表达式语言.使用这种表达式语言,可以通过 ...

  7. Handling of asynchronous events---reference

    http://www.win.tue.nl/~aeb/linux/lk/lk-12.html 12. Handling of asynchronous events One wants to be n ...

  8. 45 Useful Oracle Queries--ref

    http://viralpatel.net/blogs/useful-oracle-queries/ Here’s a list of 40+ Useful Oracle queries that e ...

  9. Java入门系列-18-抽象类和接口

    抽象类 在第16节继承中,有父类 People People people=new People(); people.sayHi(); 实例化People是没有意义的,因为"人"是 ...

  10. python-爬虫之re模块

    re模块中常用功能函数 1.compile() 编译正则表达式模式,返回一个对象的模式.(可以把那些常用的正则表达式编译成正则表达式对象,这样可以提高一点效率.) 格式: re.compile(pat ...