`

HTML5 学习笔记2--视频元素

阅读更多
[size=xx-large][size=xx-large][size=large]HTML5 规定了一种通过 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 文件

示例1:
<!DOCTYPE HTML>
<html>
<body>

<video src="div+css.mp4"  width="800" height="600" controls="controls">
Your browser does not support the video tag.
</video>

</body>
</html>
其中control 属性是必填的供添加播放、暂停和音量控件,否则只能显示一张截图,不能播放
注意:<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的,比如在IE8上使用,则会提示下面一句话:
Your browser does not support the video tag.

其他常用属性:

属性            值              说明
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
loop            loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
[/size][/size][/size]
分享到:
评论

相关推荐

    bootstrap学习笔记-html5

    2. **媒体支持**:HTML5新增了和元素,使得在网页中内嵌视频和音频变得更加方便,无需依赖Flash等外部插件。 3. **离线存储**:通过离线存储(离线应用缓存或App Cache),HTML5允许开发者创建离线工作的Web应用...

    个人做的HTML5学习笔记

    ### HTML5学习笔记知识点梳理 #### 一、HTML5简介及特点 - **定义**: HTML5是HTML(HyperText Markup Language)的最新版本,由万维网联盟(W3C)于2014年10月正式发布。它不仅继承了HTML的基本特性,还新增了许多...

    HTML5学习笔记

    2. **多媒体支持**:HTML5新增了`&lt;video&gt;`和`&lt;audio&gt;`元素,使得网页可以直接嵌入视频和音频内容,不再需要借助Flash等外部插件。这两个元素支持多种格式,如`video/ogg`、`video/mp4`(视频)和`audio/ogg`、`audio...

    传智播客-PHP基础视频_html+css+js笔记

    学习笔记是对课堂内容的记录和整理,有助于记忆和理解。对于编程学习来说,笔记不仅可以帮助回顾和复习,还可以作为解决问题的参考资料。整理笔记的过程也是对知识的再次消化和提炼,有助于深化理解和应用。 在...

    新手html学习笔记(仅供菜鸟成长参考).rar

    本资源“新手html学习笔记(仅供菜鸟成长参考).rar”为初学者提供了一条理解并掌握HTML的途径。下面将详细阐述HTML的相关知识点。 一、HTML概述 HTML是一种用于创建网页的标准标记语言,它由一系列元素组成,这些...

    HTML5学习笔记(总结提炼版)——001

    本学习笔记将聚焦于HTML5的基础知识,包括其新特性、元素和最佳实践。 一、HTML5的新特性 1. 语义化标签:HTML5引入了新的语义化标签,如、、、和等,这些标签有助于更好地组织内容,提高可读性和可访问性。 2. ...

    HTML5学习笔记.pdf

    HTML5 学习笔记 HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。 HTML5 中的新特性包括: * ...

    HTML笔记传智讲师视频笔记适合初学者

    描述中的"html学习笔记"表明这是关于HTML学习的过程记录,可能是听课笔记或者实践总结,"基础配套视频的学习笔记"意味着资料与一套视频课程相配套,提供了一种视觉和文字结合的学习体验。"传智讲师的讲课笔记"则提示...

    html+css和html5+css3的学习笔记。

    此外,HTML5还支持离线存储、拖放功能、媒体元素(如音频和视频)的内联播放,以及新的表单控件,如`&lt;date&gt;`、`&lt;range&gt;`等。 CSS则负责网页的样式和布局,使得内容以美观的方式呈现。CSS3带来了许多增强视觉效果的...

    html5学习笔记.txt

    HTML5中新增的`&lt;video&gt;`和`&lt;audio&gt;`元素,使得在网页中嵌入视频和音频文件变得简单直观,无需依赖第三方插件如Flash。这不仅提高了网页的加载速度和兼容性,也增强了用户体验。 ### Canvas元素 `&lt;canvas&gt;`元素是...

    html.css.javascript-学习笔记.doc

    HTML、CSS、JavaScript 学习笔记 HTML 篇: 一、HTML 的相关介绍 1. HTML 的介绍 HTML(HyperText Markup Language)是用于创建网页的标记语言。它是一种标准通用标记语言,使用标签来标记网页中的元素,从而...

    html学习笔记(含标签单词解释)

    本学习笔记旨在详细介绍HTML的基本概念、常用标签及其英文单词解释,帮助初学者更好地理解和运用HTML。 一、HTML基本结构 HTML文档通常以`&lt;!DOCTYPE html&gt;`开头,声明当前文档为HTML5标准。接着是`&lt;html&gt;`标签,它...

    css-html-jsp-xml学习笔记

    6. HTML5新特性:包括离线存储、拖放功能、音频/视频支持、新的表单元素和API等。 【JSP】 JavaServer Pages (JSP) 是一种动态网页技术,它允许开发者将Java代码嵌入到HTML页面中,以处理服务器端逻辑。 1. JSP...

    Essential Guide to HTML5学习笔记

    HTML5引入了和元素,使得在网页中内嵌音频和视频变得更加简单。不再需要Flash等第三方插件,开发者可以直接控制播放、暂停、音量等功能。 四、Canvas与SVG图形 1. 元素允许动态渲染图形,通过JavaScript实现绘图,...

    Android基础学习笔记

    Android基础学习笔记主要涵盖了一系列关于Android开发的基本概念和关键组件,以下是这些知识点的详细解析: 1. **Activity**: 是Android应用程序的基本单元,它代表用户在屏幕上看到的一个界面。每个Activity都必须...

    狂神Java学习笔记————前端入门——html、css、JavaScript学习代码

    【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料,这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...

Global site tag (gtag.js) - Google Analytics