HTML5无插件多媒体Media——音频audio与视频video

￡神魔★判官ぃ 2024-04-17 23:06 17阅读 0赞

## 使用 ##

HTML5增加了audio与video两个多媒体标签  
兼容性还不错，低版本IE不支持  
可以使我们不需要使用任何浏览器插件就能够插入音频与视频控件  
而且非常的简单  
![在这里插入图片描述][20190902174930509.png]  
元素用法如下:

<audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio>
    <video src="media/Animation.mp4" id="demoVideo">不支持H5-video</video>

标签中内容如果浏览器不支持该标签就会显示  
当然使用这两个元素的时候  
最起码要添加src属性，属性值就是资源的url

但是每个浏览器由于版权问题支持的媒体格式也不同  
所以就可以使用下面的方式

<audio id="demoAudio">
        <source src="media/xi-Halcyon.mp3">
        <source src="media/xi-Halcyon.ogg">
        ...
        不支持H5-audio
    </audio>
    
    <video id="demoVideo">
        <source src="media/Animation.mp4">
        <source src="media/Animation.webm">
        ...
        不支持H5-video
    </video>

这样指定不同的资源格式  
也保证了各个浏览器的兼容性

## 属性 ##

audio和video标签除了src外  
还有一些公有的属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]  
前三个属性属性名与属性值相同，直接添加属性名即可  
preload有如下属性值:  
1-none 不加载数据  
2-metedata 仅加载元数据（时长、比特率、帧大小等）  
3-auto 浏览器加载它认为适量的媒体内容

video元素还有独有的属性poster  
属性值是图片资源的url  
用来设置视频播放前的一张占位图片

## 接口 ##

在获取的DOM节点上可以使用浏览器提供的接口属性和方法  
常用的属性、方法如下  
**currentSrc** 媒体数据的URL地址  
**volume** 播放音量 :介于0~1（注意超范围会报错），默认1最大音量  
**muted** 是否静音 :设置true进入静音模式  
**playbackRate** 媒体播放速度 ,默认1.0常速，>1快进，<1慢放（负值表回放但无浏览器实现此功能）  
**defaultPlaybackRate** 媒体默认的播放速度  
**currentTime** 当前播放时间（单位s）  
**duration** 媒体时长（单位s）  
**play()** 播放音/视频  
**pause()** 暂停音/视频  
**load()** 重新加载音/视频（通常用于修改元素属性后）

除此之外还有  
**played** 已经播放的时间段  
**buffered** 已经缓冲的时间段  
**seekable** 用户可以跳转的时间段

[20190902174930509.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/326f6b1cd81c40e78a5a5e446a2f88ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4e611b8f22d446c6b74b5a41ecde34ac.jpg