JQuery jPlayer自动播放不能在ipad上工作如何显示控件

时间:2012-06-07 05:25:12

标签: ipad jplayer

我正在使用jPlayer在网页上播放视频,使其与桌面浏览器和iPad兼容。

我正在使用以下代码

$("#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"
    }
});

它适用于所有浏览器,但由于iPad不允许自动播放我需要在视频上显示播放按钮的视频(HTML5)。

我在文档中找不到任何选项。

有人可以帮助我在代码中进行哪些更改,以便在jPlayer的视频上显示HTML5播放按钮。

感谢您的帮助。

4 个答案:

答案 0 :(得分:2)

您无法从$(document).ready()或jPlayer的ready事件播放视频。 IOS专门阻止它:

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

好消息是,您可以在加载页面并且用户点击某些内容后尽可能多地播放。如果包含您视频的页面不是用户在您网站上点击的第一页,那么您只需将此视频添加到上一页中的隐藏div即可。当用户点击,而不是在新页面上自动播放视频时,显示隐藏的div并在那里播放。

如果您只是想找到一种方法来为特定用户播放它,您可以使用其他浏览器。例如,iSwifter Flash Web浏览器将jPlayer置于swf模式,并进行自动播放。但它有一些其他古怪的行为,似乎是针对Flash游戏玩家。

如果您需要在Safari和大多数其他IOS浏览器上播放,那么您需要稍微更改一下您的工作流程。

答案 1 :(得分:1)

我使用以下方法仅在ipad上显示视频控件

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

答案 2 :(得分:1)

您需要在点击或触摸事件中初始化jPlayer。

// 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);

答案 3 :(得分:1)

nativeVideoControls是一个包含多个正则表达式值的对象,与浏览器的用户代理进行匹配。将此添加到您的选项中。这里有一些例子。

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