CODEWITHSUNDEEP
htmlhtml5-video
Pawan Kalyan
Pawan Kalyan

Reputation: 581

Unable to play html5 video in safari browser..!

My markup is 

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

I have converted my initial movie files to .mp4 using some free converters online. I can play in quicktime player but unable to play on safari browser. I have tried using various formats .ogg,.webm but failed. Please suggest the appropriate way and also the videos are playing fine in all other browsers.(Chrome,Firefox)

Upvotes: 1

Views: 4097

Answers (2)

dacDave
dacDave

Reputation: 242

In delivering content to the Safari browser, we have found that the browser, upon noticing multimedia content to be downloaded, will first send an extra request, which includes a Content-Range header, to the web server to ascertain the size of the content to be delivered. If the server does not respond correctly, the browser will not download and play the content. This extra request/response is defined in, but not required by, the HTML spec.

In our experience, this has been true for Safari on a Mac and just about any browser that we tested on an iPad. However, Safari for Windows appears to play fine even without this extra exchange between the browser and the server.

If this is the problem you are seeing, the player control will be displayed in the browser window, but the the content will never start playing. No error or other message, just a blank player control.

In this case, you will need to look to your server for the answer. If the server is yours, as our is, you will need to add this additional piece to respond to the browser request for media size, i.e. to respond to the Content-Range header in a browser request. If the server is from someone else, ask them if they support this. Again, in our experience, not all servers do.

Upvotes: 1

Arnaud Leyder
Arnaud Leyder

Reputation: 7002

A couple of things you could try:

  • I can see that your trying to auto play the video on page load. So if you are trying to view the video on iOS it will not play because Apple only allows playback on user interaction (like a touch event). You can read there for more information.
  • If it does not work on Safari desktop then it could be an issue with the MIME/TYPE on the server where your MP4 are hosted. You can begin to read here or Google around for more information. I would try to play a simple HTML5 video tag in Chrome with the mp4 to rule this one out. If it plays in Chrome then it is not a MIME/TYPE server issue.
  • Having an HTML5 doctype could also help: <!doctype html>
  • Safari will not play .webm or .ogg video files. You should stick to mp4 for Safari. If it is an encoding issue trying a software like handbrake could solve your issue.
  • Also you would need a recent version of Safari and Quicktime to be installed on your PC to play HTML5 video so an update or fresh install may solve your issue.

I hope this put you in the right direction.

Thanks

Upvotes: 2

Related Questions