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. Selenium+Python之163邮件发送

    今晚写了一个163邮箱登录的脚本,由于不停的访问163登录主页导致直接访问163邮箱主页登录需要输入验证码,因为无法获取到验证码,就这导致直接访问主页登录脚本不可行,为了绕过验证码,现在先访问hao1 ...

  2. HTML canvas图像裁剪

    canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...

  3. pip更换软件镜像源

    家里的网络访问某些国外网站.下载安装包的时候总是连接不上或者下载速度特别慢, pypi.python.org就是其中一个.所以,使用pip给Python安装软件时,经常出现错误.修改pip连接的软件库 ...

  4. vsphere安装虚拟机

    新建虚拟机完成后,启动虚拟机,打开启动虚拟机控制台,选择CD/DVD驱动器 选择iso镜像,可以是本地或存储中心的iso,选择后点击虚拟机--客户机--发送Ctrl+Alt+Del,接下来就是正常的操 ...

  5. FR javascript 时间设置上个月最后一天后当月最后一天

    //设置上月最后一天 var date1 =new Date(); date1.setDate(1); //first day; date1.setMonth(date1.getMonth()); / ...

  6. Hive中频繁报警的问题

    在使用Hive的过程中,是不是会在shell中报一堆警告,虽然说不影响正常使用,但是看着很烦人,而且指不定会影响数据的准确性和运行的稳定性. 警告的内容如下: Tue Aug :: CST WARN: ...

  7. 永洪BI配置测试及遇到的一些问题

    1.连oracle 11g数据库遇到密码不能验证通过. 在11g中, 数据库默认密码的大小写是敏感的,jdbc在给oracle密码时, 会将其变成大写.其他个别情况也会出现变成小写的. 为统一,去除o ...

  8. ZZNU 1993: cots' friends

    题目描述 cot 最近非常喜欢数字, 喜欢到了什么程度呢, 已经走火入魔了.... cot把每个朋友编上一个序号,然后遇到谁就叫"XX号",对此,他的朋友们一致认为cot" ...

  9. express学习点滴- 永远不要忘记异步

    直接上两段代码,因为nodejs基于异步和事件回调的解决方式,涉及到异步的时候,问题往往藏得很深,以下这个简单的问题困扰了很久.之前怀疑是各种问题,到处改.直到最后一步一步跟代码,跟操作数据库部分豁然 ...

  10. linux文件系统拓展属性

    在研究GlusterFS中,发现GlusterFS使用了文件系统的Extended Attributes,中文可以称之为文件系统扩展属性.由于资料比较少,中文资料更少,因此把记录几点Extended ...