HTML5 多媒体

1.互联网上的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

2.插入音乐 <audio> 标签

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

(1)基本使用

<!-- 添加controls属性才会显示控制面板，默认不会显示 -->
<audio controls>
    <source src="./mp3/卡农慢摇版.mp3"></source>
</audio>

如图（每个浏览器效果都不一样）

(2)设置自动播放和播放次数
autoplay：如果出现该属性，则音频在就绪后马上播放。
loop：如果出现该属性，则每当音频结束时重新开始播放。
注意：Chrome在2018年10月份更新后关闭了audio、video媒体autoplay自动播放，新版的火狐也不支持。据说只是不支持mp3格式的自动播放，但是能够支持ogg格式的音频自动播放

<audio controls autoplay loop>
    <source src="./mp3/卡农慢摇版.mp3"></source>
</audio>

(3)其他属性：
preload：auto|metadata|none 规定是否在页面加载后载入音频
muted：如果出现该属性，则音频输出为静音。

<video controls>
    <source src="./source/最终幻想神罗三巨头乱斗.mp4"></source>
</video>

4.<source> 标签

该标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源，允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
source标签只能二选一
注释：IE 8 或更早版本的 IE 浏览器都不支持\ <source> 标签。
常用属性：
src：规定媒体资源的地址
type：规定媒体资源的 MIME 类型

<audio controls autoplay loop>
    <source src="./source/卡农慢摇版.ogg" type="audio/ogg"></source>
    <source src="./source/卡农慢摇版.mp3" type="audio/mpeg"></source>
    您的浏览器不支持 audio 元素。
</audio>

5.切换媒体文件

可以操作audio或者video的src属性来切换要播放的文件

<body>
    <audio controls autoplay loop>
        <source src="./source/卡农慢摇版.ogg" type="audio/ogg"></source>
        <source src="./source/卡农慢摇版.mp3" type="audio/mpeg"></source>
        您的浏览器不支持 audio 元素。
    </audio>
</body>

<script>
    var audio = document.getElementsByTagName("audio")[0]
    // 8秒钟后会切换到另一首歌
    setTimeout(function(){
        audio.src="./source/再见警察.mp3"
        console.log(audio.src)
    },8000)
</script>

6.自定义视频播放器

原生的播放控制面板在不同浏览器下的样式都不一样，所以一般使用的都是自定义的视频播放器。自定义视频播放器依然使用video标签，并隐藏原生的播放控制面板，使用自定义的控制面板，通过事件监听调用相关的API来操作视频的播放。
例如使用js来监听上一曲/下一曲，音量控制，进度条拖放控制等等。

注意：因为最新的浏览器已经屏蔽自动播放，而且直接调用js代码控制播放也是无效的，必须设置点击监听，在回调中才能控制播放

常用方法：
load() 加载视频
play() 播放视频
pause() 暂停视频

常用属性：
paused 视频是否是暂停状态
duration 视频长度（以秒计）
currentTime 可获取视频当前进度，也可以通过它控制播放进度（以秒计）
volume：音量（0到1，0就是静音，1就是100%）
src: 设置或返回音频/视频元素的当前来源

常用事件
oncanplay 用户可以开始播放视频时触发
ontimeupdate 播放进度更新时触发
onended 播放完毕时触发
onpause 当音频/视频已暂停时触发。
onplay 当音频/视频开始播放时触发。

HTML 音频/视频 DOM 参考手册
https://www.runoob.com/tags/ref-av-dom.html

posted @ 2019-09-29 19:31 ---空白--- 阅读(367) 评论(0) 编辑收藏举报

刷新页面返回顶部

---空白---