`
xiaopo123
  • 浏览: 9465 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

HTML 5 视频

阅读更多
原文连接: http://bang.chinabyte.com/thread-416696-1-1.html

Web上的视频直到现在,仍然不存在一项旨在网页上显示视频的标准。今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。
视频格式
当前,video 元素支持两种视频格式:

Ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

如何工作
如需在 HTML5 中显示视频,您所有需要的是:

<video src="movie.ogg" controls="controls" >

</video>

control 属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的:

实例

<video src="movie.ogg" width="320" height="240" controls="controls">

Your browser does not support the video tag.

</video>

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。
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>

Internet Explorer
Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。

<video> 标签的属性
属性值描述autoplayautoplay如果出现该属性,则视频在就绪后马上播放。controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。
分享到:
评论

相关推荐

    html5视频教程

    这个"HTML5视频教程"显然是为了帮助学习者深入理解和掌握HTML5的相关技术,特别是以极客学院的web前端开发实例代码为载体,让学习更加生动、实践性强。 在HTML5中,最显著的改进之一是多媒体元素的支持。它引入了`...

    HTML5 视频播放器代码

    - **video-js**:这是一个可能的视频播放器库,如Video.js,它是一个流行的开源HTML5视频播放器框架,提供了丰富的定制选项和主题支持。 Video.js不仅提供了基本的播放控制,还支持自定义皮肤、字幕、多语言、响应...

    HTML5视频播器放例子

    HTML5视频播放器是其核心特性之一,它使得开发者可以直接在网页中嵌入视频,而无需依赖Flash或其他外部插件。本示例旨在帮助小强理解并掌握HTML5视频播放器的使用。 在HTML5中,`&lt;video&gt;`元素是用于添加视频内容的...

    html5视频demo

    HTML5视频技术是现代网页开发中的重要组成部分,它允许开发者在网页中直接嵌入视频内容,无需依赖Flash等外部插件。"html5视频demo"这个项目,显然是一个使用HTML5 `&lt;video&gt;` 标签及其相关API实现的自定义播放器示例...

    html5视频播放器

    HTML5视频播放器是现代网页设计中的一个重要组成部分,它允许用户在无需插件或外部软件的情况下直接在浏览器中观看视频内容。随着HTML5技术的发展,越来越多的网站选择使用内置的HTML5视频元素来提供视频服务,尤其...

    应用html5视频技术的两个案例

    HTML5视频技术的引入,使得开发者无需依赖Flash等外部插件即可在网页上嵌入视频内容,从而提高了跨平台和跨设备的兼容性。以下将详细阐述HTML5视频技术在实际应用中的两个关键案例及其相关功能。 案例一:video1....

    html5视频播放器,变色龙

    HTML5视频播放器,尤其是被称为“变色龙”的这一款,是现代网页设计中的一个重要工具。随着技术的进步,HTML5已经成为了替代Flash等传统插件的首选标准,为用户提供更安全、更高效的视频体验。本篇文章将深入探讨...

    炫酷html5视频背景跳转网页

    在“炫酷html5视频背景跳转网页”这个主题中,我们将探讨如何使用HTML5的Video元素创建动态视频背景,并结合JavaScript实现网页跳转功能,以提升用户体验。 首先,HTML5的`&lt;video&gt;`元素使得在网页中内嵌视频变得...

    HTML5视频聊天Demo(WebRTC+NodeJS)

    5分钟搭建一个HTML5视频聊天Demo(WebRTC+NodeJS),资源包包括WebRTC和NodeJS下载,详细操作请参见http://blog.csdn.net/lixq_csdn/article/details/37815103

    HTML5视频聊天Demo(WebRTC+NodeJS).zip

    HTML5视频聊天Demo是基于WebRTC技术和Node.js服务器构建的实时通信应用。WebRTC(Web Real-Time Communication)是一项开源技术,允许网页浏览器进行实时通信,无需任何插件或额外的应用程序,极大地推动了互联网上...

    一个用于Vuejs的HTML5视频播放器

    HTML5视频播放器通常包含控制元素,如播放/暂停按钮、进度条、音量控制等。Vue.js的HTML5视频播放器就是将这些元素封装为Vue组件,提供API供开发者交互。 这个名为"vue-video-master"的压缩包很可能包含以下内容: ...

    HTML5视频播放器美化

    HTML5视频播放器是现代网页设计中的重要组成部分,它允许用户在无需插件或第三方软件的情况下直接在浏览器中观看视频内容。"HTML5视频播放器美化"是一个专注于提升播放器视觉效果和用户体验的主题。在HTML5中,我们...

    HTML5视频播放器支持电脑PC端与移动手机页面

    HTML5视频播放器是现代网页开发中的重要组成部分,它允许开发者在网页上嵌入视频内容,无需依赖Flash等外部插件。本资源提供了一款高度兼容的HTML5视频播放器,能够无缝支持电脑PC端以及各种移动设备,如智能手机和...

    html5(视频)

    ### HTML5视频应用详解 #### 一、HTML5视频的重要性及背景 随着互联网技术的不断发展,HTML5作为新一代网页标准语言,在多媒体应用方面展现出了强大的潜力。尤其在视频播放方面,HTML5提供了一种无需插件即可直接...

    video-js-html5视频播放器源码例子

    HTML5视频播放器是现代网页设计中不可或缺的一部分,它使得开发者能够轻松地在网页上集成视频内容。"video-js" 是一个广泛使用的开源HTML5和Flash视频播放器,以其丰富的自定义选项、跨浏览器兼容性和良好的用户体验...

    html5 视频播放器

    HTML5视频播放器是现代网页设计中的一个重要组成部分,它允许用户在不依赖任何外部插件如Flash的情况下直接在浏览器中观看视频内容。这种技术的普及得益于HTML5标准的广泛采用,该标准为开发者提供了内建的媒体元素...

    html5视频播放

    HTML5视频播放是现代网页开发中的一个重要组成部分,它使得开发者无需依赖Flash或其他插件即可在网页上嵌入视频内容。由于HTML5的广泛支持,现在几乎所有的主流浏览器,包括IE6到IE9以及Firefox,都已经对HTML5视频...

    html5视频javascript特效代码

    html5视频javascript特效代码

    超炫的html5视频播放器代码

    HTML5视频播放器是现代网页设计中的一个重要组成部分,它允许用户在浏览器中直接观看视频,无需依赖第三方插件。"超炫的html5视频播放器代码"是一个项目,旨在提供一个具有吸引力和功能丰富的视频播放体验。这个...

Global site tag (gtag.js) - Google Analytics