HTML5-多媒体标签

最新推荐文章于 2022-07-08 15:54:35 发布

943学前端

最新推荐文章于 2022-07-08 15:54:35 发布

阅读量97

点赞数

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

本文链接：https://blog.csdn.net/weixin_49924309/article/details/107852810

版权

HTML5笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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>
    <!-- embed:直接插入视频文件：它的本质是调用本机上已经安装的软件，有兼容性 -->

    <!-- flash插件：安装flash 1.学习flash，增加使用成本  2.苹果设备不支持flash -->

    <!-- audio：音频 -->
    <!-- 
        src：播放的音频文件的路径
        controls：音频播放器的控制器面板
        autoplay：自动播放
        loop：循环播放
     -->
     <audio src="../audio/abc.flac" controls autoplay></audio> 

    <!-- video:视频 -->
    <!-- 
         src：播放的音频文件的路径
        controls：音频播放器的控制器面板
        autoplay：自动播放
        loop：循环播放
        width:宽度
        height：高度
        poster：当视频还没有完全下载，或者用户还没有点击播放前的默认显示的封面。默认显示当前视频文件的第一幅画面
     -->
    <!-- 注意事项：当设置宽高的时候，一般情况下只会设置宽度或者高度，让其自动的等比列缩放。如同时设置宽度和高度，那么视频并不会真正的调整到宽高除非设置的值刚刚好是等比列的 -->
    <!-- <video src="../video/1.mp4" poster="../img/2.png" controls height="600"></video> -->

    <!-- 重点说明source的使用：因为不同浏览器支持的视频文件格式不一样，所以我们在进行视频添加的时候，需要考虑到浏览器是否支持。我们可以准备多个格式的视频文件，让浏览器自动选择 -->
    <video controls>
     
        <source src="../video/1.mp4" type="video/mp4"> 
            您的浏览器不支持当前的视频播放
    </video>
</body>

</html>