HTML 多媒体
一、简介
Web 上的多媒体指的是音效、音乐、视频和动画。多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等
二、audio标签
1、作用
播放音频
2、语法格式
格式1
<audio src=""> </audio>格式2
<audio> <source src="路径" type="audio/格式"> </audio>
3、属性,格式和兼容性
属性
| 属性 | 值 | 描述 | | --- | --- | --- | | autoplay | autoplay | 音频在就绪后马上播放。 | | controls | controls | 界面显示控件，比如播放按钮。 | | loop | loop | 当音频结束时重新开始播放。 | | preload | preload | audio标签预加载音频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么 preload属性就会失效 | | url | url | 要播放的音频的 URL。 | | muted | | audio标签音频静音 |
支持格式与兼容性
|音频格式|Chrome|Firefox|IE9|Opera|Safari| | --- | --- | --- | --- | --- | --- | | OGG | 支持 | 支持 | 支持 | 支持 | 不支持 | | MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 | | WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
4、示例代码
简单的播放
<audio src="audio/演员.mp3" controls> 您的浏览器不支持!!! </audio>带属性的播放
<audio controls autoplay muted loop> <source src="audio/演员.mp3" type="audio/mpeg" > 您的浏览器不支持!!! </audio>
三、video标签
1、作用
播放视频
2、语法格式
格式1
<video src=""> </video>格式2
<video> <source src="路径" type="video/格式"> </video>
3、属性,格式和兼容性
属性
| 属性 | 值 | 说明 | | --- | --- | --- | | autoplay | autoplay | 视频在就绪后自动播放。 | | controls | controls | video标签是否需要显示控制条 | | height | pixels | 设置视频播放器的高度。 | | loop | loop | video标签循环播放视频. 一般用于做广告视频 | | preload | preload | 视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 | | src |url| 要播放的视频的 URL。 | | width | pixels | 设置视频播放器的宽度。 |
格式和兼容性
| 格式 | 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 |
4、示例代码
简单案例
video src="audio/new.mp4" width="320" height="240" controls > </video>带属性的播放
<video width="320" height="240" controls > <source src="audio/new.mp4" type="video/mp4"/> </video>
5、注意事项
- 当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
- 在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现
四、marquee标签
1、作用
播放视频作用：跑马灯效果
2、属性
- direction: 设置滚动方向 left/right/up/down
- scrollamount: 设置滚动速度, 值越大就越快
- loop: 设置滚动次数, 默认是-1, 也就是无限滚动
- behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
3、示例代码
<<!--默认类型-->
<marquee>翻滚吧,蛋炒饭</marquee>
<!--从右边开始滚动-->
<marquee direction="right">翻滚吧,蛋炒饭</marquee>
<!--向上滚动-->
<marquee direction="up">翻滚吧,蛋炒饭</marquee>
<!--向下滚动-->
<marquee direction="down">翻滚吧,蛋炒饭</marquee>
<!--设置滚动速度-->
<marquee scrollamount="1">翻滚吧,蛋炒饭</marquee>
<marquee scrollamount="100">翻滚吧,蛋炒饭</marquee>
<!--设置滚动次数-->
<marquee loop="1">翻滚吧,蛋炒饭</marquee>
<!--设置滚动类型-->
<marquee behavior="slide">翻滚吧,蛋炒饭</marquee>
<marquee behavior="alternate">翻滚吧,蛋炒饭</marquee>
滚动图片：
<marquee>
<img src="img/wow.jpg">
</marquee>
</body>