视频元素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. [AtCoder Code Festival 2017 QualB C/At3574] 3 Steps - 二分图染色,结论

    给你一个n个点m条边的无向图,进行以下操作 如果存在两个点u和v,使得从u走三步能恰好到达v,那么在u和v之间连接一条边 重复这个操作直到不能再连接新的边,问最后有多少条边? n, m <= 1 ...

  2. IntelliJ WebStorm 2020最新 永久破解激活教程【全网最强,可用至2100年】

    说明:都到了2020年,当然要用最新的IDE,目前最新是2019.3.1版本 ①IntelliJ WebStorm 2019.3.1安装永久破解[最强] 一. 在官网下载WebStorm安装包  链接 ...

  3. java的服务是每收到一个请求就新开一个线程来处理吗?tomcat呢?

    首先,服务器的实现不止有这两种方式. 先谈谈题主说的这两种服务器模型: 1.收到一个请求就处理,这个时候就不能处理新的请求,这种为阻塞 这个是单线程模型,无法并发,一个请求没处理完服务器就会阻塞,不会 ...

  4. JS高级---识别正则表达式是否匹配

    识别正则表达式是否匹配 console.log(/[a-zA-Z]+/.test("hello")); console.log(/./.test("除了回车换行以为的任意 ...

  5. 使用TensorFlow训练模型的基本流程

    本文已在公众号机器视觉与算法建模发布,转载请联系我. 使用TensorFlow的基本流程 本篇文章将介绍使用tensorflow的训练模型的基本流程,包括制作读取TFRecord,训练和保存模型,读取 ...

  6. 06 部署redis缓存数据库

    1 安装redis $ sudo apt-get install redis-server 安装完成后,Redis服务器会自动启动,检查Redis服务器程序 注:在安装过程中,腾讯服务器会中途停止. ...

  7. 基于约束条件的SQL攻击

    一.背景 今天看了一篇基于约束条件的SQL攻击的文章,感觉非常不错,但亲自实践后又发现了很多问题,虽然利用起来有一定要求,不过作者的思想还是很值得学习的.原文中的主旨思想是利用数据库对空格符的特殊处理 ...

  8. spring boot 运行错误: 找不到或无法加载主类

    在项目根目录运行 mvn clean install 进行重新编译 不行的话就删了原有的启动配置,重新配置启动.

  9. 0107 spring操作数据库的3个架子

    背景 数据库开发是java的核心内容之一,基础就是jdbc了: 然而直接使用jdbc,需要写大量的try-catch-finally模板代码: 管理系统使用hibernate作为orm框架比较方便,遵 ...

  10. oracle分组并在组内排序

    根据c1,c2分组,并且根据c3排序,取第一行select tt.*  from (select row_number() over(partition by c1, c2 order by c3 d ...