HTML5笔记 03：音视频标签

最新推荐文章于 2023-08-17 15:59:19 发布

Alice_LMY

最新推荐文章于 2023-08-17 15:59:19 发布

阅读量729

点赞数

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

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

版权

音频和视频

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