用JS程式做一個彈出swal視窗中的youtube影片停止播放功能-教學撰寫:徐嘉裕Neil hsu

最近在幫客戶開發模組剛好有用到一個功能,就是使用swal開新視窗播放youtube影片,像是下面這樣



看起來不難做,吧youtube影片崁入到swal視窗中就完成了!!

經測試影片的確也能播放,但發現一個問題,就是點選OK關閉swal視窗時,雖然區塊消失了,但youtube影片還是再繼續播放,因為還有背影聲音,也就是說關閉swal視窗並無法關閉正在播放中的youtube影片,必須要有youtube控制程式才能關閉影片,這還真是傷腦筋,上網查了一下相關說明,找到一個不錯的youtube影片控制方法修改一下分享給大家

需要準備的工作,
1、youtube網址後方要加上?enablejsapi=1
2、iframe要加上class='youtube-video'

所以整個CODE就是

//影片播放

$(document).ready(function() {

$("body").on("click", "#youtubebtn", function (){

$youtubebtn = $("#youtubebtn").attr("mane");

var $youtubebtnArr = $youtubebtn.split(','); //切割陣列

$title=$youtubebtnArr[0]; //影片標題

$lotteryurl=$youtubebtnArr[1]; //影片ID值,就是watch?v=後面的那一段參數

youtubebfunction($title,$lotteryurl);

})

function youtubebfunction($title,$lotteryurl){

swal({

title: "<h3>"+$title+"</h3>",

text: "<iframe class='youtube-video' width=100% height=450 src=https://www.youtube.com/embed/"+$lotteryurl+"?enablejsapi=1 frameborder=0 gesture=media allow=encrypted-media allowfullscreen></iframe>",

html: true

});

}

//停止youtube影片

$(this).click(function() {

$('.youtube-video').each(function() {

this.contentWindow.postMessage('{"event": "command", "func": "' + 'stopVideo' + '", "args": ""}', '*');

});

});

});

這樣就沒問題了,關閉swal視窗視窗同時也會停止youtube影片,不會在背景中繼續播放!!

參考資料來源:https://developers.google.com/youtube/iframe_api_reference

教學撰寫:徐嘉裕 Neil hsu

留言

這個網誌中的熱門文章

jquery.datepicker下拉月曆只顯示年-月的設定方法-教學撰寫:徐嘉裕Neil hsu

在CentOS7上安裝XAMPP並設定允許外部連線phpmyadmin的方法-教學撰寫:徐嘉裕Neil hsu

jQuery用.each()取代for迴圈