html5对视频的支持：

html5通过<video></video>字段实现web页面上视频的播放功能。

目前各大浏览器对<video>字段的支持：

当前，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 文件

简单的html显示视频的例子

<!DOCTYPE HTML>

<html>

<body>

<video src="/i/movie.ogg"  width="320" height="240" controls="controls">

Your browser does not support the video tag.

</video>

</body>

</html>

src:指定视频资源的位置（包括相对地址以及绝对地址）。

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

此处注意视频格式

<video> 标签的属性

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

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

如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。 
<!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=420;

} 

function makeNormal()

{

myVideo.width=520;

}

</script> 

</body>

</html>
方法 属性 事件
play() currentSrc play
pause() currentTime pause

通过mvideo的play或者pause判断视频是否在播放或者暂停。

html5学习(一) video字段的更多相关文章

  1. HTML5学习笔记-video

    HTML5 <video> - 方法.属性以及事件 方法 play()——播放 pause()——暂停 load()——加载 canPlayType——检测您的浏览器是否能播放不同类型的视 ...

  2. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

  3. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  4. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  5. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  6. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  7. HTML5学习总结——HTML5入门与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...

  8. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  9. HTML5学习笔记（四）：H5中表单新增元素及改良

    方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...

随机推荐

  1. Little Puzzlers–List All Anagrams in a Word

    The Solution A major hint is in the fact we are given a dictionary.  Because we are given this dicti ...

  2. vsftp 详解鸟哥版

    FTP (File Transfer Protocol) 可说是最古老的协议之一了,主要是用来进行档案的传输,尤其是大型档案的传输使用 FTP 更是方便!不过,值得注意的是,使用 FTP 来传输时,其 ...

  3. 利用flashBack恢复误删除(delete)的表数据

    Flashback query(闪回查询)原理 Oracle根据undo信息,利用undo数据,类似一致性读取方法,可以把表置于一个删除前的时间点(或SCN),从而将数据找回. Flashback q ...

  4. A Truthful (1-ɛ)-Optimal Mechanism for On-demand Cloud Resource Provisioning---INFOCOM 2015

    [标题] [作者] [来源] [对本文评价] [why] 存在的问题 [how] [不足] assumption future work [相关方法或论文] [重点提示] [其它]

  5. 部署到IIS后出现ORA-12560的解决办法

    同事电脑IIS运行网站,出现ORA-12560错误,问了度娘半天都没问出个结果,最终通过bing找到了解决办法,如下: 1.按照常规方法将oracle client安装目录授权给network ser ...

  6. control

    group:多个脚本之间按照独立设置模式跑,各个脚本可以单独设置虚拟用户.运行时间等 scenario:多个脚本之间按照相同的模式跑,将总的虚拟用户数按照一定的比例分配给各个脚本 ---------- ...

  7. iOS开发富文本

    NSMutableAttributedString * attributedStr = [[NSMutableAttributedString alloc] initWithString:@" ...

  8. Spring Aop详尽教程

    一.概念 AOP(Aspect Oriented Programming):面向切面编程. 面向切面编程(也叫面向方面编程),是目前软件开发中的一个热点,也是Spring框架中的一个重要内容.利用AO ...

  9. PostgreSQL AS不忽略大小写

    select p.name as Name from person p; as后的Name会显示为name,若想不忽略大小写,请把Name加上双引号 select p.name as "Na ...

  10. mysql创建用户、授权[转]

    一, 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username - 你将创建的用户名, host - 指 ...