当前位置：文江博客话题详情

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

发布于 2024-09-28 17:17:51 字数 99 浏览 5 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

┼── 2024-10-05 17:17:51

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

。您将自己完成所有托管工作，我建议使用 HTML5 视频标签，并简单地回退到 Flash。优秀的 VideoJS 脚本可以为您处理大部分困难的事情，甚至允许您构建自定义嵌入代码。

基本上，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>

希望这有帮助！

If a hosted service is a viable option for you, paid accounts at sites like Vimeo and Wistia will serve Flash video to desktop browsers and HTML5 video for smartphones and other mobile devices like the iPad and upcoming tablets from Samsung, Blackberry, etc.

If you'll be doing all of the hosting yourself, I recommend using the HTML5 video tag with a simple fallback to Flash. The excellent VideoJS script handles most of the hard stuff for you and even allows you to build custom embed codes.

Basically, the HTML would look like this:

<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>

Hope this helps!

回复收藏 0 原文