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>
相关推荐
爱学习的程序媛15 小时前
【Web前端】蚂蚁AntV:企业级数据可视化全栈方案
前端·信息可视化·前端框架·web·数据可视化
文心快码BaiduComate15 小时前
Comate Spec Mode能力升级:让复杂任务开发更可控、更稳定
前端·后端
前端付豪15 小时前
实现 AI 回复支持 Markdown 渲染
前端·人工智能·markdown
阳火锅16 小时前
鳌虾 AoCode:重新定义 AI 编程助手的下一代可视化工具
前端·人工智能·架构
拾贰_C16 小时前
【node】node彻底卸载删除
前端
SuperEugene16 小时前
Vue3 组合式函数(Hooks)封装规范实战:命名 / 输入输出 / 复用边界 + 避坑|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
芝士麻雀16 小时前
掌握 .claude/ 目录:让 Claude Code 真正懂你的项目
前端·后端
cmd16 小时前
JS深浅拷贝全解析|常用方法+手写实现+避坑指南(附完整代码)
前端·javascript
进击的尘埃16 小时前
AbortController 实战:竞态取消、超时兜底与请求生命周期管理
前端·javascript
张一凡9316 小时前
我用 Zustand 三年了,直到遇见 easy-model...
前端·javascript·react.js