logo标签列表

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

htmlvideocross-browser
6

我的公司正在推出大量在线教程/培训视频，这些视频将嵌入网页中进行显示。我们需要一个简单的跨浏览器解决方案，以适应大多数用户进行内联查看。

我读到的一个解决方案（并不是很简单），是创建每个视频的flash、mp4和avi版本，并让javascript插件确定哪个适合浏览器最佳。

未来的HTML5中是否有一种视频格式是标准的？ - Eric Di Bari
1
如果苹果公司支持WebM格式，那么很可能在不久的将来会出现这种情况，因为我相信IE9现在已经支持WebM，但是他们很难这样做，因为他们与专有的H264格式紧密相关。 - Paul Graffam
6个回答
10

我曾经尝试过让视频在所有浏览器中播放。最好的方法是使用HTML5视频标签并设置Flash回退。这实际上不需要任何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格式，如果浏览器不知道如何处理视频标签，它会自动回退到Flash格式。
最终，你将需要创建至少3-4种不同格式的视频文件，以便跨浏览器和平台（iOS移动设备）正常工作，因为缺乏兼容性的标准。还要确保服务器使用正确的MIME类型传输这些格式。虽然很麻烦，但目前这是唯一的方法。
3
目前最佳解决方案： 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>

body:

<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视频）

您可以使用这些免费转换器转换您的视频。

就这么简单！

好的解决方案。同时第一个建议的视频转换器非常不错。 - Alex
1
我已经研究了相当长时间，正在尝试做同样的事情，希望这能帮助其他人。我一直在使用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 vars的动态更新。如果要使用JavaScript进行动态更改，则应完全删除所有元素，只使用canPlayType在JavaScript中设置src，并在第一个受支持的视频类型后使用break或return并不要忘记动态更新flash var mp4。此外，某些浏览器除非您调用video.load（），否则不会注册您更改的源。我认为你遇到的.load（）问题可以通过首先调用video.pause（）来解决。删除和添加视频元素可能会减慢浏览器速度，因为它继续缓冲已删除的视频，但是有一种解决方法。
跨浏览器支持

就跨浏览器部分而言，我也找到了Video For Everybody。我已经尝试过MediaelementJS Wordpress插件，但它解决的问题比引起的问题还多。我怀疑问题是由于Wordpress插件而不是实际库造成的。如果可能的话，我正在寻找一些不需要JavaScript即可工作的东西。到目前为止，我想到的只有这个纯HTML：

<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>时会停止尝试播放视频，因此最终将ogg作为第一个<source>。
  • 正确的MIME类型非常重要，.ogv文件应该是video/ogg而不是video/ogv
  • 如果您有高清视频，则我发现用于HD质量OGG文件的最佳转码器是Firefogg
  • .iphone.mp4文件适用于iPhone 4+，它只能播放MPEG-4带有H.264 Baseline 3视频和AAC音频的视频。我发现使用Handbrake转码器以预设格式将适用于iPhone 4+，但要使iPhone 3GS正常工作，您需要使用分辨率较低的预设格式，我将其添加为video.iphone3g.mp4。
  • 在未来，我们将能够在<source>元素上使用media属性来针对移动设备进行媒体查询，但目前旧版的Apple和Android设备支持得还不够好。
1
0
我使用的方法是：将视频上传到YouTube，然后以MP4格式下载，并使用video标签在各种浏览器上播放成功。
如果你只想将它转换为mp4格式，你可以使用ffmpeg。 - Octopus
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接