用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

留言

張貼留言

這個網誌中的熱門文章

xampp修改phpMyAdmin的MySQL密碼方法-教學撰寫:徐嘉裕Neil hsu

新版的xampp基於安全性考量，已經取消了原本控台修改MySQL密碼的功能，所以安裝好xampp後http://localhost/不用設密碼是可以直接進入phpMyAdmin，但基於網站安全性考量，建議還是修改一下設定root加個密碼會比較安心，至少晚上好睡覺不用擔心網站被駭，設定方法如下：

1、啟用xampp Control Panel，點選My SQL->admin按鈕，開啟phpMyAdmin




2、點選使用者帳號




3、吧兩個紅色的任意帳號選取，勾選下方刪除使用者選項，點選送出!




4、點選最下面的root帳號，點選編輯權限



5、選擇修改密碼，然後輸入2次密碼，再點選執行



6、之後再點選XAMPP的MYSQL進入，會發現無法進入phpMyAdmin中，表示剛剛設定的密碼是有生效了，


但還需要修改config.inc.php檔案填入剛剛改的密碼才行，請找到以下檔案，用筆記本打開。

 C:\xampp\phpMyAdmin\config.inc.php


/* Authentication type and info */

$cfg['Servers'][$i]['auth_type'] = 'http'; <-改成http

$cfg['Servers'][$i]['user'] = 'root';

$cfg['Servers'][$i]['password'] = '●●●●●●';   <-填入剛剛輸入的密碼

$cfg['Servers'][$i]['extension'] = 'mysqli';

$cfg['Servers'][$i]['AllowNoPassword'] = true;

$cfg['Lang'] = '';


儲存檔案後，再次進入http://localhost/phpmyadmin/ 就不會被阻擋了，如果是本地端是不需要輸入密碼就能進入的，不過網站是需要填寫mysql的帳號密碼才能讀取資料。


7、在進入phpMyAdmin->使用者帳號中，吧另外兩個root帳號也刪除…
閱讀完整內容

jQuery用.each()取代for迴圈

今天要幫客戶寫一個自動滑到錨點的jQuery特效功能，共有5個按鈕，所以正常程式寫法是click()寫5次然後帶入按鈕的id及要滑入到錨點的id，但是這樣code又寫的落落長，不利seo優化，才想說用javaScript常用的for迴圈設個$i值<6的時候$i++的寫法，誰知道這方法在jQuery居然不能用，因為所有的數值都會被前面的數值所覆蓋。

例如迴圈本來因該是要帶出#s1,#s2,#s3,#s4,#s5的id數值，但用for迴圈卻只會顯示最後的數值，所以5個id通通都會變成#s5,#s5,#s5,#s5,#s5，沒辦法只好花時間研究一下jQuery用的迴圈方法，找到了.each()方法，經測試後的確是能帶入#s0,#s1,#s2,#s3,#s4的id數值，不會被最後的數值覆蓋到，以下為.each()使用方法範例

   $(".menu").each(function(index) {
  $("#s"+index+"").click(function() {
               $('html,body').animate({scrollTop:$("#section"+index+"").offset().top}, "show");
               return false;
           });  

   }); 其中紅色字的index就是for迴圈$i值的意思， each()會自動去解析在頁面中全部的class="menu"共有幾個，由上往下排序帶出數值，如果有5個則 each()就會產生5個迴圈，index數值會從0開始計算產生0,1,2,3,4等數值出來，就可以帶入變數中產生id的編號了。

教學撰寫：徐嘉裕  Neil hsu

閱讀完整內容

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

jquery.datepicke是個非常好用的日曆套件，基本樣式是顯示年月日，也能顯示年月日時分秒，修改一下還能只顯示年月，當成月曆來使用，設定方法如下：

先在樣板端引入以下的JS與CSS檔

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
    .ui-datepicker-calendar {
        display: none;  //隱藏日期區塊
    }
</style>


然後貼上

<script>

$(function () {

$('#datepicker').datepicker({

changeYear: true, // 年下拉選單

changeMonth: true, // 月下拉選單

showButtonPanel: true, // 顯示介面

showMonthAfterYear: true, // 月份顯示在年後面

dateFormat: 'yy-mm-dd',

showButtonPanel: true,

monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", &…
閱讀完整內容