HTML视频播放解决方案?

时间:2013-01-27 03:27:08

标签: javascript html video browser html5-video

我想创建一个能够播放这些视频文件的视频播放器:

     'mpg':
     'mov': 
     'wmv':
     'rm':
     '3g2':
     '3gp':
     'm4v':
     'mp4':
     'asf':
     'asx':
     'avi':
     'flv':
     'srt':
     'swf':
     'vob':

视频将用于在线考试,因为有些问题可能需要观看视频以获取信息。该视频需要适用于所有主流浏览器。能够在计算机或ipad上工作。

我的问题是,创建HTML视频播放器的最佳方法是什么?

我是否选择HTML5 +对象+嵌入方法(示例):

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>

要包含其他文件类型,我是否只包含更多<embed>标记以支持这些文件?

或者是使用Youtube播放器的最佳方式:

IFRAME:

<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

OR

SHOCKWAVE:

<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>

我在SO上也看到了这个例子,但不确定它是否适合使用:

<object id='tempVid1' name="emQTPlayer" height="240px"
                    width="320px" style="behavior: url(#BinaryBehaviorID)"
                    codebase="http://www.apple.com/qtactivex/qtplugin.cab"
                    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
                    <param name="autoplay" value="false" />
                    <param name="src"
                        value="" />
                    <param name="controller" value="true" />
                    <param name="type" value="video/quicktime" />
                    <param name="align" value="bottom" />
                    <param name="border" value="0" />
                    <param name="scale" value="tofit" />
                    <%--                                    <param name="wmode" value="transparent">--%>
                    <param name="showcontrols" value="true">
                    <embed id='tempVid2' name="emQTPlayer" type="video/quicktime"
                        autoplay="false" height="auto" width="auto" align="top"
                        border="0" controller="true" postdomevents="true"
                        pluginspage="http://www.apple.com/quicktime/download/"
                        showcontrols="true" scale="tofit"
                        src='' />
                </object>

此处有更多信息:http://www.w3schools.com/html/html_videos.asp

1 个答案:

答案 0 :(得分:2)

列表中的大多数格式都不适用于所有平台。有些将需要仅在特定平台上可用的插件。

你需要转换为h.264 mp4文件+另一个(ogg或webm,除非你可以使用flash播放mp4文件)。

您可以自己执行此操作,或使用Zencoder之类的内容为您执行此操作。