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. Atomic 升级

    Atomic 采用类似github的版本管理,  可以使用以下命令升级 ostree remote add --set=gpg-verify=false atomic20160212 http://. ...

  2. 2px边框，4分之1内边框实现选中功能实现

    有时候我们要实现如下选中效果: 我给出一种解决办法: 首先选中的时候,加一个class(active),未选中的全部加一个class(inactive),外层给一个1px border,每个选项给一个 ...

  3. Java语法基础总结

    这次上课我们讲了Java语言中的枚举类型,并进行了一次课堂测试,测试代码如下: public class EnumTest { public static void main(String[] arg ...

  4. supervisor笔记

    supervisord 作为主进程,管理旗下的各个子进程,子进程会产生若干线程.当某个管理的服务异常奔溃之后,supervisor 会自动重启该服务.配合使用 superlance 插件以实现 Htt ...

  5. Gdiplus 贴图（助记) -------------------从资源中载入PNG图片

    从资源中载入图片,亦可改为从内从中加载: void LoadResImage(int nResID,Image * &lpImage) { HINSTANCE hIns=AfxGetInsta ...

  6. Python建立SSH连接与使用方法

    paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接 安装过程也比较简单,先安装pycrypto后安装paramiko,解压后在命令提示符下 ...

  7. php websocket聊天室

    要理解socket就要先理解http和tcp的区别,简单说就是一个是短链,一个是长链,一个是去服务器拉数据,一个是服务器可以主动推数据. 而socket就是应用层与TCP/IP协议族通信的中间软件抽象 ...

  8. Java 泛型 协变性、逆变性

    Java 泛型 协变性.逆变性 @author ixenos 摘要:协变性.协变通配符.协变数组.协变返回值 协变性.逆变性和无关性 在面向对象的计算机程序语言中,经常涉及到类型之间的转换,例如从具体 ...

  9. Linux压缩与解压缩

    .tar.gz 和 .tgz解压:tar zxvf FileName.tar.gz [-C Dir] 中括号中的内容可以省略.压缩:tar zcvf FileName.tar.gz DirName . ...

  10. .Net Core 读取appsettings.json的配置

    在.net core中是没有*.config 文件的 配置文件都是*.json 1.在project.json里下面这行代码 "Microsoft.Extensions.Options.Co ...