HTML5新媒体元素

新媒体元素

audio

  • 示例
//controls表示向用户显示控件<audio controls>     <source src="house.mp3"></audio>
  • 标签定义和说明

    • 定义音频(声音)
    • 支持三种文件格式:MP3、Wav、Ogg
      浏览器 支持
      IE MP3
      谷歌 3
      火狐 3
      欧朋 3
  • 提示和注释 
    • 可以在 和 之间放置文本内容,这些文本信息将会被显示在那些不支持 标签的浏览器中。
  • 属性
属性 描述
autoplay 音频自动播放
controls 向用户显示控件
loop 音频结束后自动重新播放
src 音频文件的URL
preload 当网页加载时,音频是否默认被加载以及如何加载
  • preload可能的值: 
    + auto:当页面加载后载入整个音频 
    + mta:当页面加载后只载入元数据 
    + none:当页面加载后不载入音频

video

  • 示例
<video width="320" height="240" controls>    <source src="movie.mp4" type="video/mp4">    <source src="movie.ogg" type="video/ogg">    您的浏览器不支持 video 标签。</video>
  • 标签定义及使用说明

    • 定义视频,比如电影皮那段和其他视频流
    • 支持3中格式:MP4、WebM、Ogg
      浏览器 格式
      IE MP4
      谷歌 3
      火狐 3
      欧朋 3
    • 音频格式的 MIME 类型
      Col1 Col2
      MP4 video/MP4
      WebW video/webm
      Ogg video/ogg
  • 属性 
    • 与audio一样
    • height:高度
    • width:宽度
  • 使用DOM进行控制
function playPause(){ //如果是关闭状态就让他播放    if (myVideo.paused)       myVideo.play();     else     //否则停止播放      myVideo.pause(); } 

embed

  • 示例
//嵌入flash动画<embed src="helloworld.swf">
  • 标签定义及使用说明 
     + 定义了一个容器,用来嵌入外部应用或者互动程序(插件)。
  • 属性 
    • height、width、 type、src
时间: 2024-11-06 09:37:33

HTML5新媒体元素的相关文章

HTML5 新模块元素兼容问题

新增块元素默认样式 下列HTML5新模块元素在IE8.9版本浏览器中没有被定义默认样式.为解决该问题,给下列元素添加“block”显示属性. 代码: article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } 特殊新增块元素 下列HTML5新模块元素在IE8.9版本浏览器中没有被定义默认样式,考虑到其特殊性,特为下列元素添加

html5新媒体播放器标签video、audio 与embed、object

html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是所有的浏览器都支持.video虽然号称可以支持三种媒体类型,但常用的只有mp4. 像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本上一样的, 1. video.audio可以看我的另一篇文章https://www.cnblogs.com/jing-tian/p/10930

HTML5新特性:元素的classList属性与应用

在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, toggleClass一样优雅的操作calssName, 在以前我们要对className封装处理,如下, 下面的代码你未必能看得懂运行流程,但应该能看懂功能部分,这几段函数是取自我录制的一套视频中,讲解DOM框架封装的一部分 gQuery.prototype.hasClass = function (ob

HTML5的媒体元素及iframe框架的使用

video元素的基本语法 <video src="../Ajax+加载单一信息.mp4" width="1000" height="500" controls>您的浏览器不支持video标签</video> src属性指定要播放的视频文件路径 controls属性用于提供播放.暂停.和音量控件,width和height设置视频的宽高 <!--video元素的应用--> <video controls au

HTML5 第二章 列表和表格和媒体元素

列表: (1)什么是列表? 列表就是信息资源的一种展示形式. (2)无序列表: 语法: <ul> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ul> (3)有序列表: 语法: <ol> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ol> (4

HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. 以下就为大家開始介绍媒体元素的相关事件. abort:触发时机是下载中断. canplay:在能够播放的时候,readyState的值为2的时候触发. canplaythrough:readyState的值为3的时候,触发.播放能够继续,而应该不会中断的时候触发. canshowcurrentfr

HTML5实战与剖析之媒体元素

随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML5中的媒体标签video标签和audio标签支持的非常好.这就使HTML5在移动端很流行. video标签和audio标签也提供了很实用的JavaScript API,允许创建自定义的控件.两个标签的用法如下. HTML代码 view source print? 1.<!-- 视频标签 --> 2

HTML5实战与剖析之媒体元素(4、检测编解码器的支持和Audio构造函数)

HTML5媒体元素检测编解码器的支持情况 虽然媒体元素可以实现音频和视频功能,但是并不是所有浏览器都支持video标签和audio标签的所有编解码器,这意味着开发人员必须提供很多歌媒体来源.在JavaScript API中能够检测浏览器是否支持某种格式和编解码器.这两个媒体元素都有一个canPlayType()方法,该方法接收一种格式/编解码器字符串,返回"probably"."maybe"或者""(空字符串).空字符串是假值,而"pr

HTML5实战与剖析之媒体元素(6、视频实例)

HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比较多.因为手机端基本上废除了flash的独断,让HTML5当家做主人,所以对视频支持的比较好.所以今天专门为大家奉上HTML5视频标签模拟视频播放器的小例子,让大家更好的理解HTML5和有效的应用在项目中. HTML代码 <!-- src中放上本地的ogv的音频 --> <video id="v1" src="Intermission-Walk-in.ogv"></vid