H5与C3中的媒体播放技术详解

"H5+C3 资料包含了HTML5和CSS3的相关内容，特别是关于视频和音频播放的标签及属性的介绍。文档中提到了如何使用`<video>`和`<audio>`标签来创建视频和音频播放器，并通过不同格式的`<source>`标签确保跨浏览器的兼容性。此外，还提到了一些重要的属性，如`autoplay`、`controls`、`loop`和`poster`等，以及如何设置元素的尺寸和等比例缩放。" 在HTML5中，`<video>`和`<audio>`标签是新增的元素，用于在网页上嵌入视频和音频内容。这些标签提供了原生的媒体播放功能，不再需要依赖外部插件如Flash。以下是对这些知识点的详细说明： 1. **视频播放**： - `Video`标签：用于插入视频内容。例如，`<video src="video.mp4" controls></video>`将创建一个视频播放器，播放指定路径的视频文件，并显示控制条。 - `Autoplay`属性：原本用于自动播放视频，但多数现代浏览器出于用户体验考虑，默认禁止了这一特性。 - `Controls`属性：显示视频的播放、暂停、音量等控制条。 - `Loop`属性：使视频在播放结束后自动循环播放。 - 兼容性处理：由于不同浏览器对视频格式的支持不同，通常需要提供多种格式的视频源，如Ogg、MP4和WebM。 2. **音频播放**： - `Audio`标签与视频类似，用于插入音频内容，如`<audio src="audio.mp3" controls></audio>`。 - 同样，可以使用`autoplay`、`controls`和`loop`属性。 3. **H5新增属性**： - `poster`属性：在视频开始播放或用户点击播放前，显示预定义的图像。例如，`poster="img/1.jpg"`可设置视频封面。 - 宽度和高度属性：`width`和`height`用于设置视频或音频播放器的尺寸。如果只设置了宽度或高度，元素会保持原始宽高比自动缩放。 4. **Source标签**： - `<source>`标签用于在`<video>`或`<audio>`内部提供多个来源，浏览器会根据其支持的格式自动选择合适的源进行播放。例如： ```html <video width="800" height="" controls> <source src="myvideo.mp4" type="audio/mp4"> <source src="myvideo.ogv" type="video/ogg"> <source src="myvideo.webm" type="video/"> </video> ``` - `type`属性指定文件的MIME类型，有助于浏览器判断是否能播放该格式的文件。 通过以上介绍，我们可以理解HTML5如何通过`<video>`和`<audio>`标签实现多媒体内容的集成，并通过`<source>`标签处理跨浏览器的兼容性问题。这些技术在现代网页设计中广泛使用，极大地丰富了用户的交互体验。