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 元素的功能. ...
随机推荐
- nginx 启动报错找不到nginx.pid文件
这个问题的出现应该是系统找不到nginx的配置文件nginx.conf,所以,我们要告诉系统配置文件的位置:' --- 使用nginx -c /usr/local/nginx/conf/nginx.c ...
- md基础语法总结
md即为Markdown,Markdown的目标是实现「易读易写」,可读性,无论如何,都是最重要的.其实md的底层最终还是将我们写的语法转化为html标签了 --------------------- ...
- Windwos查看本地局域网内所有的ip方法
Windows平台ping测试局域网所有在用IP .打开cmd命令窗口 .输入命令:,,) DO ping -w -n .%i //这个是自己局域网的ip地址前三位 查看自己ip信息的命令是ipcon ...
- Ice Skating
Bajtek is learning to skate on ice. He's a beginner, so his only mode of transportation is pushing o ...
- eclipse的一些使用
1.恢复默认视图 window->perspective->open perspective ->open java 2.打开其他的一些视图,比如server(tomcat,目前使用 ...
- 部署prerender服务器
// 安装 git sudo apt-get install git sudo apt-get install curl // 请先确认服务器是否安装了curl 如果已经安装跳过即可 // 安装 no ...
- centos7安装谷歌浏览器
1. 安装: 考虑到国内无法访问Google,所以需要自己配置yum源: 1.在目录 /etc/yum.repos.d/ 下新建google-chrome.repo文件,命令如下: 1.cd /ect ...
- [CF1236D] Alice and the Doll - 模拟,STL
[CF1236D] Alice and the Doll Description \(N \times M\)网格,有 \(K\) 个格子里有障碍物.每次经过一个格子的时候只能直走或者右转一次.初态在 ...
- Linux package installation: deb and rpm
一般来说著名的 Linux 系统基本上分两大类: RedHat 系列:Redhat.Centos.Fedora 等 Debian 系列:Debian.Ubuntu 等 Dpkg (Debian系): ...
- orcad常用库文件
ORCAD CAPTURE元件库介绍 AMPLIFIER.OLB amplifier 共182个零件,存放模拟放大器IC,如CA3280,TL027C,EL4093等. ARITHMETIC.OLB ...