视频元素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. Python3标准库:difflib差异计算工具

    1. difflib差异计算工具 此模块提供用于比较序列的类和函数. 例如,它可以用于比较文件,并可以产生各种格式的不同信息,包括HTML和上下文以及统一格式的差异点.有关目录和文件的比较,请参见fi ...

  2. 一次m2eclipse的安装大坑经历之http://m2eclipse.sonatype.org/sites/m2e

    m2eclipse 插件的安装在<Maven 实战>这本书上是这么说的: ”由于Eclipse默认没有集成对Maven的支持,幸运的是由Maven之父Jason Van Zyl创立的Son ...

  3. python接口自动化之fiddler使用(二)

    1.快捷设置,自定义会话框,查看get和post请求 (1)鼠标放在#后面,右键 (2)选择Customize columns (3)选择Miscellaneous (4)选择RequestMetho ...

  4. Spring家族几大插件

    Spring家族很庞大,从最早先出现的服务于企业级程序开发的Core.安全方面的Security.到后来的作为各种数据源桥梁的Data.最近几年很火的Boot,以及最新推出的正在蓬勃发展的Cloud( ...

  5. codeforces 1269E K Integers (二分+树状数组)

    链接:https://codeforces.com/contest/1269/problem/E 题意:给一个序列P1,P2,P3,P4....Pi,每次可以交换两个相邻的元素,执行最小次数的交换移动 ...

  6. vue.js + element中el-select实现拼音匹配,分词、缩写、多音字匹配能力

    1.既然要用到拼音搜索,我们就需要一个拼音库,在这里我推荐一个第三方包:https://github.com/xmflswood/pinyin-match,在这里首先对这个包的开发者表示万分的感谢. ...

  7. Linux安装MATLAB2016a

    一.准备工具 matlab2016a的镜像文件和破解文件(链接: https://pan.baidu.com/s/1cxtlOM 密码: cj2u) Linux系统,我用的是deepin15.4,和一 ...

  8. java基础之 数据类型

    数据类型表示要存储在变量中的不同类型的值. 一.Java语言提供了八种基本数据类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. 1. byte byte 数据类型是8位.有 ...

  9. OpenCV函数 重映射

    重映射是什么意思? 把一个图像中一个位置的像素放置到另一个图片指定位置的过程. 为了完成映射过程, 有必要获得一些插值为非整数像素坐标,因为源图像与目标图像的像素坐标不是一一对应的. 我们通过重映射来 ...

  10. 16day 重定向符号:

    >/1> 标准输出重定向符号 2> 错误输出重定向符号 >>/1> 标准输出追加重定向符号 2>> 错误输出追加重定向符号 如何将正确信息和错误信息都输 ...