HTML5 Video(视频)
HTML5 Video(视频)
很多站点都会使用到视频. HTML5 提供了展示视频的标准。
检测您的浏览器是否支持 HTML5 视频:
Web站点上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。
HTML5 (视频)- 如何工作
如需在 HTML5 中显示视频,您所有需要的是:
实例
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
视频格式与浏览器的支持
当前, <video> 元素支持三种视频格式: MP4, WebM, 和 Ogg:
浏览器 | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | NO | NO |
Opera | YES (从 Opera 25 起) | YES | YES |
- MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
视频格式
格式 | MIME-type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法有用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。
例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。
实例 1
为视频创建简单的播放/暂停以及调整尺寸控件:
上面的例子调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。
更多参考请查看 HTML5 Audio/Video DOM 参考手册.
HTML5 Video 标签
标签 | 描述 |
---|---|
<video> | 定义一个视频 |
<source> | 定义多种媒体资源,比如 <video> 和<audio> |
<track> | 定义在媒体播放器文本轨迹 |
HTML5 Video(视频)的更多相关文章
- HTML5: HTML5 Video(视频)
ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...
- HTML5 video 视频标签 常用属性
最近在做手机端的 h5 页面的视频直播功能,用到了 Video 标签.其常用的属性有以下几个: src.poster.preload.autoplay.loop.controls.width.heig ...
- 让所有浏览器支持HTML5 video视频标签
HTML5究竟需要多少种视频编码格式 当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编 ...
- HTML5 video 视频标签全属性详解
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
- HTML5 video视频字幕的使用和制作
一.video支持视频格式: 以下是三种最常用的格式 1. ogg格式:带有Theora视频编码(免费)+Vorbis音频编码的Ogg文件(免费) 支持的浏览器:firefox.chrome.oper ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- html5 video标签屏蔽右键视频另存为的js代码-HTML5教程
点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过 做HTML5的video标签,本身我们 ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
随机推荐
- DataBase 之 数据库中的系统表
名称 地址 说明 sysaltfiles ...
- Linux 同步时间
Linux里有2个时间: 硬件时间 系统时间 这2个时间不是同步的!如果有一天发现系统的时间不对了,可以分别看看这2个时间.硬件时间写在BIOS里,系统时间就是电脑显示的时间了. sudo hwclo ...
- Inaccurate values for “Currently allocated space” and “Available free space” in the Shrink File dialog for TEMPDB only
转载自:http://blogs.msdn.com/b/ialonso/archive/2012/10/08/inaccurate-values-for-currently-allocated-spa ...
- python(3)-lambda表达式
>>> fun = lambda a: a+1 >>> fun(1) 2 >>> fun = lambda a,b: a+b >>&g ...
- python(1) - 输入和输出
前面已经说过了,print()函数括号里加上字符串,就可以实现输出 >>> print('This is Python!') This is Python! print()函数也可以 ...
- python爬虫爬取全球机场信息
--2013年10月10日23:54:43 今天需要获取机场信息,发现一个网站有数据,用爬虫趴下来了所有数据: 目标网址:http://www.feeyo.com/airport_code.asp?p ...
- Linux文件与目录管理之ls的使用
来源:鸟哥的私房菜 查看文件与目录 ls ls [-aAdfFhilnrRSt] 目录名 ls [--color={never,auto,always}] ls [--full-time] 目录名 选 ...
- javaweb学习总结二(静态导入、自动拆装箱、增强for与可变参数)
一:静态导入语法:import static 导入类.成员变量|成员方法那么在代码中可以直接使用变量或者方法,而不需要通过类名.来调用 静态导入: import static java.lang.Sy ...
- Oracle procedure 基本语法
转自:http://lorry1113.javaeye.com/blog/513851 关键字: oracle 存储过程 1.基本结构 CREATE OR REPLACE PROCEDURE 存储过程 ...
- 【暴力,STL,水】UVa 1523 - Helicopter
Since ancient time, people have been dreaming of flying in the sky. Eventually, the dream was realiz ...