一、多媒体 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 多媒体标签的更多相关文章

  1. 小强的HTML5移动开发之路(12)——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  2. HTML5新标签与特性---多媒体

    多媒体标签 embed:标签定义嵌入的内容 audio:播放音频 video:播放视频 多媒体 embed(会使用) embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.M ...

  3. HTML5 常用标签整理

    <!--1.  html5 文本 --> <div> <header> <hgroup> <h1>h1</h1> <h2& ...

  4. Html5多媒体相关的API---video

    Html5多媒体相关的API---video 在HTML5中,新增了两个元素---video元素与audio元素,其中video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的 ...

  5. 【转】H5 - HTML5新增标签

    下面分别是传统的div+css的页面布局方式 下面是HTML5布局方式: 是不是精简了很多呢  现在来说说图片中出现的标签: 结构标签:(块状元素) 有意义的div artical 标记定义一篇文章  ...

  6. 【HTML5】如何处理HTML5新标签的浏览器兼容版问题

    HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...

  7. HTML5其他标签应用

    HTML5 是下一代 HTML 标准. HTML5 多媒体 音频标签 <audio src=" "></audio> 视频标签 <video src= ...

  8. html5 新增标签和特性

    文档类型设定 document HTML: XHTML: HTML5 字符设定 <meta http-equiv="charset" content="utf-8& ...

  9. HTML5 <details> 标签

    HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...

随机推荐

  1. JanusGraph入门,schema及数据模型

    5.Schema和数据建模 每个JanusGraph都有一个schema,该schema由edge labels,property keys,和vertex组成.JanusGraph schema可以 ...

  2. Java 的API(API: Application(应用) Programming(程序) Interface(接口))

    按 ctrl 点击查看源代码: 一.equals方法: 1.用于比较两个对象是否相同. 2.Objec 类中,若两边是引用数据类型,比较的是两个对象的内存地址. 3.Objec 类中,若两边是数值类型 ...

  3. I/O管理杂记

    这是一篇杂记,记录了操作系统层面与I/O管理的零散知识点,用于温习使用.由于I/O管理是一个很大的范畴,后续会不断按照自己的生产需求来补充用的到的知识点.计算机系统是人造系统,没有绝对的对错(相对于自 ...

  4. gnome3 调整标题栏高度

    适用于:gtk 3.20 + 1. 在用户主目录 -/.config/gtk3.0/ 下新建gtk.css文件: 2. 复制如下css值: headerbar.default-decoration { ...

  5. python paramiko模块简介及安装

    一:简介 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 由于使用的是python这样的能够跨平台运行的语言,所以所有python支 ...

  6. Python知识点复习

    一.列表1.创建一个文件birthday.py,假设你要祝某人生日快乐!首先将年龄存储在变量age中,将姓名存储在变量name中,让程序输出类似“阿明,23岁生日快乐!” 例如:假设你要祝某人生日快乐 ...

  7. Hadoop Capacity调度器概念及配置

    在Yarn框架中,调度器是一块很重要的内容.有了合适的调度规则,就可以保证多个应用可以在同一时间有条不紊的工作.最原始的调度规则就是FIFO,即按照用户提交任务的时间来决定哪个任务先执行,但是这样很可 ...

  8. MySql查询数据令某字段显示固定值

    我们用SQL查询数据时后,基于某些原因不想看到某字段的值,比如密码,我们可以通过创建视图,忽略某一字段的值. 同时我们也可以直接通过SQL语句来让其显示某个固定值: (1)一般查询语句: SELECT ...

  9. shell(三)if流程控制

    流程控制 if 流程控制 基本语法 单分支结构 if [];then fi 两分支结构 if [];then else fi 多分支结构 if [];then elif[];then elif[];t ...

  10. linux部署go

    一.下载tar包并解压 yum -y install wget glibc.i686 #后面一个是依赖包,不安装会报错: /lib/ld-linux.so.2: bad ELF interpreter ...