视频元素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. [CF1304D] Shortest and Longest LIS - 贪心

    看样例,>><>><,要构造 LIS 最短的,我们需要找最小链划分的方案,即包含最少的下降列 很容易想到把连续 < 的看成一段,比如样例就是 .|.|. .| ...

  2. HTML div标签

    看成一个 纯净的箱子吧.....啥属性都没有....默认宽度100% 高度0高度是 按DIV里的 内容而变高也可以在 CSS里 设置 宽高....DIV就是 典型的 标签.. P UL LI 等 标签 ...

  3. 巨杉内核笔记(一)| SequoiaDB 会话(session)简介

    SequoiaDB 会话(session)简介 会话(Session)的基本概念 容易弄混淆的两个概念是会话与连接. 通俗来讲,会话(Session) 是通信双方从开始通信到通信结束期间的一个上下文( ...

  4. Windows启动项更改

    笔者遇到的问题: 之前新装了Windows10系统,但没注意到的是竟然是deepin和Windows10双系统,一是用不到deepin系统,二是占用C盘空间太多,就重新装回了Windows7系统,但重 ...

  5. [BJWC2010] 外星联络 - 后缀数组

    [BJWC2010] 外星联络 Description 求一个 \(01\) 串中所有重复出现次数大于 \(1\) 的子串所出现的次数,按照字典序排序输出. Solution 预处理出后缀数组和高度数 ...

  6. Java必须知道的知识点

    junit用法,before,beforeClass,after, afterClass的执行顺序 分布式锁 nginx的请求转发算法,如何配置根据权重转发 用hashmap实现redis有什么问题( ...

  7. python3练习100题——026

    原题链接:http://www.runoob.com/python/python-exercise-example26.html 题目:利用递归方法求5!. 是25题递归方式的简化版所以很容易. 我的 ...

  8. codeforces 1285D. Dr. Evil Underscores(字典树)

    链接:https://codeforces.com/problemset/problem/1285/D 题意:给n个数a1,a2,a3.....an,找到一个数X,使得X 异或所有的ai ,得到的ma ...

  9. 2020年算法设计竞赛 DP

    链接:https://ac.nowcoder.com/acm/contest/3002/I来源:牛客网https://ac.nowcoder.com/acm/contest/3002/I 题目描述 & ...

  10. Spark 中 GroupByKey 相对于 combineByKey, reduceByKey, foldByKey 的优缺点

    避免使用GroupByKey 我们看一下两种计算word counts 的方法,一个使用reduceByKey,另一个使用 groupByKey: val words = Array("on ...