视频元素video

<video src="./media/xxx.mp4" controls autoplay muted loop></video>

音频元素audio

<audio src="./media/xxx.mp3" controls autoplay muted loop></audio>

布尔属性:值和属性名相同,值可以省略不写。

controls 显示控件

autoplay 自动播放

muted 静音

loop 循环播放

兼容性:

1.这两个元素是HTML5中新增的元素,有些老的浏览器不支持

2.不同的浏览器支持的音视频格式可能不一致,通过下面的写法使播放的成功率变大(mp4和webm是互联网中最常用的视频格式)

<video controls autoplay muted loop>

  <source src="./media/xxx.mp4">

  <source src="./media/xxx.webm">

</video>

HTML5学习(7)多媒体元素的更多相关文章

  1. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HTML5学习笔记<二>:元素,属性,格式化

    HTML元素 元素是指从开始标签到结束标签的所有代码. 开始(开放)标签 元素内容 结束(闭合)标签 <p> this is my web page </p> 没有内容的 HT ...

  3. html5学习(新增元素)

    来源于<实战html5>contenteditable 规定是否可编辑元素的内容 css3圆角 border-radius旋转变换 transform:rotate(); 变换 trans ...

  4. 三天学会HTML5 ——多媒体元素的使用

    目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分 ...

  5. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  6. HTML5学习笔记(四):H5中表单新增元素及改良

    方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...

  7. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  8. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  9. HTML5学习笔记简明版(10):过时的元素和属性

    被遗弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用,现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. ...

随机推荐

  1. SimpleDateFormat中YYYYmmDDhhMMss大小写问题-获取不到正确时间以及常见的格式串

    1.问题解决: SimpleDateFormat sf = new SimpleDateFormat("YYYYmmDDhhMMss");String transTime = &q ...

  2. Python标准库之时间模块time与datatime模块详解

    时间模块time与datatime 时间表示方式: 时间戳 格式化时间字符串 元组 时间戳格式: time.time()#输出1581664531.749063 元组格式: time.localtim ...

  3. Mesh R-CNN 论文翻译(实验部分)

    本文为 Mesh R-CNN 论文翻译(原理部分)的后续.Mesh R-CNN 原论文. 4 实验   我们在ShapeNet上对网格预测分支进行基准测试,并与最先进的方法相比较.然后,我们在野生的有 ...

  4. 检测识别问题中的metrics

    之前一直记不熟各种指标的具体计算,本文准备彻底搞定这个问题,涵盖目前遇到过的所有评价指标. TP,TN,FP,FN 首先是true-false和positive-negative这两对词.以二分类为例 ...

  5. 共享v2射线局域网http代理方法

    问题描述 默认v节点大部分是socks代理,实际使用过程中存在以下问题: 部分浏览器无法支持socks需要走http代理. 局域网内其他设备(手机.PS4等)需要配置代理. 解决方法 1.在PC托盘图 ...

  6. javascript当中的构造函数的用法

    5)构造函数的用法: 例 3.5.1 <head>    <meta http-equiv="content-type" content="text/h ...

  7. JUC-LOCK接口

    Synchronized 1.多线程编程模版上 (1)线程 操作 资源类 (2)高内聚低耦合 2.实现步骤 (1)创建资源类 (2)资源类里创建同步方法,同步代码块 3.例子:卖票 LOCK 接口 锁 ...

  8. csp 初赛 (不懂的地方)

    11. 有以下结构体说明和变量定义,如图所示,指针 p. q. r 分别指向一个链表中的三个连续结点. struct node {                        int data;st ...

  9. COMMUNITY DETECTION

    Method 1: M. E. J Newman ‘Networks: An Introduction’, page 224 Oxford University Press 2011. from ne ...

  10. 在 linux 中连接 mysql 数据库

    命令格式 mysql -h主机地址 -u用户名 -p用户密码 登录本机 mysql mysql -u用户名 -p用户密码 实例 TD - X1数据库:/opt/lampp/bin/mysql -u r ...