Question

我的标记是

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

Answer 1

你可以尝试一些事情：

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

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

由于

Answer 2

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

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

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

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

无法在Safari浏览器中播放html5视频..！

2 个答案: