JQuery jPlayer autoplay not working on ipad how to show controls

问题

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.

回答1:

nativeVideoControls is an object conatining multiple regex values, matched against the browser's user-agent. add this to your options. here are some examples.

nativeVideoControls: {
  ipad: /ipad/,
  iphone: /iphone/,
  android: /android/,
  blackberry: /blackberry/,
  iemobile: /iemobile/
},

回答2:

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.

回答3:

I used the following approach to show the video controls on ipad only

var platformInfo = uaPlatform(navigator.userAgent); if(platformInfo.platform.toLowerCase() == "ipad" || platformInfo.tablet.toLowerCase() == "ipad") { $("#jquery_videoPlayer").jPlayer("option", "nativeVideoControls", {all: /./}); }

回答4:

You need to initialise the jPlayer on a click or touch event.

// Note on the iPad you may want to use "touchstart" instead.
$('.play-button').on('click', function() {
    jplayer = $("#jplayer").jPlayer({
      swfPath: "http://f.ordify.net/assets/Jplayer.swf",
      ready: function () {
        $(this).jPlayer("setMedia", {
          mp3: "http://f.ordify.net/audio/alarm.mp3"
          });
      },
      solution: "html, flash",
      supplied: "mp3",
      preload: "auto"
    });
  }
})
setTimeout(function() { jplayer.jPlayer("play"); }, 5000);

来源：https://stackoverflow.com/questions/10926122/jquery-jplayer-autoplay-not-working-on-ipad-how-to-show-controls

标签

ipad

jplayer