视频元素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. numpy学习(二)

    练习篇(Part 2) 11. Create a 3x3 identity matrix (★☆☆) arr = np.eye(3) print(arr) 运行结果:[[1. 0. 0.] [0. 1 ...

  2. redis 列表类型list

    列表类型(list)1.插入 左侧插入 :lpush key value1 value2 value3... 右侧插入: lpush key value1 value2 value3... 在指定元素 ...

  3. ANDROID开发之问题积累及解决方案(三)

    1.dexDebug ExecException finished with non-zero exit value 2需要在gradle中配置下面的代码,原因是引用了多个libraries文件 de ...

  4. 高效完成R代码

    为什么R有时候运行慢? 参考https://www.cnblogs.com/qiaoyihang/p/7779144.html 一.为什么R程序有时候会很慢? 1.计算性能的三个限制条件 cpu ra ...

  5. Python中super的用法【转载】

    Python中super的用法[转载] 转载dxk_093812 最后发布于2019-02-17 20:12:18 阅读数 1143  收藏 展开 转载自 Python面向对象中super用法与MRO ...

  6. NVMe over Fabrics 协议Discovery服务交互过程跟踪

    Discovery服务过程跟踪 对于NVMe over Fabrics的subsystem,有两种类型:Discovery子系统和NVM子系统.这里介绍与Discovery子系统相关的交互内容(即:在 ...

  7. 解决centos7,django导出文件文件名为乱码问题

    在使用xadmin过程中,导出xls文件文件名为乱码问题解决: 这时候去修改xadmin->plugins->export.py中: def get_response(self, resp ...

  8. Android 开发替换Launcher

    做android产品的时候,根据需求会制定各种各样的Launcher,因此,在此记录替换系统Launcher的流程. 1.修改frameworks/base/core/java/android/con ...

  9. Chrome浏览器所有页面崩溃

    问题描述 Chrome浏览器所有页面崩溃,包括设置页面,"喔唷,崩溃啦!" 显示错误码:STATUS_INVALID_IMAGE_HASH Chrome所有插件报错,右下角一串弹框 ...

  10. 53最大子序和.py

    题目:给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 来源:https://leetcode-cn.com/problems/maximum-s ...