HTML5 - 多媒体

来源：互联网发布：社交网络英语作文编辑：程序博客网时间：2024/06/05 01:09

HTML5 是 W3C 与 WHATWG 合作的结果

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、searc

<video> 标签的属性

属性

值

描述

autoplay

如果出现该属性，则视频在就绪后马上播放。

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

height

pixels

设置视频播放器的高度。

loop

如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

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

src

url

要播放的视频的 URL。

width

pixels

设置视频播放器的宽度。

<audio> 标签的属性

属性

值

描述

autoplay

如果出现该属性，则音频在就绪后马上播放。

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

loop

如果出现该属性，则每当音频结束时重新开始播放。

preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

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

src

url

要播放的音频的 URL。

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

Demo Code:

<html><head><title>HTML5 Demo</title></head><body><h2>HTML Demo</h2><video width="480px" height="360px" controls="controls" loop="loop"><source src="Eli Mattson - Nobody Knows.mp4" mce_src="Eli Mattson - Nobody Knows.mp4" type="video/mp4">Your browser does not support the video tag.</video><br/><br/><audio controls="controls" preload="preload"><source src="21 Guns.mp3" mce_src="21 Guns.mp3" type="audio/mpeg" loop="loop">Your browser does not support the audio tag.</audio><br/><br/><canvas id="testCanvas" width="320px" height="80px"></canvas><mce:script type="text/javascript"></mce:script></body></html>