HTML5 视频

1.视频格式

当前,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 文件

2.标签

  video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的:

  video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

3.属性

  

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload
如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
时间: 2024-10-12 19:38:50

HTML5 视频的相关文章

html5视频事件参数详细

HTML5 视频对象提供了很多事件,这些事件可以帮助简化和增强网页的内容.在此处将看到使用事件检查内容是否可用.视频播放状态以及如何在视频中监视当前播放位置的示例. HTML代码如下: <!DOCTYPE html > <html lang="en"> <head> <meta charset="utf-8"> <meta name="author" content="boloog&

HTML5视频Video元素

一.视频文件格式     HTML5 支持三种视频文件格式(即编解码器).?1.Ogg Theora 使用的文件扩展名为 .ogg或 .ogv,支持它的浏览器包括 Firefox3.5+. Chrome 4+. Opera 10.5+ 以 及Android 版 Firefox.?2.MP4(H.264)使用的文件扩展名为.mp4 或 .m4v,支持它的浏览器包括Safari 3.2+. Chrome 4-?(参见提示).Internet Explorer 9+.iOS(MobileSafari)

【转】Android 4.4中播放HTML5视频&lt;video&gt;的Bug

近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width="480" height="280" poster="test.jpg" src="test.mp4" preload="auto"></video> 在4.3版本之前播放正常,新版本中播放时

使用jQuery播放/暂停 HTML5视频

文章来自:http://blog.okbase.net/jquery2000/archive/4485.html 我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后,该tab里的视频可以立即播放,而另外tab里的视频能够停止.我的代码是这样的: 1 2 3 $('#playMovie1').click(function(){ $('#movie1').play(); }); 但发现这样不行,而用以下的js是可以的: 1 document.getElementB

如何挑选适合自己的HTML5视频课程

随着网络技术的发展,HTML5技术越来越成熟,很多的应用已经逐渐出现在你我日常生活中了,现在HTML5的应用不仅弥补了以往HTML的应用弊端,同时也促进了HTML5的应用,这样就逼迫行业必须要进行规划,因此现在从事HTML5开发工作可以获得更加可观的薪资收入. 很多人都希望可以加入HTML5开发工作中,可是在从事HTML5开发工作之前,需要先系统学习HTML5.我们千万不要相信半个月速成,20天精通的鬼话,学技术不是练葵花宝典,只要挥刀自宫就能速成.任何HTML5大神高手都是从基础一点点做起,通

Html5之高级-4 HTML5视频处理(H5中播放视频、编程实现视频播放器)

一.在 HTML5 中播放视频 在 HTML5 中播放视频 - HTML5 中提到最多的是视频处理,视频也是互联网中的重要应用.在HTML5中,增加了一个元素,以便在HTML文档中插入和播放视频,这个元素就是video元素 - video元素提供了播放.暂停和音量控件来控制视频,也提供了width和height属性控制视频的尺寸.如设置的高度和宽度等. - 使用video元素至少要提供两种视频格式的文件: OGG和MP4 - OGG: 包含Theora 视频和 Vorbis 音频解码器 - MP

[转] Android 4.4中播放HTML5视频&lt;video&gt;的Bug

近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width="480" height="280" poster="test.jpg" src="test.mp4" preload="auto"></video> 在4.3版本之前播放正常,新版本中播放时

最大化兼容 html5 视频

HTML5 在 web 页面使用 video 元素呈现视频.但 HTML5 视频并不是最终的解决方案,它不能在所有的浏览器工作.你知道 HTML5 视频真的在网上工作吗? 你担心 HMTL5 视频兼容性吗? 看看这篇文章的建议和解决方案如何最大化 HMTL5 视频兼容性. 正如我们所知, web 页面上显示一个视频或电影是没有行业标准的.除了浏览器自身,大多数网站显示视频通过浏览器插件,比如 Flash player. HTML5 包含一个 video 元素将视频嵌入到web页面.W3C因此引入

获取HTML5视频的时间长度

HTML5视频的Bigger体验是非常令人振奋的,很简单的道理,不用加载和依赖烦人的Flash或其他第三方插件来播放视频,也是大功一件.我们可以通过自定义控件对视频进行显示和操控,其中一个常见的需求是显示视频的时长(duration).下面我们一起来看看如何获得并显示视频的持续时间! JavaScript 代码 video 元素有一个属性(property)叫做 duration,表示的是视频内容的时间长度,单位是秒.要比较好地显示视频的持续时间,我们需要使用到 parseInt 函数,以及取模

【学习笔记】HTML5视频的属性、方法、事件介绍 详解

规划了一下学习路线 HTML5 -> CSS3  -> JS ->综合 7.31日开始,做好笔记做好记录 认真学习. HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement)所以音频文件和视频文件大多数都是一样的,除了标签名称 <video> <audio> HTML视频 大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含