vedio标签和source标签

< video >元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放。

< source >元素为< picture >,< audio >或者< video >元素指定多个媒体资源

video标签常见属性

1、autoplay 如果出现该属性,则视频在就绪后马上播放

2、controls 如果出现该属性,则向用户显示控件,比如播放按钮

3、loop 如果出现该属性,则当媒介文件完成播放后再次开始播放

4、muted 如果出现该属性,视频的音频输出为静音

5、src 要播放的视频的 URL

source标签常见属性

1、src 规定媒体文件的 URL

2、type 规定资源的媒体类型:video/ogg,video/mp4,video/webm

source标签可以写多个

代码:

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video autoplay muted controls loop src="xxxxxx.mp4"></video>
    <video autoplay muted controls loop >
        <source src="xxxxxx.mp4" type="video/webm">
    </video>

</body>
</html>
相关推荐
AI_零食14 小时前
番茄钟鸿蒙PC Electron框架完成:状态机、定时器管理与专注力工具设计
前端·javascript·华为·electron·开源·鸿蒙·鸿蒙系统
提子拌饭13314 小时前
逛三园游戏——基于鸿蒙PC Electron框架实现
前端·javascript·游戏·华为·electron·鸿蒙
llz_11214 小时前
web-第三次课后作业
前端·后端·web
遗憾随她而去.15 小时前
Web地图全体系深度梳理:引擎、数据源、图层、投影核心知识
前端
爱因斯坦乐15 小时前
Vue项目整合
前端·javascript·vue.js
FlyWIHTSKY15 小时前
TS、TSX、JS、JSX 文件扩展名详解
开发语言·javascript·ecmascript
无风听海15 小时前
IndexedDB 深度指南 浏览器中的事务型对象数据库
前端·数据库
ct97816 小时前
组件间的通信
前端·javascript·vue.js
左手吻左脸。17 小时前
Vue 全栈面试题大全(2026 最新版最详细)
前端·javascript·vue.js
Aphasia31117 小时前
手写KeepAlive组件
前端·react.js·面试