(5)html音频视频

转载

mb5fd86ddc9c8d5 2017-06-25 09:39:00

文章标签 ide 加载控件视频播放器音频格式 文章分类 代码人生

音频

1、互联网常用的音频格式

ogg

有损的音频压缩技术

免费的开源音频格式

它可以在相对较低的数据速率下实现比MP3更好的音质

mp3

有损的音频压缩技术

想使用MP3格式发布自己的作品，需要付给发明MP3的公司专利使用费

wav

无损压缩，浏览器支持差

flac

无损压缩

aac

音效速率公式

音效速率水平≈容量（M）× 音效系数（C）÷音乐播放时间

音乐播放时间≈容量（M）× 音效系数（C）÷位速

音效系数每个格式是固定的，比如MP3的音效系数是136kbps/M

2、

格式：

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg"> </audio>

3、

属性:

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新循环开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。也可以使用<source>标签来设置音频。

谷歌

(5)html音频视频_ide

火狐

(5)html音频视频_视频播放器_02

IE9

(5)html音频视频_加载_03

加载页面后自动、循环播放此URL连接里的音乐

<body>
    <audio controls="controls" autoplay="autoplay" loop="loop">
        <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
</body>

去掉 controls="controls" 可以达到隐藏播放器的效果，这个挺有意思

<body>
    <audio autoplay="autoplay" loop="loop">
        <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
</body>

视频

<body>
    <video width="800" height="600" controls>
        <source src="movie.mp4" type="video/mp4">
    </video>
</body>

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