我正在使用fancybox Media.我想在视频完成时,关闭fancybox ..
这是我的代码:
$('.fancybox-media').attr('rel','media-gallery').fancybox({ openEffect : 'none',closeEffect : 'none',prevEffect : 'none',nextEffect : 'none',arrows : false,padding : '0',margin: '0',width: '100%',height: '100%',helpers : { media : { youtube : { params : { autoplay : 1,rel : 0,controls : 0,showinfo : 0,autohide : 1 } }},buttons : {} } });
解决方法
这是配方:
1).将youtube’s player API加载到您的页面中.
2).创建3个功能:
> onYouTubePlayerAPIReady – 收听youtube的API:
function onYouTubePlayerAPIReady() { .. }
然后将你的fancybox初始化代码(包括.ready()方法)放在这个函数中,如:
function onYouTubePlayerAPIReady() { $(document).ready(function () { $('.fancybox-media').attr('rel','media-gallery').fancybox({ // fancybox API options ... etc. }); // fancybox }); // ready }
> onPlayerReady – 监听youtube的播放器:
function onPlayerReady(event) { event.target.playVideo(); }
> onPlayerStateChange – 监听youtube的播放器更改,包括视频结束.这里我们称之为fancybox close方法:
function onPlayerStateChange(event) { if (event.data === 0) { $.fancybox.close(); } }
3).现在使用fancybox beforeShow回调将最后两个函数绑定到你的fancybox(youtube)内容,如:
beforeShow: function () { var id = $.fancybox.inner.find('iframe').attr('id'); var player = new YT.Player(id,{ events: { onReady: onPlayerReady,onStateChange: onPlayerStateChange } }); }
编辑(2014年2月3日):
This method doesn’t appear to work on iPhone or iPad,any idea why?
好像youtube将iOS设备中播放的视频转换为HTML5格式.不知何故,函数内部的autoplay选项
function onPlayerReady(event) { event.target.playVideo(); }
…不允许youtube正确转换视频,它只是挂起.
替代解决方案是检测移动设备并仅执行event.target.playVideo();对于桌面代理商,你可以这样做
// detect mobile devices features var isTouchSupported = 'ontouchstart' in window,isTouchSupportedIE10 = navigator.userAgent.match(/Touch/i) != null; function onPlayerReady(event) { if (!(isTouchSupported || isTouchSupportedIE10)) { // this is NOT a mobile device so autoplay event.target.playVideo(); } }
请参阅forked JSFIDDLE,它应该适用于iOS和桌面设备.
原文地址:https://www.jb51.cc/jquery/181042.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。