• 微信号
  • 微信号
目录

HTML笔记

您当前的位置:首页 > 我的笔记 > HTML笔记>html5多媒体应用

html5多媒体应用

音频播放

audio支持播放音频

在HTML5推出之前,浏览器打开音频视频主要通过Flash插件,Activex插件等等。随着移动互联网时代到来,Flash的势头逐渐被HTML5替代

<audio> 元素支持三种音频格式文件: MP3, Wav, 和 Ogg

属性

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放如果使用 "autoplay",则忽略该属性。
src <i>url</i> 要播放的音频的 URL。

<audio src="someaudio.mp3" autoplay="autoplay" controls> 
您的浏览器不支持 audio 标签。 
</audio>

视频播放

video元素提供了 播放、暂停和音量控件来控制视频

同时video元素元素也提供了 width 和 height 属性控制视频的尺寸

如果设置的高度和宽度,所需的视频空间会在页面加载时保留

如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变

属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height <i>pixels</i> 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

<video src="movie.mp4" controls="controls" loop controls="controls" width="800px" heifht="600px"> 
您的浏览器不支持 video 标签 
</video>