HTML5笔记 03：音视频标签

最新推荐文章于 2025-04-16 20:57:32 发布

Alice_LMY

最新推荐文章于 2025-04-16 20:57:32 发布

阅读量1k

点赞数

分类专栏： HTML5笔记文章标签： html5 javascript html

本文链接：https://blog.csdn.net/Alice_Lee_Lee/article/details/119892769

版权

这篇博客详细介绍了HTML5中音视频标签的使用，包括基本的音频和视频播放，兼容性写法，各种属性如duration、currentTime等，JS属性和相关函数，以及如何与canvas结合实现更多功能。同时强调了在处理不同浏览器的兼容性和资源格式选择的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

音频和视频

1. 基本使用

<!-- 
    controls: 调出原生视频播放控件 
    高宽是控制视频显示区域的大小，并不是控制视频的大小
-->
<video src="./source/JiMingYue.mp4" controls width="1200" height="800"></video>
<!-- 给audio指定width与height没有意义，因为没有内容 -->
<audio src="./source/Travel.mp3" controls></audio>

2. 兼容性写法

一个浏览器只有一种编解码器，为了多个浏览器都可以播放，要准备不同格式的文件。浏览器会先判断是否支持对应的格式，如果支持再去下载对应的资源

<video controls>
    <source src="./source/JiMingYue.mp4" type="video/mp4">
    <source src="./source/JiMingYue.ogv" type="video/ogg">
    <source src="./source/JiMingYue.webm" type="video/webm">
    当前浏览器不支持video直接播放，点击这里下载视频：<a href="./source/JiMingYue.mp4">下载视频</a>
</video>
<audio controls>
    <source src="./source/Travel.mp3" type="audio/mpeg">
    <source src="./source/Travel.ogg" type="audio/ogg; codecs='vorbis'">
    <source

最低0.47元/天解锁文章