HTML5 视频(一)
2016-09-13 17:47
288 查看
HTML5 提供了展示视频的标准
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
一、如何在html5中显示视频
视频格式有限制:目前支持这三种格式
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
.ogg格式文件,适用于firefox、opera以及chrome浏览器。
确保Safari浏览器,视频格式必须是MPEG4格式。
在<source>写了两个,浏览器将使用第一个可识别的格式,如果都不识别的话,就只能显示”Your browser does not support the video tag.“
注意:Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。
附录:1、在Hbuilder中的文件样式
2、在chrome中测试
3、在IE9中测试
4、在IE8中的情况
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
一、如何在html5中显示视频
视频格式有限制:目前支持这三种格式
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <video width="320" height="240" controls="controls"> <source src="img/mov_bbb.ogg" type="video/ogg"> <source src="img/mov_bbb.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>
.ogg格式文件,适用于firefox、opera以及chrome浏览器。
确保Safari浏览器,视频格式必须是MPEG4格式。
在<source>写了两个,浏览器将使用第一个可识别的格式,如果都不识别的话,就只能显示”Your browser does not support the video tag.“
注意:Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。
附录:1、在Hbuilder中的文件样式
2、在chrome中测试
3、在IE9中测试
4、在IE8中的情况
相关文章推荐
- HTML5视频标签video
- 移动端HTML5音频与视频问题及解决方案
- 浅谈ASP.NET 4中构造“.NET研究”HTML5视频控件
- L03HTML5学习视频CSS3基础
- 几款免费的支持HTML5的音频视频转换软件推荐
- HTML5网络视频之webm尝鲜
- HTML5 audio与video标签实现视频播放,音频播放
- html5---音频视频播放
- HTML5学习之视频和音频
- Html5 播放视频
- html5 + websocket_rtsp_proxy 实现视频流直播
- HTML5 vedio标签与canvas的结合实现视频同步模糊效果
- HTML5 Video与Audio 视频与音频
- transform实现HTML5 video标签视频比例拉伸实例详解
- HTML5视频字幕与WebVTT
- 使用 WebSockets 进行 HTML5 视频直播
- Android如何让WebView中的HTML5页面实现视频全屏播放
- html5 video视频标签自适应手机样式
- 写了个html5播放视频的video控件,只支持mp4和3gp(android和ios默认支持的格式就写了这个)
- html5中的视频格式