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.videojs.com/

如何实施：

头：

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

体：

<div class="vid">
    <video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="640px" height="264px"
        poster="../../Content/YourInitialPicture.jpg">
        <source src="../../Content/YourVideo.mp4" type='video/mp4'/> <!-- IE / Safari -->
        <source src="../../Content/YourVideo.webm" type='video/webm'/> <!-- Mozilla FF --> 
        <source src="../../Content/YourVideo.ogg" type='video/ogg'/> <!-- Chrome / Opera --> 
        <track kind="captions" src="../../Content/YourVideoCaption.vtt" srclang="en" label="English" />
    </video>
    <script>
        var myPlayer = _V_("vid01");
    </script>
</div>

将以上代码复制/粘贴到<body></body>并将视频的路径添加到src="../../"

.mp4（Safari和IE可以播放此类视频）
.webm（Mozilla可以播放此类视频）
.ogg（Theora视频）

您可以将这些免费的传感器用于您的视频。

Free Video Converter（这个传感器很容易使用..我个人更喜欢这个。）
Free WebM Video Converter

这很简单！

Answer 3

对于商业解决方案，请查看http://www.sublimevideo.net/

免费退房http://www.videojs.com/

Answer 4

你检查过任何JQuery插件吗？那里有很多，跨浏览器工作得很好。您可以查看http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Answer 5

什么对我有用：我已将视频上传到YouTube，然后将其下载为MP4，它似乎适用于具有video标记的浏览器。

Answer 6

我已经研究了很长一段时间了，我正在努力做同样的事情，所以希望这会帮助别人。我一直在使用crossbrowsertesting.com并在几乎所有人类已知的浏览器中对其进行测试。我目前使用的解决方案适用于Opera，Chrome，Firefox 3.5 +，IE8 +，iPhone 3GS，iPhone 4，iPhone 4s，iPhone 5，iPhone 5s，iPad 1 +，Android 2.3 +，Windows Phone 8。

动态更改来源

动态更改视频非常困难，使用Flash后备版时，您必须从DOM /页面中删除视频并重新添加，以便Flash更新，因为Flash无法识别Flash变量的动态更新。如果您要使用JavaScript动态更改它，我会完全删除所有<source>元素，只需使用canPlayType设置JavaScript中的src和break或{ {1}}在第一个支持的视频类型之后，不要忘记动态更新flash var mp4。此外，除非您致电return，否则某些浏览器不会注册您更改了来源。我相信您遇到的video.load()问题可以通过先致电.load()来解决。删除和添加视频元素会降低浏览器的速度，因为它会继续缓存已移除的视频，但there's a workaround。

跨浏览器支持

就实际的跨浏览器部分而言，我也到了Video For Everybody。我已经尝试过MediaelementJS Wordpress插件，结果导致了比解决更多的问题。我怀疑这些问题是由Wordpress插件引起的，而不是实际的库。我试图找到一些没有JavaScript的东西，如果可能的话。到目前为止，我提出的是这个简单的HTML：

video.pause()

重要提示：

结束将ogg作为第一个<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> <source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" /> <source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" /> <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" /> <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" /> </object> <strong>Download video:</strong> <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a> </video>，因为如果Mac OS Firefox遇到MP4作为第一个<source>，则会退出尝试播放视频。
正确的MIME类型是重要的 .ogv 文件应该是<source>，不是 video/ogg
如果你有高清视频，我发现的高清质量OGG文件的最佳转码器是Firefogg
video/ogv文件适用于iPhone 4+，仅播放带有H.264 Baseline 3视频和AAC音频的MPEG-4视频。我找到的最好的代码转换器是Handbrake，使用 iPhone＆amp; iPod Touch 预设适用于iPhone 4+，但为了让iPhone 3GS正常工作，您需要使用分辨率低得多的 iPod 预设，我添加.iphone.mp4。
将来我们可以使用video.iphone3g.mp4元素上的media属性来定位带有媒体查询的移动设备，但现在较旧的Apple和Android设备不能很好地支持它够了。

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

6 个答案: