视频元素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. [POI2005]KOS-Dicing (最大流+二分)lg3425

    题面https://www.luogu.org/problemnew/show/P3425 题面说赢的最多的人最少赢几场,肯定是向二分的方向思考 建立源点向每一场比赛连容量为1的边,从每场比赛向参赛两 ...

  2. ORA-01476: 除数为 0

    假设是a/bdecode(b,0,null,a/b) 这样如果b为0,输出null,不为0输出a/b decode():将查询结果翻译成其他值,类似三目运算符 比较1个参数时      decode( ...

  3. WPF学习笔记三之绑定

    1.绑定模式 <TextBlock Margin="10" Text="LearningHard" Name="lbtext" Fon ...

  4. C#画图超出屏幕的部分无法显示的解决方法

    C#画图超出屏幕的部分无法显示,通过AutoScrollMinSize属性及相关方法解决问题. 可以实现 到 的转变. 代码如下: using System.Drawing; using System ...

  5. helm安装异常解决方案

    问题1:helm version正常 helm list 异常报错如下 解决方法: [root@MASTER1 ~]# helm init --service-account tiller --til ...

  6. 实用sql语句合集

    1. 将选取A表的name字段  然后选择A表和B表,最后进行id相等比较 最终得到的是合集 $res = \DB::select("SELECT name FROM users,car_a ...

  7. C++内存管理(new operator/operator new/operator delete/placement new)

    new operator 我们平时使用的new是new操作符(new operator),就像sizeof一样是语言内置的,不能改变它的含义,功能也是一样的 比如: string *ps = new ...

  8. 什么是类的hashcode值

    1.要知道什么是类的hashcode值,首要要了解什么是hash(哈希).Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射pre-image)通过散列算法变换 ...

  9. 关于QImage和IplImage之间转换的实现

    在嵌入式系统中实现qt和opencv的处理,最基础的就是QImage和IplImage之间的转换.这样两者就可以进行一起使用图像数据,从而达到利用qt显示和利用opencv处理的功能. 下面我将贴出代 ...

  10. 什么是文件的BOM头,及BOM头有哪些坑?

    1.什么是BOM? BOM是用来判断文本文件是哪一种Unicode编码的标记,其本身是一个Unicode字符("\uFEFF"),位于文本文件头部. 在不同的Unicode编码中, ...