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

原文地址:https://www.cnblogs.com/niujifei/p/11074026.html

时间: 2024-11-09 05:52:55

HTML5 多媒体标签的相关文章

HTML5移动开发之路(12)——从一个多媒体标签说起 一、视频播放

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(12)--从一个多媒体标签说起 一.视频播放 [html] view plain copy print? <html> <head> <title>多媒体播放</title> </head> <body> <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4&qu

玩转HTML5+跨平台开发[6] H5多媒体标签

汇总 1. video标签 2. audio标签 3. summary标签和details标签-详情和概要标签 4. marquee标签-跑马灯效果 5. HTML中被废弃的标签 6. HTML实体 video标签 作用: 播放视频 格式1: <video src=""> </video> video标签的属性src: 用于告诉video标签需要播放的视频地址:autoplay: 用于告诉video标签是否需要自动播放视频:controls: 用于告诉video

html5新标签及废弃元素

html5新标签 <canvas> 新元素 标签 描述 <canvas> 标签定义图形,比如图表和其他图像.该标签基于 JavaScript 的绘图 API 新多媒体元素 标签 描述 <audio> 定义音频内容 <video> 定义视频(video 或者 movie) <source> 定义多媒体资源 <video> 和 <audio> <embed> 定义嵌入的内容,比如插件. <track>

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

HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在低级浏览器中也得到有限的支持,不至于影响整个的页面功能. 让浏览器识别HTML5规范中的新标签 IE8浏览器中还没有添加对HTML5新标签的支持,所以在IE8中无法直接展现HTML5新标签中的内容.庆幸的是IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以

HTML5 常用标签整理

<!--1.  html5 文本 --> <div> <header> <hgroup> <h1>h1</h1> <h2>h2</h2> </hgroup> </header> <article>article</article> <footer>footer</footer> </div> <!-- 2. html5 小

html5新增标签与传统html的区别

一.文档声明以及编码声明的改变 html5之前的版本声明: 文档类型- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 文档编码- <meta http-equiv="Content-Type" content="text/ht

Html5新标签---第一天

一.HTML5新增标签和重新定义的标签1.结构标签 块级元素,有意义的div<article> 定义一篇文章,强调独立性<header> 定义一个页面或一个区域的头部<nav> 定义导航链接<section> 定义一个区域,例如将一块内容分成几段<aside> 定义页面内容部分的侧边栏<hgroup> 定义文件中一个区块的相关信息,里面放h系列的标签,最好h3<figure> 定义一组媒体内容以及它们的标题<figc

【转】H5 - HTML5新增标签

下面分别是传统的div+css的页面布局方式 下面是HTML5布局方式: 是不是精简了很多呢  现在来说说图片中出现的标签: 结构标签:(块状元素) 有意义的div artical 标记定义一篇文章 header 标记定义一个页面或一个区域的头部 nav 标记定义导航链接 section 标记定义一个区域 aside 标记定义页面内容部分的侧边栏 hgroup 标记定义文件中一个区块的相关信息 figure 标记定义一组媒体内容以及它们的标题 figcaption 标签定义 figure 元素的

使用Html5多媒体实现微信语音功能

随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服.店小二功能,语音聊天成为了必不可少的方式. 但是很多人感觉网页端语音离我们很遥远,这些更多是本地应用的工作,其实不然,随着Html5的发展,语音功能也渐渐成为前端必会的功能之一. 为什么要学会HTML5 的语音呢? 1.Html5 规范推进,手机的更新加速了操作系统更新,语音功能将会变成前端主要的工作之一,就像现在的canvas一样.前端实现语音功能开发速度更快,更节省人