HTML视频和音频
<video>
元素
<video>
元素用于在HTML文档中嵌入视频内容。
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<video>
元素属性
controls
显示视频控制条(播放/暂停按钮、音量控制等)
autoplay
页面加载后自动播放(注意:许多浏览器会阻止自动播放)
width
设置视频播放器的宽度
height
设置视频播放器的高度
loop
视频播放完成后重新开始
muted
默认静音
poster
视频下载时或用户点击播放前显示的图像
preload
页面加载时是否预加载视频
<video width="640" height="360" controls autoplay muted loop poster="preview.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
您的浏览器不支持 HTML5 视频。
</video>
HTML<audio>
元素
<audio>
元素用于在网页中嵌入音频内容,其用法与<video>
元素类似但更简单。
基本用法
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持 HTML5 audio 元素。
</audio>
<audio>
元素属性
controls
显示音频控制条(播放/暂停按钮、音量控制等)
autoplay
页面加载后自动播放(注意:许多浏览器会阻止自动播放)
loop
音频播放完成后重新开始
muted
默认静音
preload
页面加载时是否预加载音频
<audio controls autoplay loop>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
您的浏览器不支持 audio 元素。
</audio>
可以通过JavaScript API控制音频播放:
const audio = document.querySelector('audio');
// 播放音频
audio.play();
// 暂停音频
audio.pause();
// 跳转到指定时间(秒)
audio.currentTime = 30;
// 设置音量(0.0-1.0)
audio.volume = 0.5;
// 监听事件
audio.addEventListener('ended', () => {
console.log('音频播放结束');
});
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/124880.html
如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!