`
zhongming_software
  • 浏览: 7359 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

HTML5(二).视频video标签详解

 
阅读更多
Web 上的视频


直到现在,仍然不存在一项旨在网页上显示视频的标准。

今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。


视频格式

当前,video 元素支持三种视频格式:



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

如何工作

如需在 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> 标签的属性



引用:http://www.3wschool.com.cn/
  • 大小: 49.8 KB
  • 大小: 17 KB
分享到:
评论

相关推荐

    flv.js 测试demo (h5 video标签播放flv视频)

    FLV.js 是一个开源的 JavaScript 库,它允许在 HTML5 的 `&lt;video&gt;` 标签中播放 FLV(Flash Video)格式的视频内容。FLV 作为传统的流媒体格式,曾经广泛应用于网页视频播放,而随着 Flash 技术的逐渐淘汰,FLV.js ...

    video.js5.18.4库

    开发者可以通过引入这个文件,结合HTML5 `&lt;video&gt;`标签,快速构建起一个功能完善的视频播放器。此外,videojs-contrib-hls.js插件则专门负责处理HLS流,确保HLS视频的正常播放。 四、实战应用 在实际项目中,...

    web前端工程-html5详解.docx

    1. 视频标签 &lt;video&gt;:用于播放视频内容。 2. 音频标签 &lt;audio&gt;:用于播放音频内容。 3. 图像标签 &lt;img&gt;:用于显示图像内容。 四、 HTML5 的文档结构 HTML5 文档的结构主要包括以下几个部分: 1. 头部元素 ...

    video5.20.rar

    `&lt;video&gt;`元素是HTML5中的视频标签,它的id与我们在配置文件中匹配,以便video.js能够找到并初始化它。 总结 video.js 5.20为开发者提供了强大的工具,以构建美观且功能丰富的视频播放器。通过配置文件`video5.20....

    html5(视频)

    #### 二、HTML5 `&lt;video&gt;` 标签简介 HTML5中的 `&lt;video&gt;` 标签允许开发者直接在网页中嵌入视频文件,而无需依赖Flash或其他插件。这使得视频内容可以直接通过浏览器播放,增强了跨平台兼容性和易用性。 #### 三、...

    transform实现HTML5 video标签视频比例拉伸实例详解

    首先,作者提到了使用CSS的object-fit属性,尤其是fill值,作为直接调整video标签中视频尺寸的方法。object-fit属性在CSS中用来指定可替换元素(如img或video)的内容应该如何填充其框的大小。使用fill值可以让视频...

    Html5新增元素详解.pptx

    * video 元素:用于添加视频内容。 * audio 元素:用于添加音频内容。 * canvas 元素:用于创建动态图形。 * svg 元素:用于创建矢量图形。 Html5 中废除的元素包括: * big 元素:用于表示大号字体。 * center ...

    Js视频播放器插件Video.js使用方法详解

    如果浏览器不支持HTML5,Video.js会自动切换到Flash播放器,确保在各种环境下都能顺畅播放视频。 要开始使用Video.js,首先你需要在项目中引入其CSS和JavaScript文件。你可以选择下载Video.js的源码并部署到自己的...

    HTML5开发精要与实例详解 pdf

    和&lt;video&gt;标签让开发者可以直接在网页中嵌入音频和视频,不再依赖Flash等第三方插件。配合标签,HTML5可以实现动态图形绘制,为游戏和数据可视化提供了便利。 此外,HTML5的离线存储特性,如Application Cache和...

    html5视频媒体标签video的使用方法及完整参数说明详解

    video是HTML5的一个视频媒体标签,其作用是在网页中嵌入指定的视频,video标签的代码结构及参数如下。 HTML代码结构: &lt;video controls autoplay loop preload="auto" poster="img/popup-img.png" webkit-...

    HTML5标签速查表.pdf

    ### HTML5标签速查表详解 #### 一、基础标签 **1.1 文档类型声明** **标签**: `&lt;!DOCTYPE&gt;` **描述**: 定义文档类型为HTML5,通常位于文档的第一行。 **1.2 HTML文档定义** **标签**: `&lt;html&gt;` **描述**: ...

    html标签大全标签用法详解

    HTML5引入了许多新特性,如`&lt;canvas&gt;`用于绘制图形,`&lt;audio&gt;`和`&lt;video&gt;`处理多媒体,`&lt;section&gt;`、`&lt;article&gt;`、`&lt;aside&gt;`和`&lt;footer&gt;`增强语义化。 在学习HTML标签时,参考手册如HTML4.0是非常重要的资源。它...

    html5常用标签.txt

    ### HTML5常用标签详解 #### 一、文档结构标签 **`&lt;!DOCTYPE&gt;`**: 定义文档类型。在HTML5中通常使用`&lt;!DOCTYPE html&gt;`来声明文档为HTML5。 **`&lt;html&gt;`**: 根标签,所有其他标签均位于此标签内部。它将文档分为...

    html5--video

    ### HTML5 Video 元素详解 #### 一、引言 HTML5 的 `video` 元素是现代网页设计中的重要组成部分,它为开发者提供了一种简单而强大的方式来嵌入视频内容,无需依赖第三方插件如 Flash。本文将详细介绍 HTML5 `...

    H5新属性audio音频和video视频的控制详解(推荐)

    本文详细介绍了如何利用H5中的audio和video标签实现对音视频文件的控制,并提供了一些与之相关的JavaScript代码以实现更复杂的控制逻辑。 首先,音频和视频文件可以通过&lt;video&gt;和标签直接嵌入到网页中。这两个标签...

    详解HTML5 使用video标签实现选择摄像头功能

    描述:主要介绍了详解HTML5 使用video标签实现选择摄像头功能的相关资料,希望通过本文能帮助到大家,实现这样的功能,需要的朋友可以参考下 从描述中,我们可以看到这篇文章的主要目的是为了帮助读者了解如何使用 ...

    《HTML 5开发精要与实例详解》.(陆凌牛).[PDF]

    - **`&lt;video&gt;` 标签**:用于在网页中嵌入视频文件,同样支持多种格式如MP4、WEBM等。 这两种标签使得开发人员无需依赖Flash等插件即可实现多媒体播放。 **3. 图形绘制:** - **Canvas API**:提供了在网页上进行...

    HTML5开发精要与实例详解

    4. 多媒体支持:内置音频和视频&lt;video&gt;标签,无需插件即可播放多媒体内容,支持多种编码格式,如MP4、WebM和Ogg。 5. canvas画布:提供JavaScript API,可进行动态图形绘制,实现游戏、图表、动画等功能。 6. svg...

    html完全使用详解

    二、HTML标签 HTML标签以`和`&gt;`包围,分为起始标签(如`&lt;p&gt;`)和结束标签(如`&lt;/p&gt;`)。有些标签是自闭合的,如`&lt;img&gt;`。常见的HTML标签包括: 1. 文本内容标签:`&lt;p&gt;`(段落)、`&lt;h1&gt;`至`&lt;h6&gt;`(标题)、`&lt;strong&gt;...

Global site tag (gtag.js) - Google Analytics