当前位置:首页 > 开发 > Web前端 > Html5 > 正文

由html5视频播放引发的总结

发表于: 2013-10-14   作者:ayaoxinchao   来源:转载   浏览:
摘要: 前言   项目中存在视频播放的功能,前期设计是以flash播放器播放视频的。但是现在由于需要兼容苹果的设备,必须采用html5的方式来播放视频。我就出于兴趣对html5播放视频做了简单的了解,不了解不知道,水真是很深。本文所记录的知识一些浅尝辄止的知识,说起来很惭愧。   视频结构   本该直接介绍html5的<video>的,但鉴于本人对视频

前言

 

项目中存在视频播放的功能,前期设计是以flash播放器播放视频的。但是现在由于需要兼容苹果的设备,必须采用html5的方式来播放视频。我就出于兴趣对html5播放视频做了简单的了解,不了解不知道,水真是很深。本文所记录的知识一些浅尝辄止的知识,说起来很惭愧。

 

视频结构

 

本该直接介绍html5的<video>的,但鉴于本人对视频结构的模糊,先简单了解一下:

 

通常我们会以为视频文件就是“AVI文件”、“MP4文件”等,但事实上,“AVI”和“MP4”只是容器的格式。视频容器格式只决定怎么在一个文件中存储视频和音频流,至于存储什么样的内容,与其没有关系,我们可以拿ZIP压缩文件来与之类比。

 

在视频的制作和播放过程中,会涉及到视频编解码器和音频编解码器。这些编解码器都很多,这里只列举相关的。

视频编解码器:H264、Theora和VP8

音频编解码器:MP3、AAC和Vorbis

在我们观看视频时,视频播放器主要做了如下工作:

①解析容器格式以找出可以使用的视频和音频轨道,并分析出它们的存储结构,以便接下来的解码工作。

②对视频流解码,并在屏幕上显示一幅幅的图像。

③对音频流解码,同时给扬声器传输声音信号。

 

为此,我们便对视频的结构有了一个基本的了解,以便于下面说明html5的<video>标签目前的支持情况。

 

html5的<video>

 

html5定义了<video>标签,用于在网页中嵌入视频。示例如下:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

 

令人遗憾的是,并不是所有的浏览器都支持或者说是都完全支持<video>标签。主流浏览器的支持情况见下表:

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox

NO(Firefox 21 running on Windows 7,Windows 8,

Windows Vista,and Android now supports MP4)

YES YES
Safari YES NO NO
Opera NO YES YES

MP4 = H264视频编码和AAC音频编码

WebM = VP8视频编码和Vorbis音频编码

Ogg = Theora视频编码和Vorbis音频编码

 

检测您使用的浏览器是否支持html5的<video>,请调用如下javascript代码:

function supports_video() {
    return !!document.createElement('video').canPlayType;
}

 

检测对于视频格式的支持,请调用如下代码:

function supports_h264_video() {
    if (!supports_video()) return false;
    var v = document.createElement('video');
    return canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

 

 

由html5视频播放引发的总结

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
关键词:html5 nativeapp webapp mp4 H.264 html5没学习之前总觉的很神秘。近期通过学习和研究html5
html5播放视频是使用的<video></video>标签: 例: <videowidth="640" height="400"
由 Android WebKit html5 引发的联想 转载请注明出处:http://blog.csdn.net/lihui130135 作者:李
HTML5增加了vedio标签,能直接播放视频,但是播放的格式是有限的。 这里将IPCamera的视频转换OGG格
在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Fla
视频实现: 音乐实现: 实现代码: 视频--由于浏览器对html5支持力度不同,比较好的是谷歌,和我的i
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案。因此我就在这
在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Fla
在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Fla
现象:插入如下代码后仍然无法看 视频(注:视频已确认为 浏览器支持格式) < video controls ="
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号