HTML5 多媒体标签
一、多媒体 embed 标签
embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
语法格式:
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
Tips:
- <embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
- 不同的浏览器对音频格式的支持也不同。
- 如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。
- 如果用户的计算机未安装插件,无法播放音频。
- 如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。
二、音频 audio 标签
HTML5通过<audio>标签来解决音频播放的问题。
语法格式:
<audio src="路径" autoplay="autoplay" controls="true" loop=2></audio>
autoplay属性控制是否网页加载自动播放
controls 是否显示播放控件,默认不显示
loop 属性用于控制循环次数,如果值为正整数,则播放指定的次数,如果是 loop 或者是 loop = -1,则无线循环播放。
由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考

多浏览器支持的方案,如下图:

三、视频 video 标签
HTML5通过<audio>标签来解决音频播放的问题。
语法格式:
<video src="路径" controls autoplay width="300px"></video>
autoplay属性控制是否网页加载自动播放
controls 是否显示播放控件,默认不显示
loop 属性用于控制循环次数,如果值为正整数,则播放指定的次数,如果是 loop 或者是 loop = -1,则无线循环播放。
width 属性设置播放窗口宽度
height 属性设置播放窗口高度
由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考

多浏览器支持的方案,如下图:

更多的标签学习请参考这里:http://www.w3school.com.cn/html/index.asp
HTML5 多媒体标签的更多相关文章
- 小强的HTML5移动开发之路(12)——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- HTML5新标签与特性---多媒体
多媒体标签 embed:标签定义嵌入的内容 audio:播放音频 video:播放视频 多媒体 embed(会使用) embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.M ...
- HTML5 常用标签整理
<!--1. html5 文本 --> <div> <header> <hgroup> <h1>h1</h1> <h2& ...
- Html5多媒体相关的API---video
Html5多媒体相关的API---video 在HTML5中,新增了两个元素---video元素与audio元素,其中video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的 ...
- 【转】H5 - HTML5新增标签
下面分别是传统的div+css的页面布局方式 下面是HTML5布局方式: 是不是精简了很多呢 现在来说说图片中出现的标签: 结构标签:(块状元素) 有意义的div artical 标记定义一篇文章 ...
- 【HTML5】如何处理HTML5新标签的浏览器兼容版问题
HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...
- HTML5其他标签应用
HTML5 是下一代 HTML 标准. HTML5 多媒体 音频标签 <audio src=" "></audio> 视频标签 <video src= ...
- html5 新增标签和特性
文档类型设定 document HTML: XHTML: HTML5 字符设定 <meta http-equiv="charset" content="utf-8& ...
- HTML5 <details> 标签
HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...
随机推荐
- Scrapy笔记11- 模拟登录
Scrapy笔记11- 模拟登录 有时候爬取网站的时候需要登录,在Scrapy中可以通过模拟登录保存cookie后再去爬取相应的页面.这里我通过登录github然后爬取自己的issue列表来演示下整个 ...
- Hibernate框架学习3
一对多|多对一 一对多 多对一 级联操作 结论: 简化操作.一定要用,save-update,不建议使用delete. 关系维护 在保存时.两方都会维护外键关系.关系维护两次,冗余了. 多余的维护关系 ...
- C++标准库中的std::endl究竟做了什么?
先抓出std::endl的源代码: /** * @file ostream * @brief Write a newline and flush the stream. * * This m ...
- 元素的alt和title有什么异同?
①alt作为图片的替代文字出现,title作为图片的解释文字出现. ②alt属性应用较少,如img.area.input中,title应用较多,如a.form.input.还有div.p这些块级元素都 ...
- [BZOJ1015/JSOI2008]星球大战
// 此博文为迁移而来,写于2015年7月16日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w6le.html 1.题 ...
- 洛谷 P5057 [CQOI2006]简单题 题解
P5057 [CQOI2006]简单题 题目描述 有一个 n 个元素的数组,每个元素初始均为 0.有 m 条指令,要么让其中一段连续序列数字反转--0 变 1,1 变 0(操作 1),要么询问某个元素 ...
- 深入js系列-环境
javascript运行环境 js如果只在引擎中运行,它会严格遵循并且可以预测的,但是js几乎都在宿主环境中运行,浏览器或者Node环境 ECMAScript中的Annex B 介绍了浏览器兼容性问题 ...
- centos 升级openSSH7.81
1.下载相关依赖包 [root@Log ~]# yum install -y gcc openssl-devel pam-devel rpm-build 2.下载安装包 wget http://ftp ...
- IntelliJ IDEA 插件推荐
1.GenerateAllSetter 自动生成类set方法 2.GsonFormat 根据JSON创建实体 3.Lombok plugin 简化代码 4. .ignore 忽略git提交文件 5.A ...
- 虚方法(virtual)\抽象方法(abstract)\接口(interface)的区别
转自:https://www.cnblogs.com/fantaohaoyou/p/9402657.html 虚方法和抽象方法都可以供派生类重写,它们之间有什么区别呢? 1. 虚方法必须有实现部分,抽 ...