html5的视频和音频

HTML5 规定了一种通过 <video> 元素来包含视频的标准方法。

HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。

接下来看一段代码,对就是这么简单,html5的视频、音频的实现就是以下两段html5标记语言。(将它放在你的<html></html>元素中就可以看到效果,另视频、音频内容自行添加。)

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 元素。</video>
<audio controls>
    <source src="music.ogg" >
    <source src="music.mp3" >
    您的浏览器不支持HTML5 audio 元素。</audio>


video视频元素:

<video> 元素提供了 播放、暂停和音量控件来控制视频。

同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

<video> 元素支持三种视频格式:MP4、WebM、Ogg。



audio音频元素:

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件。

<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg。



接下来再看一段html5标记语言:

<video width="320" height="240" controls src="movie.mp4" type="video/mp4">您的浏览器不支持 HTML5 video 元素。</video><audio controls src="music.mp3">您的浏览器不支持HTML5 audio 元素。</audio>

这样写也是可以实现视频、音频效果的,不过这样写的局限性就体现出来了,src属性只能引入一个文件格式。因为不同的浏览器厂商使用的视频、音频编解码器是不一样的,如果我们只定义了一种视频、音频格式,是不是在某些浏览器中就识别不出来,那么<source> 元素就是来解决这个问题的。使用<source> 元素来引入多个同一视频、音频的不同格式,这样就能保证在不同的浏览器中都能被识别。浏览器将使用第一个可识别的格式。


HTML5 Audio/Video 属性(媒体元素)



下边引入一个视频容器的概念:

<video>、<audio>都是一组数据的容器,里边类似于压缩了一组文件(包括音频轨道、视频轨道、元数据:封面、标题、字母等,格式:.avi、.flv、.mp4、.mkv、.ogv等)。这些文件是很大的,就比如页面在加载一张比较大的图片的时候可能也得花上几秒钟,更何况是音频、视频文件呢!如果没有经过任何处理的话,音频、视频的加载时间就不是这么简单了。

其实,在我们的浏览器中内嵌了一个音频、视频的编解码器,它的作用就是把原始的非常大视频容器,添加时编码,播放时解码。

  • 视频编解码器
    H.264 、 VP8 、 OggTheora
  • 音频编解码器
    AAC 、 MPEG-3 、 OggVorbis
时间: 2024-11-08 11:05:06

html5的视频和音频的相关文章

借用HTML5 插入视频。音频

HTML5 规定了一种通过 video 元素来包含视频的标准方法. 插入视频 <video width="320" height="240" controls="controls"> <source src="media/paddle-steamer.webn" type="video/webn"> <source src="media/paddle-steamer.

HTML5(简介、视频、音频、画布)

HTML5(简介.视频.音频.画布) HTML5目标是替换1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到匹配当代的网络需求.HTML5将成为HTML\XHTML\HTML DOM的新标准. 广义论及HTML5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA),例如

The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQueryplugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio an

HTML5学习之视频与音频(三)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <!-- 当

Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放

一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> 如果需要支持IE8,这个js可以自动生成flash

HTML5(二)音频视频画布

HTML5 Audio(音频) 定义和用法 <audio src="someaudio.wav" controls="controls"> 您的浏览器不支持 audio 标签. </audio> 提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息. 音频格式的MIME类型 Format MIME-type MP3 audio/mpeg Ogg audio/ogg Wav audio/wav 属性 属性

HTML5_02之视频、音频、Canvas

1.HTML5新特性之视频播放--video: ①例:<video src=""></video> ②video标签默认为300*150的inline-block: ③成员属性:  autoplay:是否自动播放:  controls:是否显示播放控件:  currentTime:当前播放到的时间:  duration:总时长:  defaultMuted:默认是否静音:  loop:是否自动循环播放:  muted:当前是否静音:  paused:当前是否处于

HTML5之视频功能

HTML5之视频功能 1.Web上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 2.视频格式 当前,video 元素支持三种视频格式: 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM

libavcodec是一款LGPL自由软件编解码库,用于视频和音频数据的编解码工作

http://zh.wikipedia.org/zh-cn/Libavcodec http://baike.baidu.com/view/856526.htm libavcodec是一款LGPL自由软件编解码库,用于视频和音频数据的编解码工作.带有这个名字的库有FFmpeg项目和Libav项目,但是它们却彼此不兼容. libavcodec是个集成了许多开源多媒体应用和框架.常见的MPlayer.xine和VLC媒体播放器都使用它作为它们的主要内置解码引擎,用于许多音频视频格式在所有支持的平台上的