视频元素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. 使用饿了么el-date-picker里及如何将后台给的时间戳js转化为时间格式

    首先代码是这个样子的,使用v-model <el-date-picker v-model="formData.createTime" :disabled="true ...

  2. 2级迁移类Q201-Oracle RAC 到单机RMAN迁移(同字节序)非公

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...

  3. Centos 修改yum源为aliyun

    修改服务器源,避免长途跋涉到国外: 位置: vim  /etc/yum.repos.d/CentOS-Base.repo aliyun地址: 设置aliyun的yum源 wget -O /etc/yu ...

  4. vue组件中的data为什么是函数?

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

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

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

  6. Codeforces Round #600 (Div. 2) A. Single Push

    #include<iostream> #include<cstdio> #include<cstdlib> using namespace std; int T,n ...

  7. Android监听消息通知栏点击事件

    Android监听消息通知栏点击事件 使用BroadCastReceiver 1 新建一个NotificationClickReceiver 类,并且在清单文件中注册!! public class N ...

  8. 【网站】网站不能在QQ,微信中访问,申诉办法

    使用这个网站申诉即可 https://appeal.anquan.org/

  9. .Net中C# Dictionary 用法

    Dictionary提供快速的基于键值的元素查找. 结构是:Dictionary <[key] , [value] >,当你有很多元素的时候可以用它. 它包含在System.Collect ...

  10. Whctf 2017 -UNTITLED- Writeup

    Whctf 2017 -UNTITLED- Writeup 转载请表明出处http://www.cnblogs.com/WangAoBo/p/7541481.html 分析: 下载下来的附件是一个py ...