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

2020-03-24 17:58:09

字体：大中小

来源：转载

供稿：网友

HTML5 特性，包括原生音频和视频支持而无需 Flash。HTML5 audio 和 video 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源，包含 controls 属性让用户可以播放和暂停媒体。嵌入视频
下面是在 Web 页面中嵌入视频文件最简单的形式：XML/HTML Code复制内容到剪贴板
videosrc= foo.mp4 width= 300 height= 200 controls Yourbrowserdoesnotsupportthe video element. /video
目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是：Ogg：带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。
mpeg4：带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。
我们可以使用带有媒体类型和其他属性的 source 标签指定媒体文件。video 元素允许使用多个 source 元素，浏览器会使用第一个认可的格式：XML/HTML Code复制内容到剪贴板
body videowidth= 300 height= 200 controlsautoplay sourcesrc= /html5/foo.ogg type= video/ogg / sourcesrc= /html5/foo.mp4 type= video/mp4 / Yourbrowserdoesnotsupportthe video element. /video /body /html
Video 属性规范
HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能：

controls 如果指定这个属性，就允许用户控制视频播放，包括音量控制，快进，暂停或者恢复播放。
src 要嵌入的视频 URL。可选，可以在 video 块中使用 source 元素替代来指定要嵌入的视频。

嵌入音频
HTML5 支持的 audio 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。XML/HTML Code复制内容到剪贴板
audiosrc= foo.wav controlsautoplay Yourbrowserdoesnotsupportthe audio element. /audio
当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg，mp3 和 wav。我们可以使用带媒体类型以及其他属性的的 source 标签指定媒体。Audio 元素允许使用多个 source 元素，并且浏览器会使用第一个认可的格式：XML/HTML Code复制内容到剪贴板
audiocontrolsautoplay sourcesrc= /html5/audio.ogg type= audio/ogg / sourcesrc= /html5/audio.wav type= audio/wav / Yourbrowserdoesnotsupportthe audio element. /audio /body /html
Audio 属性规范HTML5 audio 标签可以使用多个属性来控制外观，感受以及各种控制功能：

controls 如果指定这个属性，表示允许用户控制音频播放，包括音量控制，快进以及暂停/恢复播放。
src 要嵌入的音频 URL。可选，可以在音频块里面使用 source 元素指定要嵌入的音频来替代。

处理媒体事件
HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能：

functionPlayVideo(){ varv=document.getElementsByTagName( video )[0]; v.play(); } /script /head html body form videowidth= 300 height= 200 src= /html5/foo.mp4 Yourbrowserdoesnotsupportthe video element. /video inputtype= button onclick= PlayVideo(); value= Play / /form /body /html
配置服务器媒体类型
大多数服务器默认都没使用正确的 MIME 类型提供 Ogg 或 mp4 媒体，因此我们可能需要添加适当的配置。
复制代码代码如下:AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：用HTML5制作烟火效果的教程

下一篇：总结html嵌套实例用法