H5之视频video音频audio

音频 audio

用法

1.单标签型

1
<audio id="audio" src="./音乐.mp3"></audio>

2.多类型资源

1
2
3
4
5
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

3.脚本化

1
2
3
var audio = document.getElementById('audio');
var audio = new Audio('./laojie.mp3');
var audio = document.createElement('video');

兼容性

这里写图片描述
IE8一下不兼容

属性

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
muted muted 如果出现该属性,则音频输出为静音。
preload auto
metadata
none
规定当网页加载时,音频是否默认被加载以及如何被加载。
src URL 规定音频文件的 URL。
  • preload属性介绍
    • auto浏览器应当加载它认为适当的内容简单来说就是, 浏览器根据网络情况自动加载
    • metadata元数据, 类似时长,比特率等信息, 而不是媒体文件
    • none不需要加载

HTML DOM Audio 对象

controls/loop/preload/autoplay属性

  • audio.loop = ‘loop’;
  • audio.controls = true;
  • audio.preload = ‘auto’;
  • audio.autoplay = true;

Audio 对象方法

方法 描述
addTextTrack() 向音频添加新的文本轨道。
canPlayType() 检查浏览器是否能够播放指定的音频类型。
fastSeek() 在音频播放器中指定播放时间。
getStartDate() 返回新的 Date 对象,表示当前时间线偏移量。
load() 重新加载音频元素。
play() 开始播放音频。
pause() 暂停当前播放的音频。

对象事件

  • play 开始播放触发
  • pause 暂停触发
  • loadedmetadata 浏览器获取完媒体的元数据触发
  • loaddeddata 浏览器已经加载完当前帧数据,准备播放时触发
  • ended 当前播放结束后触发

视频video

poster (video 独有)
当视频不可用时,使用一张图片替代,否则是空白

1
<video src="成都.mp4" poster="封面.jpg" controls></video>

其他属性几乎同audio

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!