我正在使用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播放按钮。
感谢您的任何帮助。
您将无法从 $(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 浏览器上播放,那么您需要稍微更改一下工作流程。
nativeVideoControls
是一个包含多个正则表达式值的对象,与浏览器的用户代理匹配。 将其添加到您的选项中。 以下是一些示例。
nativeVideoControls: {
ipad: /ipad/,
iphone: /iphone/,
android: /android/,
blackberry: /blackberry/,
iemobile: /iemobile/
},
我使用以下方法仅在ipad上显示视频控件
var platformInfo = uaPlatform(navigator.userAgent);if(platformInfo.platform.toLowerCase() == "ipad" || platformInfo.tablet.toLowerCase() == "ipad") {$("#jquery_videoPlayer").jPlayer("option", "nativeVideoControls", {all:/./});}
您需要在单击或触摸事件中初始化 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);