html音视频标签

最新推荐文章于 2024-03-20 20:23:45 发布

伯nulee

最新推荐文章于 2024-03-20 20:23:45 发布

阅读量263

点赞数

分类专栏：日常文章标签： html

本文链接：https://blog.youkuaiyun.com/liyunfu233/article/details/110680348

版权

日常专栏收录该内容

21 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        使用audio标签来引入一个外部的音频
            一般情况下，音频都是使用mp3

            默认情况下音频不会在页面中显示和播放

            controls 用来设置是否允许用户控制音频的播放
            autoplay 用来设置音乐是否自动播放 一般浏览器都不会自动播放

            audio不支持IE8及以下浏览器

        -->
        
    <audio autoplay controls src="src/audio.mp3"></audio>

    <audio controls>
        <!-- 可以引入多个格式 兼容浏览器 -->
        <source src="src/audio.mp3">
        <source src="src/audio.ogg"> 

        <!-- 兼容所有浏览器 特别是早期IE -->
        <embed src="src/audio.mp3" type="audio/mp3" width="200" height="100">

    </audio>

</body>
</html>

音频：推荐使用兼容多浏览器

<audio controls>
        <!-- 可以引入多个格式 兼容浏览器 -->
        <source src="src/audio.mp3">
        <source src="src/audio.ogg"> 

        <!-- 兼容所有浏览器 特别是早期IE -->
        <embed src="src/audio.mp3" type="audio/mp3" width="200" height="100">

    </audio>

多个source引入多个格式的文件，兼容浏览器，embed能够兼容所有浏览器，特别是早期IE。属性controls来显示用户控制菜单。

视频和音频类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video controls src="src/flower.mp4" width="600"></video>

    <video controls>
        <source src="src/flower.mp4">
        <source src="src/flower.webm">
        <embed src="src/video.mp4" type="video/mp4" width="600" height="400">
    </video>
</body>
</html>