JQuery jPlayer autoplay not working on ipad how to show controls

Question

I am using jPlayer to play video on webpage to make it compatible for desktop browsers and iPad.

I am using the following code

$("#jquery_videoPlayer").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            m4v: _mp4url,
            ogv: _oggurl,
            webmv: _webmurl,
            flv:_url
        }).jPlayer("play");
    },
    swfPath: "../js",
    supplied: "m4v, webmv, ogv, flv",
    preload:"auto",
    loop:true,
    solution: "html, flash",
    size: {
        width: "256px",
        height: "240px"
    }
});

It works fine on all browsers however since iPad do not allow autoplay the video I need to show play button on the video (HTML5).

I could not find any option for this in the document.

Can someone help me to what changes should I make in the code to display HTML5 play button on video for jPlayer.

Thanks for any help.

Answer 1

You're not going to be able to play video from $(document).ready() or from jPlayer's ready event. IOS specifically prevents it:

http://roblaplaca.com/blog/2010/04/14/ipad-and-iphone-html5-video-autoplay/

The good news is you can play as much as you want after the page is loaded and the user does click on something. If the page that contains your video is not the first page the user will hit on your site, then you can just add this video to a hidden div in the previous page. When the user clicks, instead of autoplaying video on a new page, show the hidden div and play there.

If you just need to find a way to play it for specific users, you can use a different browser. For example, the iSwifter Flash web browser puts jPlayer into swf mode, and it does autoplay. But it has some other quirky behaviors that seem to be targeted to flash gamers.

If you need it to play on safari and most other alternate IOS browsers, then you'll need to change your workflow a bit.