CH06-多媒体

本章目标

会使用音频标签
会使用视频标签

一、什么是多媒体？

1.1前言

再讲多媒体之前我先问问同学门，你们对多媒体的认知是那些？(好好思考)我们之前讲了html简称超文本标记语言，超文本表示的就是超越文本的内容例如：音频，视频，图片等，这些是怎么样来显示到我们的网页上来的呢？之前我们已近学过插入图片，超链接等等了，这一章学习的内容就如何插入其它的超文本！

国内版抖音PC端首页

b站视频分享网站首页

网易云歌曲分享网站首页

二、如何在网页中实现播放视频和音频呢？

2.1 网页媒体播放器实现方式

第三方自主开发的播放器
Flash
HTML5媒体元素

在HTML5问世之前，要在网页上展示视频、音频、动画等，除了使用第三方自主开发的播放器外，使用最多的工具应该算是Flash了，但是它需要在浏览器上安装各种插件才能使用，有时候速度也会非常慢。HTML5的出现改变了这一状况，在网页中使用HTML5来播放音频、视频再也不需要安装插件，只需要一个支持HTML5的浏览器就可以了

三、视频标签语法结构

3.1 插入视频元素

在页面中插入视频文件最简单的形式，语法如下

语法：
<video src="视频路径"  controls="controls"></video>
例如：
<video src="video/video.mp4" controls="controls"></video>

你要知道不是所有浏览器都支持播放视频的,当播放不了的原因是格式不对，对于不同的浏览器，支持的格式也不一样。

当浏览器不支持的时候，可以使用”source”标签来解决

<video controls>
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
    你的浏览器不支持video元素
</video>

3.2 video视频属性

video：视频标签
- src：指定要播放的视频文件的路径
- controls：提供播放、暂停和音量的控件
- autoplay：自动播放
- loop：循环播放
- width：视频播放器宽度
- height：视频播放器高度
- muted：视频静音
- preload：载入视频

四、音频标签语法结构

4.1插入音频元素

在页面中插入音频件最简单的形式，语法如下

比例：
<audio src="音频路径" controls></video>
例如：
<audio src="video/video.mp3" controls></video>

你要知道不是所有浏览器都支持播放视频的,当播放不了的原因是格式不对，对于不同的浏览器，支持的格式也不一样。主流浏览器支持的音频格式

当浏览器不支持播放音频时

<audio controls>
    <source src="music/music.mp3" type="audio/mpeg"/>
    <source src="music/music.ogg" type="audio/ogg"/>
    你的浏览器不支持audio元素
</audio>