`
lucifinilhades
  • 浏览: 86607 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

HTML5 多媒体播放【1】

阅读更多

video与audio元素基础

在HTML5中,video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的音频数据。

以audio元素为例,只要把播放音频的URL给指定元素的src属性就可以了,例如:

<audio src="demo/test.mp3">
    您的浏览器不支持audio元素!
</audio>

通过这种方法,可以把指定的音频数据直接嵌入在网页上,其中“您的浏览器不支持audio元素!”为在不支持audio元素的浏览器中所显示的替代文字。

video元素的使用方法也很简单,只要设定好元素的长、宽等属性,并且把播放视频的URL地址指定给该元素的src属性就可以了,示例如下:

<video width="640" height="360" src="demo/test.mp4">
    您的浏览器不支持video元素!
</video>

另外,还可以通过使用source元素来为同一个媒体数据指定多个播放格式与编码方式,以确保浏览器可以从中选择一种自己支持的播放格式进行播放,浏览器的选择顺序为代码中的书写顺序,它会从上往下判断自己对该播放格式是否支持,直到选择到自己支持的播放格式为止。其使用方法如下所示:

<video width="640" height="360">
    <!-- 在Ogg theora格式、Quicktime格式与MP4格式之间选择自己支持的播放格式。 -->
    <source src="demo/sample.ogv" type="video/ogg; codecs='theora, vorbis'"/>
    <source src="demo/sample.mov" type="video/quicktime"/>
</video>

source元素具有以下几个属性:

  • src属性是指播放媒体的URL地址;
  • type属性表示媒体类型,其属性值为播放文件的MIME类型,该属性中的codecs参数表示所使用的媒体的编码格式。

因为各浏览器对各种媒体类型及编码格式的支持情况都各不相同,所以使用source元素来指定多种媒体类型是非常有必要的。

  • IE9:支持H.264和VP8视频编码格式;支持MP3和WAV音频编码格式。
  • Firefox 4及以上、Opera 10及以上:支持Ogg Theora和VP8视频编码格式;支持Ogg vorbis和WAV音频格式。
  • Chrome 6及以上:支持H.264、VP8和Ogg Theora视频编码格式;支持Ogg vorbis和MP3音频编码格式。
分享到:
评论

相关推荐

    基于HTML5的多媒体播放网站_郑培纯.caj

    基于HTML5的多媒体播放网站_郑培纯

    基于HTML5的多媒体播放网站.docx

    基于 HTML5 的多媒体播放网站 在互联网技术的不断发展下,多媒体播放网站已经成为了人们获取娱乐、学习、新闻等方面的重要途径之一。基于 HTML5 技术构建的多媒体播放网站,可以提供更加优质的播放体验,同时也可以...

    多功能HTML5多媒体视频播放js特效代码.rar

    这个“多功能HTML5多媒体视频播放js特效代码.rar”压缩包包含了一组JavaScript代码,用于实现高级的HTML5视频播放器功能,如点播和缓冲。让我们深入探讨一下这些知识点。 首先,HTML5的 `&lt;video&gt;` 标签是实现视频...

    HTML5基础知识-HTML5多媒体标签.pptx

    HTML5是Web开发中的一个重要里程碑,它引入了许多新特性,其中多媒体标签的使用极大地丰富了网页内容的表现形式。本篇文章将深入探讨HTML5中的多媒体标签,包括音频和视频的处理,以及其他一些相关多媒体标签。 ...

    HTML5的多媒体

    首先,我们来看`&lt;audio&gt;`标签。这个标签用于在网页上嵌入...通过这些实践,你可以深入理解HTML5多媒体的使用,提高网页开发技能。同时,注意兼容不同浏览器的行为,因为并非所有浏览器都完全支持HTML5的所有特性。

    html5播放rtsp视频流.zip

    HTML5是一种强大的网页开发技术,它提供了许多增强用户体验的功能,包括多媒体元素的处理。然而,HTML5原生并不支持RTSP(Real Time Streaming Protocol)视频流的播放,这是专为实时音视频传输设计的一种协议。为了...

    实验4-HTML5的多媒体.docx

    本实验验证了HTML5多媒体技术的强大功能,我们可以使用HTML5的音频和视频标签来实现复杂的多媒体播放功能。通过本实验,我们可以更好地了解HTML5多媒体技术的应用和实现方法。 七、相关知识点 * HTML5音频标签 `...

    HTML5多媒体播放器Plyr.zip

    Plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体播放器。支持自定义的播放控制和 WebVTT 字幕。特性:可访问性 - 完全支持字幕和屏幕阅读器轻量级 - 压缩后只有 4.8Kb可定制 - 外观可以根据需要进行调整语义化 -...

    HTML5 Web多媒体开发大起底.pdf

    HTML5提供的多媒体处理能力是非常强大的。你可以采用、元素在页面上直接播放音视频,这是最简单的用法;你还可以采用MediaDevices和MediaStream等几个接口录制多媒体,或编辑媒体流,这是比较高级的用法;最高级的...

    html 网页多媒体

    #### 一、网页多媒体的崛起与意义 随着互联网技术的飞速发展,网页已经从最初的纯文本形式进化到包含丰富的多媒体元素,...在未来,随着HTML5标准的普及和多媒体技术的不断进步,网页多媒体的应用将更加广泛和深入。

    浅析HTML5在多媒体上的应用前景

    #### HTML5多媒体标签介绍 HTML5引入了两个非常重要的多媒体标签:`&lt;video&gt;`和`&lt;audio&gt;`。这两个标签的出现极大地简化了开发者在网页中嵌入音频和视频文件的操作流程,无需依赖任何第三方插件(如Flash),就能实现...

    Html5多媒体开发指南源代码

    这个"HTML5多媒体开发指南源代码"压缩包很可能是为了帮助开发者深入理解并实践HTML5中的多媒体元素和特性。 在HTML5中,多媒体主要包括音频、视频、图像以及canvas等元素,它们使得网页可以更生动、更富交互性。...

    html多媒体

    HTML5的引入极大地增强了HTML在多媒体方面的处理能力,使得开发者无需依赖浏览器插件即可实现丰富的媒体体验。 首先,HTML中处理多媒体的主要标签是`&lt;object&gt;`和`&lt;embed&gt;`。`&lt;embed&gt;`元素在HTML5中被正式标准化,它...

    HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码

    其中,HTML5的多媒体支持是其一大亮点,而M3U8(HLS,HTTP Live Streaming)则是苹果公司提出的一种流媒体传输协议,特别适用于网络带宽不稳定的情况。在本文中,我们将深入探讨如何使用HTML5来播放M3U8格式的视频,...

    html5播放器插件多媒体视频播放器代码

    HTML5的多媒体元素包括`&lt;audio&gt;`和`&lt;video&gt;`,它们为开发者提供了丰富的功能,如播放、暂停、快进、快退、音量控制等,同时也支持自定义用户界面。 在HTML5播放器中,核心部分是通过JavaScript来实现交互逻辑,以及...

    html5media文件,video兼容IE8视频播放

    HTML5 Media是一个重要的技术,它使得网页可以内嵌多媒体内容,如音频和视频。在HTML5之前,网页上的媒体播放通常依赖于插件,如Adobe Flash。然而,随着HTML5的普及,浏览器开始内置对HTML5 Media的支持,使得...

    jquery多媒体播放插件

    总结,"jquery多媒体播放插件"的实现涉及到HTML5多媒体元素的使用,结合jQuery进行事件处理、属性操作和用户界面设计。通过上述步骤,我们可以创建一个功能完备、交互友好的多媒体播放器,适用于各种Web应用。在实际...

    HTML5&CSS3网页制作:多媒体的格式.pptx

    在HTML5中,多媒体元素的使用得到了显著提升,使得网页可以更加丰富地展示视频和音频内容。HTML5引入了新的标签如`&lt;audio&gt;`和`&lt;video&gt;`,以原生支持多媒体,不再需要依赖Flash这样的插件。接下来,我们将详细讨论...

Global site tag (gtag.js) - Google Analytics