在过去,网页中播放音频和视频的主要方法就是通过Flash插件来实现。

这种作坊有相当多得缺陷,Flash 本身的问题也是一大堆。

现在有了 HTML5 原生对音频和视频的支持, 想在您的页面中播放音频和视频变得非常轻松愉快。

在页面中插入音频文件

<audio src="song.mp3" controls></audio>

在页面中插入视频文件

<video src="https://videos.clwy.cn/css/3/70e33c.mp4" width="500" height="280" controls="controls"></video>

image.png

audiovideo标签的属性

属性
autoplay 页面加载时,自动播放
controls 是否出现播放、暂停等控件
loop 是否重复播放
meted 默认被静音
preload 页面加载就开始加载音频,并预备播放,如果出现 autoplay,则忽略该属性

audiovideo对象的方法

var x = document.getElementById("myAudio");
方法 意义
load() 加载动态生成的音频
play() 播放
pause() 暂停

默认的 controls 不好看,能设置样式吗?

答案是不可以!但是你可以去掉controls,然后自己写div,再绑定事件,控制播放和暂停。

更推荐的是使用 video.js 这类插件来优化播放体验。

已添加到喜欢了