html5的一些新特性:
1.添加了<video>和<audio>媒体文件
2.支持本地文件存储
3.新的内容控制元素,如<article>、<footer>、<header>、<nav>和<section>
4.新的表单控件,如: calendar、date、time、email、url和search
浏览器对html5的支持:
html5不是官方的标准,所以并没有浏览器完全支持hmtl5
但是所有的主流浏览器如:Firefox、Opera、Chrome等都相继的把html5的新特性添加到最新版本的浏览器中
自从1999年的HTML 4.0.1版本以后,因特网有了很大的改变。
现在,HTML 4.0.1中的一些元素已经被丢弃,不会再使用,这些元素在html5中已经被移除或者被重写。
为了更好的使用因特网,html5中添加了更好容易架构和处理的的新元素
在html5中嵌入视频变得非常的简单:
首先得确保你所用的浏览器是支持html5 video
知道现在,大多数的视频都是通过插件如 flash来播放,在网页上播放视频并没有一个标准。
html5定义一个标签指定了一种标准的方式将视频文件嵌入到网页: <video>元素
浏览器支持:
Internet Explorer 9, Firefox, Opera, Chrome, and Safari支持 <video> element.
Internet Explorer 8以及更早的版本并不支持<video>元素
下面用一个例子来在网页上嵌入视频文件:
在html5的body中加入下面的代码:
<video width="320" height="240" controls="controls">
<source src="movie.mp3" type="video/mp4" />
Your browser does not support the video tag.
</video>
在使用的时候最好给添加上宽度和高度,这样在网页加载不至于出现布局问题,在video的标签中间加上 Your browser does not suppot the video tag,这样如果当前的浏览器不支持video的时候能给用户一个提示
html5 的 video 元素也有方法、属性和事件
播放事件: playing,pausing和loading
给播放器设置不同的事件,播放和停止事件,频幕的大小事件:
body的内容如下:
The content of the document ....
<br />
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br />
<video id="myVideo" width="320" height="240" controls="controls">
<source src="movie.mp3" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("myVideo");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
分享到:
相关推荐
第2章---初识HTML5ppt课件(全).ppt
【初识HTML5,认识HTML】 HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,是用于创建网页的标准标记语言。自2014年正式发布以来,HTML5已经成为现代网页开发的核心,它极大地提升了用户体验,...
这是一个当当网主页的HTML+CSS代码实现,希望对大家有用
初识html5.ppt
HTML5 基础知识点 HTML5 是超文本标记语言的最新版本,它是描述网页的标准语言。HTML5 的应用非常广泛,包括邀请函、节日贺卡、新闻热点、广告营销、知识分享等。 HTML5 的基本概念 HTML5 使用一套标签或标记来...
【HTML5应用开发技术】 HTML5是HTML的最新版本,它是HTML标准的传承与扩展,旨在提高用户体验,增强网页应用程序的功能。HTML5并不是对HTML的彻底改革,而是着重于兼容性、合理性和易用性的提升。 1. **HTML5的...
HTML5作为前端技术的重要组成部分,是所有Web开发人员必须掌握的基本技能之一。HTML5的出现,旨在解决之前版本中所面临的诸多局限性问题,如对多媒体内容的原生支持,增强了网页的可访问性和互操作性。接下来,我们...
第01章《初识HTML5》中,你将学习到HTML5的基本概念,了解它与前代HTML4的区别,如语法简化、语义化元素的引入,以及如何在文档中声明DOCTYPE。此外,还将讲解HTML5的文档结构,如、等基本元素的使用。 第02章...
在“第1章初识HTML5.pptx”中,你将了解到HTML5的特性,如语义化标签(例如、、等)、离线存储(Application Cache)、拖放功能、媒体元素(和)等,这些都是HTML5为提升用户体验和开发者便利性所做的改进。...
##### 第二章 初识HTML5 本章重点介绍HTML5的基础知识和技术特点,帮助学生掌握HTML5的基本结构及其在网页设计中的应用。学习目标包括: - **了解HTML5的新特性**:理解HTML5相对于传统HTML版本的改进之处。 - **...
HTML边缘探索Ⅰ HTML简介Ⅱ HTML到HTML5—-HTML发展历史Ⅲ HTML5简介Ⅳ HTML5环境Ⅴ HTML5基本元素介绍Ⅵ 写一个最简单的HTML程序 Ⅰ HTML简介 超文本标记语言(Hyper Text Markup Language),缩写为HTML,标准通用...
本篇资料将带你初识HTML5的各项内容,包括其历史背景、主要特性以及应用前景。 HTML5的诞生与多个组织密切相关。欧洲核子研究中心(CERN)的蒂姆·伯纳斯-李是HTML的创始人,他同时也是万维网联盟(W3C)的创立者。...
初识Vue.html
1. **初识HTML5**: - 学习HTML5的发展历程,理解其在不同浏览器中的兼容性。 - 掌握HTML5的基本语法和新特性,如文档结构、语义化元素等。 - 学习并实践创建简单的HTML5网页,包括标题、段落、文本格式化、图像...
初识+HTML5_IT168文库
课程的第一部分是“初识HTML5”,在这一章节中,学生将首先对HTML5有一个全面的认识。从HTML的发展历程开始,了解它如何从最初的版本发展到今天广泛使用的HTML5。学习浏览器对HTML5的支持情况,以及它引入的新特性,...
"HTML初识基础认知 + HTML标签" HTML初识基础认知是学习HTML标签的基础,理解HTML的基本语法和标签的关系,能够使用排版标签实现网页中的标题、段落等效果,使用相对路径选择不同目录下的文件,使用媒体标签在网页...