Question

我们要求创建某些产品的视频演示。在所有流行的平台上确保视频在尽可能多的浏览器上播放的最佳方法是什么？

目前的实施：我们只是在Flash播放器中加载Flash视频。

Answer 1

如果托管服务对您来说是可行的选择，Vimeo和Wistia等网站的付费帐户将为桌面浏览器提供Flash视频，为智能手机和iPad等其他移动设备提供HTML5视频，以及来自三星，黑莓等的即将推出的平板电脑

如果您要自己完成所有托管，我建议您使用HTML5视频代码，并简单地回退到Flash。优秀的VideoJS脚本可以为您处理大部分难题，甚至允许您build custom embed codes。

基本上，HTML看起来像这样：

<video width="640" height="360" poster="poster.png" controls preload>
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <!-- This video file is for Safari, Chrome and smartphones running iOS and Android, it will also be referenced later in the Flash fallback for Internet Explorer -->
    <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' /> <!-- This video file is for Firefox, Opera, and is also supported by Chrome -->

    <object id="flash_fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> <!-- This calls on FlowPlayer, an excellent third party Flash video player -->
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["poster.png", {"url": "video.mp4","autoPlay":false,"autoBuffering":true}]}' /> <!-- Notice here you're calling the same .mp4 file as above -->
        <img src="poster.png" width="640" height="360" alt="Poster Image" title="No video playback capabilities." /> <!-- If the browser can't handle any of the HTML5 video files and doesn't have Flash installed, they'll just get the poster frame as shown here -->
    </object>
</video>

希望这有帮助！

Answer 2

~~Flash无法在任何iOS设备上播放。~~

编辑：我误解了这个问题。如果您使用youtube托管视频并嵌入YouTube视频，则可以通过youtube应用在iOS设备上播放视频。这将是一种方法。

Answer 3

在您的网站页面上使用可回退到HTML5版本的可嵌入视频播放器（例如JWPlayer）。这样，您就可以在所有浏览器上使用Flash获得可预测/稳定播放，并在支持它的设备上播放HTML5（Android，iOS，其他）。

如何设置视频以在Windows，Mac，Android和iOS设备上的所有主要浏览器上播放

3 个答案: