视频元素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. [CF91B] Queue - 权值线段树

    有n个人在队列中等待.假如某个人前面有一个人年龄比他小,那他就会不高兴:定义他的"不高兴度"为他前面留他最远的年龄比他小的人与他的距离,求每个人的不高兴度. n<=10^5 ...

  2. 使用Image Sharp 对二维码图片中间加入logo图片

    1.在NuGet包源加入Image Sharp包源 2.在需要用到Image Sharp的项目中安装以下的插件 3.调用图片上绘制图片的方法

  3. rm -rf

    inux反选删除文件 最简单的方法是 # shopt -s extglob      (打开extglob模式) # rm -fr !(file1)  如果是多个要排除的,可以这样: # rm -rf ...

  4. AntDesign(React)学习-14 使用UMI提供的antd模板

    1.UMI提供了可视化antd模板,可以直接添加到项目中修改用 比如将个人中心添加到项目中 2.选择个人中心,确定 3.成功 4.打开项目 5.Route文件也自动添加 根路由有exact:true后 ...

  5. 判断IE版本的HTML语句[if lte IE 9]……[endif]

    我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...

  6. python之路set

    一.set和其他集合的区别: list :允许重复的集合,修改 tuple:允许重复的集合,不修改 dict:字典 set:不允许重复的集合,set不允许重复的,列表是无序的 1.创建一个set s= ...

  7. AcWing 1014. 登山

    #include<iostream> using namespace std ; ; int f[N],g[N]; int w[N]; int main() { int n; cin> ...

  8. python面试的100题(6)

    7.请反转字符串 "aStr"? print("aStr"[::-1]) python实现字符串反转 第一种:使用字符串切片 result = s[::-1] ...

  9. oracle查询第几行到第几行的数据

    我想查询10条到20条的数据 注意: 1.大数在前,小数在后面 2.都是小于 () minus (); 运行结果:

  10. beego登录退出与检查登录过滤器

    // ShowLogin 登陆显示 func (c *UserController) ShowLogin() { username := c.Ctx.GetCookie("username& ...