多媒体标签

  • 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. 用户APC的执行过程

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 用户APC的执行过程 一.一个启发式问题 有一个问题,线程什么时候 ...

  2. RocketMQ(一):推拉消费模型客户端实践

    消息中间件是为解耦生产者和消费者的目的,三大服务点:解耦.异步.削峰. 现在的的互联网系统中,mq已经必备基础设施了,我们已明显感觉它的必要性与强大.然而,它的本质是啥?存储转发系统罢了! MQ有很多 ...

  3. CRM第二篇

    检索策略 : 相当于优化查询,主要是分为立即加载和延迟加载. 当你查询一个对象的时候,要想立马使用这个对象,或者说是立即查询出来,就使用立即加载. 当你查询这个对象时候不想立马查询出来,而是在使用这个 ...

  4. 剑指offer笔记面试题14----剪绳子

    题目:给你一根长度为n的绳子,请把绳子剪成m段(m,n都是整数,n > 1 并且m > 1),每段绳子的长度记为k[0], k[1], ...k[m].请问k[0] x k[1] x .. ...

  5. flutter 下拉加载+下拉加载

    功能: 1.下拉加载 2.上拉加载 3.显示加载图标 4.更新列表数据,隐藏加载图标 flutter库: flutter_spinkit: ^3.1.0 加载图标 其他:加载列表需要列表,基于上一节的 ...

  6. Eclipse的Git插件Egit: merge合并冲突具体解决方法

    http://www.cnblogs.com/wavky/p/3504060.html 稍微总结下弄了半个下午的egit的merge合并冲突解决方法,网上看的都是一个模板出来的,看的糊里糊涂,花了很多 ...

  7. JupyterLab安装与配置虚拟环境

    JupyterLab安装: 推荐使用miniconda,相比于anaconda更加简洁,下载连接:https://mirrors.tuna.tsinghua.edu.cn/anaconda/minic ...

  8. selenium时间等待方法

    在UI自动化测试中,必然会遇到环境不稳定.网络慢等情况.当你觉得定位没有问题,但程序却直接报了元素不可见时,那你就需要思考是否因为程序运行太快或者页面加载太慢而造成了元素不可见,必须要再等待直至元素可 ...

  9. (办公)mysql索引

    举个例子:20多w的数据,查询语句,什么都没有查到,既没有走到主键索引,普通索引,什么都没走,走的就非常慢. 下面要加索引,并了解mysql索引的作用,以及如何使用他们索引. 介绍MysqlMySQL ...

  10. 预览本地图片原生js

    <!-- 样似总结: 用a标签代替file,做文件上传. 将file进行绝对定位,透明度设置为0:宽度为“上传图片”的宽度,超出部分隐藏. 这样做是为了将file隐藏起来.用a标签代替file ...