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. delphi 帮助文档（中英对译）下载地址

    文档下载地址:http://download.csdn.net/detail/yangzhimars/5014350

  2. Javascript封装弹出框控件

    1.首先先定义好弹出框的HTML结构 <div class="g-dialog-contianer"> <div class="dialog-windo ...

  3. Log4J1升级Log4J2

    近期,碰到需要将项目中的Log4J1升级到Log4J2,现进行下总结.交代下技术背景:web项目,基于Java + Maven 1. 依赖 <dependency> <groupId ...

  4. sqlite增删改查

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  5. H3C SecPath 防火墙端口回流

    外网IP地址可以通过域名访问内外800端口网站,内网地址不可以,需要做回流 <<内网口.外网口都需要做nat映射>>定义ACL3001acl number 3001rule 0 ...

  6. 更换jdk版本:jdk1.8更换为jdk1.7之后输入java -version还是出现1.8的版本号

    安装了1.7之后修改了JAVA_HOME的环境变量 修改成功之后,在cmd输入java -verson还是出现1.8的版本号 解决办法:将环境变量Path中的%JAVA_HOME%/bin 移到最前面 ...

  7. Xcode好用的插件(随时更新)

    古人云"工欲善其事必先利其器",打造一个强大的开发环境,是立即提升自身战斗力的绝佳途径!下面简单介绍下插件是什么.如何使用Xcode插件以及一些常用的Xcode插件的推荐. 一.插 ...

  8. JAVA内容回顾（二）——面向对象（OOP）

    1.类与对象 类:类指的是同种对象的抽象,看不见摸不着的.包含有属性与方法. 对象:是类的具体实现,看的见摸得着的东西. 类是对象的抽象,对象是类的具体实现. 2.访问修饰符 public:在项目的任 ...

  9. 利用LinkedList实现洗牌功能

    分2步: 1.生成扑克牌. 2.洗牌. package com.dongbin.collection; import java.util.LinkedList; import java.util.Ra ...

  10. ping 计算机全名，返回的不是IP地址

    今天想看一下机子的IP地址,结果关闭局域防火墙后,在命令行中使用ping 计算机全名,返回的不是IP地址 其实,这也是一种IP地址,IP6地址 原因:默认情况下,win7以上的操作系统,ping 计算 ...