使用HTML5在网页上嵌入音频和视频回放的基本方法

使用HTML5在网页上嵌入音频和视频回放的基本方法
HTML5功能,包括本地音频视频支持,不需要Flash。

HTML5和标记使我们更容易向站点添加媒体。我们只需要设置SRC属性来标识媒体资源,包括控件属性,允许用户播放和暂停媒体。

嵌入式视频
以下是在Web页面中嵌入视频文件的最简单形式:

xml代码将内容复制到剪贴板。
您的浏览器不支持该元素。
HTML5规范的当前草案没有指定浏览器应该在视频标签中支持哪种视频格式,但最常用的视频格式是:

OGG:一个thedora视频编码器和编码器Ogg Vorbis音频文件。
MPEG4:与H.264视频编码器和AAC音频编码的MPEG4文件。
我们可以指定带有媒体类型和其他属性的标签的媒体文件。视频元素允许使用多个源元素,浏览器将使用第一个批准的格式:

xml代码将内容复制到剪贴板。
您的浏览器不支持该元素。

视频属性规范
HTML5视频标签可以使用多个属性来控制外观和感官以及各种控制功能:

属性
描述
自动播放
如果指定了这个布尔属性,只要它不停止加载数据,视频就会自动播放。
自动缓冲
如果指定了这个布尔属性,即使没有自动设置,视频也会自动开始缓冲。
控制
如果指定此属性,则允许用户控制视频播放,包括音量控制、快进、暂停或恢复播放。
高度
此属性以CSS像素的形式指定视频显示区域的高度。

如果指定了此布尔属性,则在播放结束后允许自动播放。
预紧力
指定此属性,当加载页面时,视频将被加载并准备好。如果指定的自动播放被忽略。
海报
这是一个图像URL,显示用户播放或快进。
SRC
可以嵌入的视频URL。也可以使用视频块中的元素替换来指定要嵌入的视频。
宽度
此属性指定CSS像素格式的视频显示区域的宽度。

嵌入式音频
HTML5支持的标记用于在HTML或XHTML文档中嵌入语音内容,如下所示。
xml代码将内容复制到剪贴板。
您的浏览器不支持该元素。
当前HTML规范草案不指定音频格式应在音频标签支持的浏览器,但最常用的音频格式OGG,MP3和WAV。

我们可以使用带有媒体类型和其他属性的标签来指定媒体。音频元素允许使用多个源元素,浏览器将使用第一个批准格式:

xml代码将内容复制到剪贴板。
您的浏览器不支持该元素。

音频属性规范

HTML5音频标签可以使用多个属性来控制外观、感觉和各种控制功能:

属性
描述
自动播放
如果指定了这个布尔属性,只要数据不停止,音频将自动播放。
自动缓冲
如果指定了这个布尔属性,即使没有自动设置,音频也会自动开始缓冲。
控制
如果指定此属性,则允许用户控制音频回放,包括音量控制、快进和暂停恢复播放。

如果这个布尔值属性是指定的,它表明,音频播放可以自动重放的音频播放结束后。
预紧力
此属性指定在加载页面时加载并准备音频。如果指定的自动播放被忽略。
SRC
可以嵌入的音频URL。也可以使用音频块中的元素替换要嵌入的音频。

处理媒体事件
HTML5音频和视频标签可以使用多个属性使用Javascript控制各种控制功能。

事件
描述
中止
该事件是在游戏中止时生成的。

有足够的数据,媒体可以播放事件。
结束了
该事件是在游戏完成后生成的。
误差
此事件是在发生错误时生成的。
loadeddata
此事件是在加载第一个媒体帧时生成的。
负载启
此事件是在媒体启动时生成的。
暂停
该事件是在播放暂停时生成的。

该事件是在播放开始或恢复时生成的。
进步
该事件是在媒体定期了解下载进度时生成的。
播放
该事件是在播放速度发生变化时生成的。
寻求
此事件是在快进操作完成时生成的。
寻求
此事件是在快速向前操作开始时生成的。
暂停
此事件是在媒体负载暂停时生成的。
体积变化
事件是在音频音量改变时生成的。
等待
请求操作(如回放)被延迟,等待另一个操作完成(如快进)来生成此事件。

下面是允许播放给定视频的示例。
xml代码将内容复制到剪贴板。
功能视频(){
var v = document.getelementsbytagname(视频){ 0 };
V.play();
}

您的浏览器不支持该元素。

配置服务器媒体类型
大多数服务器不使用正确的MIME类型为OGG或MP4媒体默认情况下,所以我们可能需要添加相应的配置。
复制代码代码如下:音频/ ogg.oga AddType
音频/ wav.wav AddType
视频/ ogg.ogv.ogg AddType
视频/ mp4.mp4 AddType
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部