徐嘉裕(Neil Hsu)的工作心得網誌!

如果想要在自己開發的Xoops模組中播放youtube影音，就必須解出youtube影片網址串後面的ID才行，然後套入到iframe中，youtube影片網址目前有兩種格式 1、瀏覽器網址有?v=變數值，像是https://www.youtube.com/watch?v= yeWbbzDDNAc  紅字即為影片ID 2、播放器滑鼠右鍵->複製影片網址，沒有?v=變數值，像是https://youtu.be/ yeWbbzDDNAc  紅字即為影片ID 所以function必須兩種格式網址都要能解出影片ID，以下為CODE部分 //youtube取得網址ID function function youtubeurl($url=""){ //解析youtube網址?v值 //網址類型：https://www.youtube.com/watch?v=zIE8htt4HLg $urlarr=parse_url($url); parse_str($urlarr['query'],$parr);      $vid=$parr['v'];  //解析複製網址後ID值 //網址類型：https://youtu.be/SfPeulcfbSI if(empty($vid)) $vid=end(preg_split("/\//",reset(preg_split("/\?/",$url)))); return $vid; } 使用範例 $url="https://www.youtube.com/watch?v=yeWbbzDDNAc"; 或是 $url="https://youtu.be/yeWbbzDDNAc"; 以上兩種格式都能解 echo $youtubbox="<iframe width='950' height='534' src='https://www.youtube.com/embed/". youtubeurl($url) ."' title='YouTube video player' frameborder=...

最近在幫客戶開發模組剛好有用到一個功能，就是使用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/...