跨浏览器兼容的内联视频解决方案

Question

我的公司开始制作大量在线教程/培训视频,这些视频将在网页上内嵌显示.我们需要一个简单的跨浏览器解决方案,可以容纳大多数用户进行内联查看.

我读过的一个解决方案(不是很简单)是为每个视频创建一个flash,mp4和avi版本,并让一个javascript插件确定哪个浏览器效果最好.

Answer 1

我已经尝试过在所有浏览器中播放视频.最好的方法是设置一个带闪存后备的html5视频标签.这实际上不需要任何javascript工作.本网站:http://camendesign.com/code/video_for_everybody对如何执行此操作给出了很好的解释.

你想要设置一些基本上是这样的东西:

<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
    <!-- fallback to Flash: -->
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
        <!-- fallback image. note the title field below, put the title of the video there -->
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
             title="No video playback capabilities, please download the video below" />
    </object>
</video>

视频标记是一个html5标记,可用于在现代浏览器上显示视频文件.但是,您需要几种不同的格式才能在每种格式中正确显示它.例如,Firefox仅采用webm和ogg格式,而Safari仅采用h264和mp4格式.这是一篇很棒的文章:http://diveintohtml5.ep.io/video.html.您可以下载一个简单的转换软件,将您的视频转换为所有这些格式,请访问:http://www.mirovideoconverter.com/.其他浏览器(尤其是IE)不会使用html5视频标记,因此您必须包含一种Flash格式,如果它不知道如何处理视频标记,它将自动重新开启.

最后,由于缺乏兼容的标准,您必须为您的一个视频文件创建至少3-4种不同格式才能使其在浏览器和平台(iOS移动)上运行.确保您的服务器为这些格式使用正确的mime类型也很重要.它很糟糕,但现在这是唯一的方法.

Answer 2

如需商业解决方案，请访问http://www.sublimevideo.net/

免费查看http://www.videojs.com/