7.多媒体标签

• embed: 标签定义嵌入的内容
• audio: 播放音频
• video: 播放视频

• 7.多媒体标签
  • 1>多媒体embed(会使用)
  • 2>多媒体audio
  • 3>多媒体Video

1>多媒体embed(会使用)

embed可以用来插入各种多媒体, 格式可以是Midi, Wav, AiFF, AU, MP3, url为音频或视频路径

因为兼容性问题, 我们这里只讲解插入网络视频, 后面H5会讲解audio和video视频多媒体

<embed src='http://player.youku.com/player.php/sid/XMjgxODkyMTIxNg==/v.swf' allowFullScreen='true'
quality='high' width='480' height='400' align='middle' allowScriptAccess='always'
type='application/x-shockwave-flash'></embed>

2>多媒体audio

HTML5通过<audio>标签来解决音频播放的问题

使用方法:

<audio src="http://www.xcooo.cn/bgm.mp3" autoplay="autoplay" controls /></audio>

并且可以通过附加属性可以更友好控制音频的播放, 如:

• autoplay 自动播放 (谷歌禁用了)
• controls 是否显示默认播放控件
• loop 循环播放 (无限循环: loop 或者 loop="-1")

<audio src="audio/bgm.mp3" controls></audio>

当前, audio元素支持三种音频格式:

	IE9	Firefox3.5	Opera 10.5	Chrome3.0	Safari3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

多版本支持的方案:

<audio controls autoplay>
	<source src="http://www.xcooo.cn/bgm.mp3" type="audio/mpeg">
	<source src="music.ogg" type="audio/ogg">
	您的浏览器不支持播放声音
</audio>

3>多媒体Video

同音频播放一样, <video>使用也相当简单

同样, 通过附加属性可以更友好的控制视频的播放

• autoplay 自动播放
• controls是否显示默认播放控件
• loop 循环播放
• width 设置播放宽口宽度
• height设置播放窗口的高度
• poster: 当视频还没有完全下载, 或者用户还没有点击播放前的默认显示的封面. 默认显示当前视频文件的第一帧画面
• muted 静音播放 (可以解决在谷歌浏览器自动播放的问题)

<video src="audio/xc.mp4" poster="images/king.jpg" controls width="800" height="500"></video>

由于版权原因,不同的浏览器可支持播放的格式是不一样的, 如下图参考:

当前,video元素支持三种视频格式:

格式	IE	Firefox	Opera	Chrom	Safari
Ogg	NO	3.5+	10.5+	5.0+	No
MPEG4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

多浏览器支持的方案, 如下:

<video controls autoplay muted>
	<source src="./video/movie.ogg" type="video/ogg">
	<source src="./video/movie.mp4" type="video/mp4">
	您的浏览器不支持HTML视频播放功能
</video>