HTML—音频和视频

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/arvinzd/article/details/53112375

     在这里我讲讲解音频和视频的讲解,主要分为三部分:发展历程、视频、音频。

一、发展历程

在早期音频和视频主要是通过<embed></embed>标签

这个标签虽然是W3C标准,但是浏览器不支持

当今比较流行的是插件,比如RealPlay  window media Quick Time 和Flash

Flash的使用范围比较广,能较好的解决网页中的音视频,但是每个厂商的标准不一,且编码格式不同一

HTML5将摆脱插件,更好的展现音视频

二、视频

html5支持的视频格式有ogg mepg4 webm三种

语法:<video src="" controls="controls">你的浏览器不支持video标签</video>

<video controls="controls">

<source src="" type="video/ogg>"/>

<source src="" type="video/webm>"/>

你的浏览器不支持video标签

</video>

属性介绍

src 视频文件的url

controls是否显示控制面板 值controls

width 视频界面的宽度

height 视频界面 的高度

autoplay 自动播放 值autoplay

loop 是否循环播放 值loop

poster 播放前界面上显示的图片,相当于封面 值图片url

preload 是否加载完成后播放

autobuffer 浏览器缓冲

视频标签的属性到此为止,javascript结合API完成更为丰富的内容

简单介绍API

play()播放

pause()暂停

currentTime 当前播放时刻 可以做快进快退

muted 是否静音 值true false

 playbackRate播放速率 正常是1 值是正数

 volume音量 值在0-1

三、音频

html5音频支持ogg mp3 wav三种格式

语法:<audio src="" controls="controls">你的浏览器不支持audio标签</audio>

<audio controls="controls">

<source src="" type="audio/ogg>"/>

<source src="" type="audio/wav>"/>

你的浏览器不支持audio标签

</audio>

属性介绍

src 音频文件的url

controls是否显示控制面板 值controls

autoplay 自动播放 值autoplay

loop 是否循环播放 值loop

preload 是否加载完成后播放

音频标签的API这里就不一一介绍了。

猜你喜欢

转载自blog.csdn.net/arvinzd/article/details/53112375
今日推荐