多媒体标签

  • embed:标签定义嵌入的内容
  • audio:播放音频
  • video:播放视频

多媒体 embed(会使用)

embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。

因为兼容性问题,我们这里只讲解 插入网络视频, 后面H5会讲解 audio 和video 视频多媒体。

<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>

优酷,土豆,爱奇艺,腾讯、乐视等等

  1. 先上传
  2. 在分享

多媒体 audio

HTML5通过

使用相当简单,如下图所示

并且可以通过附加属性可以更友好控制音频的播放,如:

autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环

由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考

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

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择

多媒体 video

HTML5通过

同音频播放一样,

同样,通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考

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


HTML5新标签与特性---多媒体的更多相关文章

  1. HTML5新标签与特性---新表单+新属性----综合案例1

    HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...

  2. html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  3. html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  4. HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分HTML和HTML5?

    HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...

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

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

  6. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  7. 支持HTML5新标签

    IE8/IE7/IE6支持通过document.createElement方法产生的标签,               可以利用这一特性让这些浏览器支持HTML5新标签,               ...

  8. 如何处理HTML5新标签的兼容性问题

    支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添 ...

  9. 如何处理HTML5新标签的浏览器兼容性问题?

    ① IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签 ② 也可以使用成熟的框架 ex:html5shim &l ...

随机推荐

  1. Git - Git版本库相关操作

    创建Git版本库 如下命令实现在“E:\GitCode\01_TestGit”路径下,01_TestGit项目的Git版本库. $ cd E: #将当前目录转到E盘下 $ cd GitCode    ...

  2. 整理了8个Python中既冷门又实用的技巧

    1.print 打印带有颜色的信息 大家知道 Python 中的信息打印函数 print,一般我们会使用它打印一些东西,作为一个简单调试. 但是你知道么,这个 Print 打印出来的字体颜色是可以设置 ...

  3. python爬虫执行js代码-execjs

    一.安装模块 pip install PyExecJS execjs会自动使用当前电脑上的运行时环境(建议用nodejs,与Phantomjs) 二.简单的使用 import execjs js_ob ...

  4. 77777 77777(2) WriteUp 绕waf技巧学习

    两个题的代码都是一样的 只是waf不一样 贴出代码 <?php function update_point($p,$point){ global $link; $q = sprintf(&quo ...

  5. Pandas处理超大规模数据

    对于超大规模的csv文件,我们无法一下将其读入内存当中,只能分块一部分一部分的进行读取: 首先进行如下操作: import pandas as pd reader = pd.read_csv('dat ...

  6. Jupyter Notebooks 配置

    重装了三遍(破音) 一.首先进行Anaconda的下载 然后安装,将环境配置到系统变量上,如下 然后,打开 windows 的终端,检查是否配置成功 conda -V 然后就可以开始 Jupyter ...

  7. SQL Server清理数据库日志的脚本-干货

    USE [master]GOALTER DATABASE AAAAAA SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE AAAAAA SET RECO ...

  8. go语言设计模式之abstract factory

    这个代码太多了,调了一晚上. 只能立图证明我测试通过了哈. 真的是工厂的工厂,有点深.

  9. WebScraper for Mac(网站数据抓取软件) 4.10.2

    WebScraper Mac版是一款Mac平台上通过使用将数据导出为JSON或CSV的简约应用程序,WebScraper Mac版可以快速提取与某个网页(包括文本内容)相关的信息.WebScraper ...

  10. JavaScript中一个对象数组按照另一个数组排序

    JavaScript中一个对象数组按照另一个数组排序 需求:排序 const arr1 = [33, 11, 55, 22, 66]; const arr2 = [{age: 55}, {age: 2 ...