HTML5视频的注意事项

在这个有关视频的快速技巧里,我们将探讨如何在项目中使用 HTML5 video 标签。由于旧的浏览器和 Internet Explorer 不支持 <video> 元素,我们必须为这些浏览器找到一个支持 Flash 文件的解决方案。

不幸的是,和 HTML5 音频一样,涉及到视频的文件格式,Firefox 和 Safari/Chrome 的支持方式并不相同。因此,如果你想在这个时候使用 HTML5 视频,则需要创建三个视频版本。

.OGG

Firefox 能良好支持这种格式。你可以使用 VLC (媒体 -> 串流/保存) 实现视频的轻松转换。

.MP4

许多屏幕录制工具支持 MP4 格式的自动导出,你可以使用它们为 Safari 和 Chrome 浏览器生成指定格式的视频。

.FLV/.SWF

并非所有浏览器都支持 HTML5 视频,当然,考虑到兼容性,请确保添加一个退而求其次的 Flash 版本。

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
</head>
<body>
<video controls width="500">
<!-- if Firefox -->
<source src="video.ogg" type="video/ogg" />
<!-- if Safari/Chrome-->
<source src="video.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->
<embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
</body>
</html>

一些 <video> 元素的可选参数:

controls: 布尔值,显示 play/stop 按钮;
poster: 在视频播放之前所显示的图片的 URL;
autoplay: 布尔值,页面加载完成后自动播放视频;
width: 视频所需的宽度。默认情况下,浏览器会自动检测所提供的视频尺寸;
height: 视频所需高度;
src: 视频文件的路径,使用子元素 <source> 实现更好。

HTML5 视频的注意事项

1、需创建三种视频格式以实现对 Firefox,Safari/Chrome 和 IE 的支持;
2、不要省略任何一种格式。不能将 HTML5 如你所想的那样兼容 Firefox 和 Safari,Safari 能解释 <video> 标签,会期望加载合适的文件,如果省略某种格式,会导致播放器空白;
3、记住全屏显示不被 Safari 和 Chrome 所支持。然而,在 Firefox 3.6 版本中,你可以全屏浏览。
4、要明白 IE 加载 Flash 文件的原因,是因为 IE 不能解释 <video> 元素。然而,如果浏览器支持,则会期望加载合适的文件。

英文原稿:Quick Tip: HTML5 Video with a Fallback to Flash Nettus+

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索html5
, 文件
, 视频
, 浏览器
, vlc
, 字符串流
, 格式
, html5视频
, 支持
, 视频html5
, html5视频asp.net
, 视频图片html
html5视频播放器
html5注意事项、html注意事项、html 打印 注意事项、女士开车注意事项视频、新手开车注意事项视频,以便于您获取更多的相关知识。

时间: 2024-11-01 13:20:18

HTML5视频的注意事项的相关文章

傲游浏览器3开始支持HTML5视频

  今天傲游浏览器3.0迎来Beta后首轮更新,为用户带来多项大幅更新.其中包括用户期待已久的头像回归,XP下的新用户界面等.最抢眼的就是加入了两项对HTML5特性的支持. 新版的界面中,傲游账户的头像回到了浏览器左上角,并且在菜单的关键项目前加上了醒目图标,使傲游3的界面变得生机勃勃.同时,在WindowsXP系统下启用了新的浏览器界面,抛弃了美观度不佳的系统边框,新界面更加精美易用.对比图如下,看看是不是变漂亮了很多?傲游表示,对于界面的完善工作还在继续,目前的界面尚不是最终样式. 图1 W

最大化兼容 html5 视频

HTML5 在 web 页面使用 video 元素呈现视频.但 HTML5 视频并不是最终的解决方案,它不能在所有的浏览器工作.你知道 HTML5 视频真的在网上工作吗? 你担心 HMTL5 视频兼容性吗? 看看这篇文章的建议和解决方案如何最大化 HMTL5 视频兼容性. 正如我们所知, web 页面上显示一个视频或电影是没有行业标准的.除了浏览器自身,大多数网站显示视频通过浏览器插件,比如 Flash player. HTML5 包含一个 video 元素将视频嵌入到web页面.W3C因此引入

如何检测您的浏览器是否支持HTML5视频

如何检测您的浏览器是否支持HTML5视频,看下面代码: function checkVideo() { if(!!document.createElement('video').canPlayType){ var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest){ h264T

node js-Node.js HTML5视频IOS不播放问题

问题描述 Node.js HTML5视频IOS不播放问题 用node做个简单的本地服务器,可以播放html video,在桌面浏览器以及安卓设备中匀可以 正常播放视频,在ios中无法播放 *注:我使用php的服务器中却可以在ios上播放 以下为ios截图: 解决方案 是不是你的视频格式不支持ios的浏览器

html5 视频在iphone手机上如何能不自动全屏

问题描述 html5 视频在iphone手机上如何能不自动全屏 html5 video视频标签在手机iphone浏览器中 会自动全屏打开 请问有什么方式能让他不全屏么 在网页中该展示多大就是多大的 解决方案 瞎逛逛,看空间有没有好东西

网站HTML5视频问题汇总

最近一直在处理HTML5视频相关的问题,以下是一些和各个视频网站与HTML5 Video相关的问题(不是针对Flash视频): 优酷在清晰度切换时的事件处理不当 优酷在视频下面的清晰度切换时,在JavaScript中会重新呼叫this.video.load()加载视频,但问题在于video的abor和errort处理函数会在WebKit内核的浏览器中造成递归调用.因为出错后,又再次尝试进行加载,如此反复不止. onAbort: function () { var currentTime = th

html5视频video与声频audio详解

html5视频video与声频audio详解      在html5中出现了一些新特性: canvas 元素 视频 video 和 声频audio 元素 : 对本地离线存储(localstorage,sessionstorage)的支持 : 新增特殊内容元素:article.footer.header.nav.section : 新增表单控件: calendar.date.time.email.url.search .     今天看看视频和声频:在html5中规定了视频的标准方法:video

无线视频监控工程六大事项详解

本文小编为大家讲解的是无线视频监控工程六大事项详解,应用无线视频监控的工程难免让人有所顾虑,其应用上的"劣势",倒不全是设备价钱.安装成本或线路费用等资金投入方面的问题,仍有很多需要在工程上特别注意的问题,现归纳如下: 网络安全问题:由于无线视频监控系统可能涉及公共隐私和社会安全等内容,系统安全尤其重要.而无线网络以微波为传输介质,易被他人窃取,影响整个系统安全. 使用运营商专线问题:国内三大移动系统运营商针对行业用户开辟了3G无线专网,分为APN专网.VPDN专网.也有采专用账号的光

HTML5视频(&amp;lt;video&amp;gt;)、音频(&amp;lt;audio&amp;gt;)标签小试

今天小试了HTML5里面的两个新标签,<video>..</video>,<audio></audio> 具体例子如下: <video src="1.wmv" controls="true">您的浏览器不支持 video 标签.</video> <audio src="1.wav" controls="true">您的浏览器不支持 audio