HTML5学习(7)多媒体元素
视频元素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)多媒体元素的更多相关文章
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记<二>:元素,属性,格式化
HTML元素 元素是指从开始标签到结束标签的所有代码. 开始(开放)标签 元素内容 结束(闭合)标签 <p> this is my web page </p> 没有内容的 HT ...
- html5学习(新增元素)
来源于<实战html5>contenteditable 规定是否可编辑元素的内容 css3圆角 border-radius旋转变换 transform:rotate(); 变换 trans ...
- 三天学会HTML5 ——多媒体元素的使用
目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分 ...
- [html5] 学习笔记-表单新增的元素与属性(续)
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- HTML5学习笔记(四):H5中表单新增元素及改良
方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5学习笔记简明版(10):过时的元素和属性
被遗弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用,现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. ...
随机推荐
- 常用phpstorm快捷键
欢迎提交你经常使用的快捷键 ctrl+j 插入活动代码提示 ctrl+alt+t 当前位置插入环绕代码 alt+insert 生成代码菜单 ctrl+q 查看代码注释 ctrl+d 复制当前行 ctr ...
- BFS-八数码问题与状态图搜索
在一个3*3的棋盘上放置编号为1~8的八个方块,每个占一格,另外还有一个空格.与空格相邻的数字方块可以移动到空格里.任务1:指定的初始棋局和目标棋局,计算出最少的移动步数:任务2:数出数码的移动序列. ...
- AE接口编程
[转]原文链接:https://malagis.com/arcgis-engine-10-develop-handbook-2-1.html 使用 ArcGIS Engine,也就意味着使用里面的接口 ...
- HTML-表格-基础表格
主要内容: HTML表格 基本语法和结构: 案例: border用在table标签里面,表示边框的. th标签是加粗,width是宽度,表格宽度用在table里面.: caption用在table ...
- OpenCV3+VS2015 经常出现debug error abort()has been called问题
方案1:图片路径错误:查看imread的路径
- day01_2spring3
Bean基于XML和基于注解的装配 一.Bean基于XML的装配 1.生命周期接着day01_1来讲(了解) Bean生命周期的如图所示:用红色框起来的都是我们要研究的! 如图Bean is Read ...
- OpenGL 编程指南 (4)
1.OpenGL用户裁剪需要使用一个vertex shader的内置变量gl_ClipDistance,它是一个声明的时没有指定大小的数组,因此需要重新声明它的大小或者将它作为一个编译时的常量使用(啥 ...
- PHP程序员应该如何提升
PHP程序员应该如何提升 尤其不认可W3school之类的东西,不够深度,理解不深,比起这个更建议看官方文档,中文不清楚,看英文的. 入门视频:入门视频推荐:哈佛大学公开课:构建动态网站Beginne ...
- 题解 P4289 【[HAOI2008]移动玩具】
题目地址:https://www.luogu.com.cn/problem/P4289 题解原地址:https://createsj.blog.luogu.org/solution-p4289 让我们 ...
- django 搭建一个投票类网站(三)
之前修改index的视图的代码,工作原理是先试用loader方法加载视图,然后HTTPResponse方法初始化一个HTTPResponse对象并返回给浏览器.对于很多django视图来说,他们的工作 ...