由於Youtube近年陸續有幾個小更動

雖然網址大致上沒有變,但一些小地方會影響正規表達式的判斷

並且近年來自適應網頁太重要了,網頁中的Youtube如果沒有RWD就會破版,

然後Flash也太糟糕了,所以全面使用HTML5更是當務之急


而xoops應用在newbb裡的DHTML編輯器,內建的Youtube語法基本上是Flash專用,並且是固定長寬,

已經不符合現代使用,故hack了新的寫法,讓編輯器符合以下幾項要求

  1. 強制https
  2. 同時相容www.youtube.com標準網址及youtu.be短網址
  3. 強制使用HTML5,相容行動裝置瀏覽,不再使用Flash
  4. 使用Bootstrap3的Responsive embed,讓影片可依16:9或4:3自動RWD
  5. 在行動裝置中可進行全螢幕播放

 

會更動到的檔案如下

內建Youtube編輯程式
\class\textsanitizer\youtube\youtube.php

語系檔英文
\language\english\formdhtmltextarea.php

語系檔中文
\language\tchinese_utf8\formdhtmltextarea.php

 

修改步驟

step1. 修改\class\textsanitizer\youtube\youtube.php 共4個地方

 

  • OLD 原程式影片寬高為寫死的
var text2 = prompt(enterFlashWidthPhrase, "425");
var text3 = prompt(enterFlashHeightPhrase, "350");
  • Change 修改為比例,預設為16:9,若你的影片大都是4:3亦可在此修改預設值
var text2 = prompt(enterFlashWidthPhrase, "16");
var text3 = prompt(enterFlashHeightPhrase, "9");

 

  • OLD 原本的Alert是與圖片等其他功能共用語系的
. htmlspecialchars(_XOOPS_FORM_ALT_ENTERHEIGHT, ENT_QUOTES)
. "\",\"" . htmlspecialchars(_XOOPS_FORM_ALT_ENTERWIDTH, ENT_QUOTES)
  • Change 修改為Youtube專用的Alert提示文字
. htmlspecialchars(_XOOPS_FORM_ALT_YOUTUBEHEIGHT, ENT_QUOTES)
. "\",\"" . htmlspecialchars(_XOOPS_FORM_ALT_YOUTUBEWIDTH, ENT_QUOTES)

 

  • OLD 原程式只判斷一般網址
if (!preg_match("/^http:\/\/(www\.)?youtube\.com\/watch\?v=(.*)/i", $url, $matches)) {
    trigger_error("Not matched: {$url} {$width} {$height}", E_USER_WARNING);

    return "";
 }
$src = "http://www.youtube.com/v/" . $matches[2];
  • Change 修改為加入https及長短兩種網址的判斷,因為我php及正規表達式都很爛,底下的程式邏輯很笨,請高手幫我優化
if (preg_match("/^http[s]?:\/\/(www\.)?youtu\.be\/(.*)/i", $url, $matches) ) { }
elseif (preg_match("/^http[s]?:\/\/(www\.)?youtube\.com\/watch\?v=(.*)/i", $url, $matches)) { }
else{
	trigger_error("Not matched: {$url} {$width} {$height}", E_USER_WARNING);
	return "";
	}

$src = "https://www.youtube.com/embed/" . $matches[2];

 

  • OLD 原程式為Flash的object
$code = "<object width='{$width}' height='{$height}'><param name='movie' value='{$src}'></param>" .
        "<param name='wmode' value='transparent'></param>" .
        "<embed src='{$src}' type='application/x-shockwave-flash' wmode='transparent' width='425' height='350'></embed>" .
        "</object>";
  • Change 修改為bootstrap3的embed-responsive,寬高亦符合css裡的16by9跟4by3
$code = "<div class='embed-responsive embed-responsive-{$width}by{$height}'>" .
        "<iframe frameborder='0' class='embed-responsive-item' src='{$src}?controls=1&showinfo=0&rel=0&disablekb=1' allowfullscreen></iframe></div>";

 

step2. Insert language插入新增語系檔 共2個地方

 

  • 英文請改 \language\english\formdhtmltextarea.php ,我的英文很爛,歡迎幫忙修訂XD
define('_XOOPS_FORM_ALT_YOUTUBEHEIGHT','(Video 16:9 or 4:3) input Height 9 or 3 :');
define('_XOOPS_FORM_ALT_YOUTUBEWIDTH','(Video 16:9 or 4:3) input Width 16 or 4 :');
  • 中文請改 \language\tchinese_utf8\formdhtmltextarea.php
define("_XOOPS_FORM_ALT_YOUTUBEHEIGHT", "(影片比例16:9與4:3) 請輸入高 9 或 3 :");
define("_XOOPS_FORM_ALT_YOUTUBEWIDTH", "(影片比例16:9與4:3) 請輸入寬 16 或 4 :");

 

成果發表

 

  • 在newbb中的DHTML編輯器,點擊Youtube外掛,貼上網址,先測試短址

 

  • 輸入影片的寬,預設為16

 

  • 輸入影片的高,預設為9

 

  • 在文字框中出現剛才打的Youtube代碼,並加碼測試4:3及一般網址

 

  • 使用電腦的瀏覽器觀看,兩種網址都成功,因為影片是16:9的,所以一個有黑邊,一個沒有~

 

  • 拿出手機看看,順利的自適應RWD,並且兩個比例亦都正常

 

 

打完收工,如果其他模組用的不是內建的編輯器,就沒有用了,因為這是內建專用的~

希望xoops下一版內建的Youtube程式碼是更好用的 XDD


<補充>

若網站裡已經有許多文章用了舊的code,不想一篇一篇修改的話,

可以再加上幾個判斷,就可向下相容舊語法~

 

找到此行

$src = "http://www.youtube.com/embed/" . $matches[2];

 

並在底下增加內容

if (empty($width) || empty($height))
{$width = 16;$height = 9;}
 if (($width) > 16 ||($width) > 9)	
{if (($width / $height) > 1.5)
{$width = 16;$height = 9;}
else {$width = 4;$height = 3;} }

 

邏輯是,判斷若為空值,則自動填上16:9

若寬大於16,高大於9(也就是原本的pixel)

則計算比例,寬除以高,大於1.5的則是16:9,小於1.5的,則為4:3

(正常16:9為1.7,4:3為1.3)

 

以上,新舊相容完美寫法 done !

 

同步發表於xoops.org官方網站論壇 hack版~

http://xoops.org/modules/newbb/viewtopic.php?topic_id=77063

九五二七

作者/九五二七

愛漫畫愛遊戲愛上網愛星爺,小時摸到阿羅士與AppleII後註定宅一輩子,從紅白機到PS4,從386到Xeon,沒日沒夜的打電動;待過所有宅產業,從光華到NOVA,從遊戲到動漫,從攝影器材到網路電信,喜愛學習多於睡覺,無時無刻散發一股宅味,但號稱長的像梁朝偉XD
覺得這篇文章讚嗎?