Web前端——HTML音视频文件导入

最新推荐文章于 2024-06-05 19:15:27 发布

巧克力code

最新推荐文章于 2024-06-05 19:15:27 发布

阅读量2.9k

点赞数 2

分类专栏： Web前端文章标签： html

本文链接：https://blog.csdn.net/qq_44853882/article/details/107116800

版权

Web前端专栏收录该内容

15 篇文章 5 订阅

订阅专栏

音频文件audio和视频文件video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        audio 标签用来向页面中引入一个外部的音频文件
            音视频文件引入时，默认情况下不允许用户自己控制播放停止

        属性：
            controls 是否允许用户控制播放
            autoplay 音频文件是否自动播放
                - 如果设置了autoplay 则音乐在打开页面时会自动播放
                    但是目前来讲大部分浏览器都不会自动对音乐进行播放
            loop 音乐是否循环播放    
     -->

     <audio src="..." controls autoplay loop></audio>
     <!-- 除了通过src来指定外部文件的路径之外，还可以通过source来指定文件路径 -->
    <audio controls>
        <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器 -->
        <source src="...mp3">
        <source src="...ogg">
        <embed src="...mp3" type="audio.mp3" width="300">
    </audio>


     <!-- 
         使用video标签来向网页中引入一个视频
            - 使用方式基本上和audio是一样的
      -->
    <video src="..."></video>

    <video controls>
        <source src="...webm">
        <source src="...mp4">
        <embed src="...mp4" type="vedio/mp4">
    </video>

    <!-- 引入外网的视频 -->
    <iframe src="https://www.bilibili.com/video/BV1XJ411X7Ud/?p=57" frameborder="0" width="800" height="700"></iframe>

</body>
</html>

结果：
在这里插入图片描述

巧克力code

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
Web前端——HTML音视频文件导入

音频文件audio和视频文件video<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- audio 标签用来向页面中引入一个外部的音频文件音视频文件引入时，默认情况下
复制链接

扫一扫