用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
看起來不難做，吧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
留言
張貼留言