<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    // 表示一打开就是静音播放
    <video controls autoplay muted loop style="width:500px;">
        // 为了兼容不同浏览器,显示MP4,不兼容则用webem
        <source src="media/open.mp4">
         <source src="media/open.webm">
         //浏览器不支持video才显示
          <p>
            对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
        </p>
    </video>
</body>

</html>

注：

video

controls: 控制控件的显示，取值只能为controls

某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫做布尔属性

布尔属性，在HTML5中，可以不用书写属性值

autoplay: 布尔属性，自动播放。

muted: 布尔属性，静音播放。

loop: 布尔属性，循环播放

在这里插入图片描述

# 前端 # html
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

openGemini 发布人才培养计划，与顶尖的数据库专家并肩成长

avatar 华为开发者空间
cover

技术解读 MySQL InnoDB 大对象存储格式

avatar 华为开发者空间
cover

华为云 HCSD 校园沙龙天津大学行：智慧碰撞，携手探索无限可能

avatar 华为开发者空间