當youtube視頻結束時,如何讓fancybox自動關閉?當youtube video id完成後,fancybox如何自動關閉?
4
A
回答
2
這並不簡單,因爲它聽起來:
- 首先確定您是否打算使用嵌入或iframe的球員。
- 按照embed player API或iframe player API示例初始化API。
- 彈出窗口打開後,使用"onComplete" fancybox callback函數來設置播放器。
- 在回調中,確保你添加一個
onStateChange
事件偵聽器,這樣你就可以決定當視頻已經完成(零值表示影片已結束) - 一旦您發現該視頻已經結束,然後使用
$.fancybox.close
關閉彈出窗口的方法
或者,您可以讓用戶關閉彈出窗口。
0
環顧四周沒有這裏的任何運氣後,我想出了
看看有什麼我們做什麼,看這裏的視頻
<div style="display: none;">
<div id="player"></div>
</div>
<script src="http://www.youtube.com/player_api"></script>
<script>
$(document).ready(function() {
$("a.video_button").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 's19V_6Ay4No',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
$(document).ready(function() { parent.$.fancybox.close();});
}
}
</script>
0
是的,這是處理到的fancybox或顏色框以正確的方式解決。 YouTube的視頻API提供了不同的狀態來處理這種情況像unstarted = -1,結束= 0,播放= 1,暫停= 2,緩衝= 3,視頻提示= 5
fancybox jquery代碼塊獲取或traping狀態可以輕鬆實現這一點。只要訪問這篇文章,並進行適當的演示。 Visit here
2
這是Fancybox-Youtube-Cookie-Autoclose-Autopopup的完整腳本,只需下載css所需的圖片,將它們放入根目錄中的/ fancybox文件夾中,並替換爲您的視頻ID。真正起作用的全面測試...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
// 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();
}
}
function onPlayerStateChange(event) {
if (event.data === 0) {
$.fancybox.close();
}
}
function onYouTubePlayerAPIReady() {
$(function() {
if ($.cookie('welcome_video')) {
// it hasn't been three days yet
} else {
// set cookie to expire in 3 days
$.cookie('welcome_video', 'true', { expires: 3});
$(document).ready(function() {
$.fancybox.open({
\t \t href: "https://www.youtube.com/embed/qm1RjPM9E-g", /*YOUR VIDEO ID*/
helpers: {
media: {
youtube: {
params: {
autoplay: 1,
rel: 0,
// controls: 0,
showinfo: 0,
autohide: 1,
}
}
},
buttons: {}
},
beforeShow: function() {
var id = $.fancybox.inner.find('iframe').attr('id');
var player = new YT.Player(id, {
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
}
}); // fancybox \t
}); // ready
} // cookie else ready
}); // function for cookie
} // youtube API ready
</script>
相關問題
- 1. 如何關閉Swiftype自動完成?
- 2. 關閉自動完成
- 3. 關閉自動完成
- 4. 如何在視頻完成後關閉youtube API的standAlonePlayer
- 5. Fancybox 1.3.4自動關閉
- 6. 如何在c中自動完成後關閉outlook#
- 7. 如何在網站上完成遊戲後自動關閉swf?
- 8. 的fancybox VS自動完成
- 9. 我如何執行在Firefox自動關閉,當下載完成後
- 10. Swift AVPlayerItem完成後關閉
- 11. 如何在x秒後自動關閉fancybox/lightbox/... popup?
- 12. 關閉youtube視頻iframe完成後不工作
- 13. 關閉FancyBox之後?
- 14. 完成播放後YouTube視頻不會關閉
- 15. vim-rails關閉自動完成
- 16. 自動完成關閉錯誤
- 17. 暫時關閉打字自動完成
- 18. Firefox 4自動完成=關閉功能
- 19. Nodejs,redis自動完成,關閉
- 20. 爲ComboBox關閉自動完成功能
- 21. Jquery自動完成關閉功能
- 22. Xcode中關閉自動完成問題
- 23. 自動完成/填充不關閉
- 24. 自動完成功能不會關閉
- 25. 關閉KendoUI自動完成上的HtmlEncode
- 26. 如何在Ajax提交後關閉fancybox?
- 27. PyDev - 關閉完成建議的自動完成+熱鍵?
- 28. Fancybox關閉後更新parent.page
- 29. 防止emacs在完成後自動關閉窗口
- 30. 如何使用jquery關閉自動完成/建議框
您應該包括解決方案和參考站點在哪裏找到的信息。此外,短代碼在這裏不是一個有效的方法,因爲標記會照顧它恕我直言。 – talves
這是可以與fancybox代碼一起使用的YouTube視頻API鏈接 - [YouTube-API](https://developers.google.com/youtube/js_api_reference) 您可以在上述API頁面搜索功能 - 功能名稱 - function onYouTubePlayerReady(playerId) 訪問完整的代碼塊實現 - [INFOTOKRI](http://www.infotokri.in/2013/09/close-colorbox-automatically-when.html) – CMSSE