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. VM10下Ubuntu无法安装vim的问题

    今天在VM10下重装了Ubuntu14.10,安装vim时发现如下问题 谷歌了一下,终于找到一种方法解决. 终端下: sudo vi /etc/apt/source.list 该命令将用vi打开一个文 ...

  2. Location-aware Associated Data Placement for Geo-distributed Data-intensive Applications--INFOCOM 2015

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

  3. U盘安装VMware ESXi 6.0

    准备工作 在vmware官网注册,并获取ESXi 6.0 ISO Image: 下载UNetbootin: 容量1GB或以上的U盘,将其格式化. U盘制作 打开UNetbootin,如下图设置,文件路 ...

  4. FOUNDATION_EXPORT 延伸

    一般iOS我们定义常量的方法有两种,来看下面例子 我的.h文件 1 2 FOUNDATION_EXPORT NSString * const kMyConstantString;   FOUNDATI ...

  5. VPS服务器利用WINSCP软件进行SFTP管理服务器文件

    虽然我使用VPS时间也不是很久,但是我善于进行统计和分析,从我在的一些VPS交流QQ群中,可以看到基本上使用搬瓦工VPS的站长群中新手较多,甚至很多人都搞不明白VPS与V-P-N的区别都直接选择VPS ...

  6. 未知的生成错误 因为没有预加载，所以无法解析程序集 GalaSoft.MvvmLight

    使用wpf开发时,在ViewModel中引用了DevExpress注册的GalaSoft.MvvmLight命名空间,使用其ViewModelBase,在View界面中绑定事件时出现错误: 错误 13 ...

  7. HDU 4990 Reading comprehension

    快速幂 #include<cstdio> #include<cstring> #include<cmath> #include<iostream> #i ...

  8. USACO 1.5 Prime Palindromes

    Prime Palindromes The number 151 is a prime palindrome because it is both a prime number and a palin ...

  9. mvn 如何添加本地jar包 IDEA pom.xm

    -------------背景介绍------------------------------------ 最近做的项目,就是office在线浏览功能, 使用的是openoffice+jodconve ...

  10. [CSS备忘]改变选中文本的颜色::selection

    /*Webkit,Opera9.5+,IE9+*/ ::selection { background:red; color:white; } /*Firefox*/ ::-moz-selection ...