无法在 safari 浏览器中播放 html5 视频..！答案

【问题标题】：Unable to play html5 video in safari browser..!无法在 safari 浏览器中播放 html5 视频..！
【发布时间】：2014-05-12 18:04:58
【问题描述】：

我的标记是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home Page</title>
        <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider.js"></script>


</head>
<body>
<div id="slider1">
    <div class="flexslider">
        <ul class="slides">
            <li class="list" data-video="vid/scene1.mov">
                <video width="100%" height="100%" preload poster="images/white.jpg">

                    <source src="vid/scene1.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>


            </li>
            <li class="list" data-video="vid/scene2.mov">
                <video width="100%" height="100%" preload poster="images/white.jpg">

                    <source src="vid/scene2.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>

            </li>
            <li class="list" data-video="vid/scene3.mov">
                <video width="100%" height="100%"  preload poster="images/white.jpg">

                    <source src="vid/scene3.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>

            </li>
            <li class="list" data-video="vid/scene4.mov">
                <video width="100%" height="100%" preload poster="images/white.jpg">

                    <source src="vid/scene4.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>

            </li>
            <li class="list" data-video="vid/scene5.mov">
                <video width="100%" height="100%" preload poster="images/white.jpg">

                    <source src="vid/scene5.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>

            </li>
        </ul>
    </div>

</div>



<script type="text/javascript" charset="utf-8">

    $(window).load(function() {

        $('.flexslider').flexslider({
            start:animation,
            after:animation


        });


    });
    function animation(slider){
        var myVideo=$('.flex-active-slide video').get(0);
        myVideo.playbackRate=1.0;
        myVideo.play();

    }




</script>
</body>
</html>

我已使用一些免费的在线转换器将我的初始电影文件转换为 .mp4。我可以在 quicktime 播放器中播放，但无法在 safari 浏览器上播放。我尝试过使用各种格式 .ogg,.webm 但失败了。请建议适当的方式，并且视频在所有其他浏览器中都可以正常播放。（Chrome，Firefox）

【问题讨论】：

标签： html html5-video

【解决方案1】：

您可以尝试几件事：

我可以看到您尝试在页面加载时自动播放视频。因此，如果您尝试在 iOS 上观看视频，它将无法播放，因为 Apple 仅允许在用户交互时播放（如触摸事件）。您可以阅读there 了解更多信息。
如果它在 Safari 桌面上不起作用，则可能是托管 MP4 的服务器上的 MIME/TYPE 存在问题。您可以开始阅读here 或 Google 以获取更多信息。我会尝试用 mp4 在 Chrome 中播放一个简单的 HTML5 视频标签来排除这个。如果它在 Chrome 中播放，则不是 MIME/TYPE 服务器问题。
拥有 HTML5 文档类型也会有所帮助：<!doctype html>
Safari 不会播放 .webm 或 .ogg 视频文件。对于 Safari，您应该坚持使用 mp4。如果是编码问题，尝试手刹之类的软件可以解决您的问题。
此外，您还需要在 PC 上安装最新版本的 Safari 和 Quicktime 才能播放 HTML5 视频，因此更新或全新安装可能会解决您的问题。

我希望这能让你朝着正确的方向前进。

谢谢

【讨论】：

【解决方案2】：

在向 Safari 浏览器发送内容时，我们发现浏览器在注意到要下载的多媒体内容时，会首先向 Web 服务器发送一个额外的请求，其中包括一个 Content-Range 标头，以确定要传递的内容。如果服务器没有正确响应，浏览器将不会下载和播放内容。这个额外的请求/响应在 HTML 规范中定义，但不是必需的。

根据我们的经验，Mac 上的 Safari 以及我们在 iPad 上测试过的几乎所有浏览器都是如此。但是，即使浏览器和服务器之间没有这种额外的交换，Windows 版 Safari 也能正常运行。

如果这是您看到的问题，播放器控件将显示在浏览器窗口中，但内容永远不会开始播放。没有错误或其他消息，只是一个空白的播放器控件。

在这种情况下，您需要向您的服务器寻求答案。如果服务器是你的，就像我们一样，你需要添加这个额外的部分来响应浏览器对媒体大小的请求，即响应浏览器请求中的 Content-Range 标头。如果服务器来自其他人，请询问他们是否支持。同样，根据我们的经验，并非所有服务器都这样做。

【讨论】：