文章引用地址:
http://www.iefans.net/html5-qianru-shipin/ 作者:iefans
<video>标记
HTML5 在嵌入视频时本质上归结为使用一个标记:<video>。但正如其他 HTML 标记一样,有很多参数选项。以下是标记本身中的一些要点:
src:视频源的位置和名称,它的工作原理与 <img> 标记的 src 参数相同。但是要注意,在这里不是识别视频源,您可以并且也应该在标记外部识别(参见下文)。
<video id="sampleMovie" src="HTML5Sample.mov"></video>
width和height:(可选)视频的尺寸。更准确地说,这是视频帧宽度和高度,而不是视频本身。与 <img> 相似,省去此选项将导致浏览器使用视频源的默认尺寸。但是与 <img> 不同的是,使用与源不同的大小将缩放视频,而不是扭曲它。换句话说,嵌入的视频将保留其源的比率。如果您指定的大小小于源,整个视频将会缩小。但是,如果您指定的大小大于源,视频将以其原始大小显示,所指定尺寸的其余部分将使用空白区域填充。
<video id="sampleMovie" src="HTML5Sample.mov" width=”640” height=”360”></video>
controls:添加默认视频控件覆盖。如果您不想创建自己的自定义控件,这是非常有用的。但是,如果想深入研究自定义播放器控件,可以使用 JavaScript 和 CSS。该规范允许操作 play ()、pause()、currentTime、volume、muted 等方法和属性。
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
preload:只要用户点击页面就开始下载视频。要指示预加载视频,只需包括该属性。要指示其不预加载,将该属性设置为等于"none"。
<video id="sampleMovie" src="HTML5Sample.mov" preload></video>
<video id="sampleMovie" src="HTML5Sample.mov" preload=”none”></video>
autoplay:流氓参数。该参数指示浏览器加载页面时就播放视频。不要使用它。
<video id="sampleMovie" src="HTML5Sample.mov" autoplay></video>
接下来是见证奇迹的时刻。HTML5 规范包括一个方便的古怪功能,可以弥补当前围绕视频格式所发生的浏览器功能障碍。不使用 src 属性指定视频源,您可以在<video> 标记中嵌套多个标记,每个都有不同的视频源。浏览器将自动浏览列表并选择第一个能够播放的视频。例如:
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>
如果在 Chrome 中测试该代码,将获得 H.264 视频。但是在 Firefox 中运行它,会在相同的地方看到 Ogg 视频。
理想情况下,虽然不是所有浏览器都绝对需要,您应该在 type 参数中包括 MIME 类型,确保与所有的浏览器兼容。此参数应指定视频类型,以及视频和音频编解码器。参数的细节取决于视频的编码方式。在这里可以找到很多可能的方案:http://wiki.whatwg.org/wiki/Video_type_parameters。
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
有关正在使用的所有三种视频类型的示例,请访问我的站点。
在此页面上,您会看到三个不同视频的源代码:H.264、Ogg 和 WebPM。视频本身标有它们的编解码器,以便您查看浏览器中显示的内容。
关于 MIME 类型的一个小窍门:您的服务器需要配置为可识别各种类型。对于 Windows Server,这意味着将不同的 MIME 类型项添加到 IIS。对于 Apache 服务器,您需要将 AddType 指令添加到 httpd.conf 或本地 .htaccess 文件中:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
优雅降级
虽然完整的多源 <video> 标记可在多个 HTML5 就绪的浏览器上工作,但它仍然没有解决旧的、HTML5 之前的浏览器问题。幸运的是,该规范包括一个向下兼容机制。
将目前正在使用的任何<object> 标记,或者将使用的 HTML5 之前的标记,添加到 <source> 参数列表的底部。通常情况下,此对象将指定您使用的播放器(假定是第三方插件),以及该播放器的参数和源。下例使用流行的免费第三方播放器 Flowplayer。
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value='config={"clip":{"url":"HTML5Sample_flv.flv","autoPlay":false,"autoBuffering":true}}' />
</object>
</video>
分享到:
相关推荐
web嵌入vlc 浏览器版本 ff小于52 chrome小于46 ie需要自己检测一下
(jsp html)网页上嵌入播放器(常用播放器代码整理).docx
主要介绍了使用HTML5在网页中嵌入音频和视频播放的基本方法, 和 标签的使用非常方便,而且使网页视频不再依赖频繁出错的Flash播放器,需要的朋友可以参考下
HTML录音播放器代码,很好使用的,直接嵌入HTML代码即可使用。
Sewise Player使用非常简单,只要在页面对应的DIV内嵌入一个JS文件即可,播放器将通过自动识别浏览器的功能来启用HTML5或flash模式播放视频。您不需要掌握任何JavaScript或ActionScript编码技术就可以制作出专业的...
html5-youtube.js, 像HTML5视频API一样的YouTube播放器API包装器 注:" youtube.js"已经被重命名为"html5-youtube 。js"。 html5-youtube.js像HTML5视频API一样的YouTube播放器API包装器。的播放器API参考嵌入- ...
HTML5,webplayer 能够嵌入到任何网页的播放器。
Videojs插件功能将MP4视频文件嵌入到帖子/页面或WordPress网站上的任何位置从移动设备观看时,嵌入响应式视频以提供更好的用户体验嵌入与所有主要浏览器兼容HTML5视频嵌入带有海报图像的视频使用videojs播放器嵌入...
使用场景及目标: 目标是提供一个易于嵌入的音乐播放器,能够在各种场景下使用,如个人博客、音乐网站、在线教育平台等,增强用户体验和网站功能。 其他说明: 该播放器支持常见的音频格式,具有播放列表功能,用户...
网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助
这是一款基于HTML5的视频播放器,不过你一眼看上去,它并不像一款...不过它的特色就是把HTML5视频播放器嵌入到卡片里面,然后这些卡片可以和用户互动,并产生HTML5 3D的效果,非常不错的创意。点击卡片即可播放视频。
下载后,你可以得到一个例子,当用文本或HTML编辑器打开的时候,你可以发现swf是用一段短小的javascript嵌入到页面上的。这个Javascript是Geoff Stearns写的swfobject.js,它解决了Flash需要激活的麻烦。 拿过来解压...
police_car_light:关于HTML5 Podcast的好处Podlove Web Player是经过Podcast优化的基于HTML5的视频和音频播放器。 它可以用作WordPress插件,也可以在静态HTML / JavaScript上下文中使用。 Podlove Web Player几乎...
HTML5-音乐播放器使用 HTML5 和纯 javascript 的轻量级音乐播放器我正在尝试实现一个轻量级但易于定制和嵌入的音乐播放器。 它针对需要易于安装的播放器的网站,可以适应网站的设计,并且能够在没有 Flash 播放器或 ...
HTML canvas视频播放器在iPhone上内联播放视频的简单方法简单的普通JavaScript类,用于在画布上播放视频。 IE9 +和现代浏览器,但仅适用于iPhone。 如果您正在使用此播放器,请告诉我,我想做一个小型展示柜,谢谢!...
第2步 你需要嵌入到您的网页播放器。您可以复制并粘贴flashmp3player.html或从这里的代码。 注:您可以更改以下代码文件的位置。路径可以是相对或绝对的(除了MP3文件夹,这应该永远是相对于PHP脚本)。 新增这与你...
Video.js是一个通用的在网页上嵌入HTML5视频播放器的JS库,支持字幕、全屏、音量控制等常用功能,易于扩展,使用方便,Video.js自动检测浏览器对HTML5的支持情况,如果不支持HTML5则自动使用Flash播放器。...
flv播放器,内附如何嵌入HTML中使用说明,如何配置。