9-2 用影片替換輪播圖

1. 我們的編輯表單有個「Youtube連結」的項目，當使用者有填寫該欄位時，我們就以影片取代輪播圖
2. 一樣問一下AI怎麼做：

   若有Youtube的影片播放網址，並將該網址送至smarty5樣板，如{$youtube}，請問要如何才能在樣板中用BootStrap5的Ratios來內嵌並播放該影片？此外，該如何取得該影片的縮圖？

    

作法一：

1. AI給了一個函數，我們先將 getYoutubeInfo($url) 放到 function.php 中：

   <?php
   function getYoutubeInfo($url) {
       $videoId = "";
       if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $url, $match)) {
           $videoId = $match[1];
       }
       
       if ($videoId) {
           return [
               'videoId' => $videoId,
               'embedUrl' => "https://www.youtube.com/embed/$videoId",
               'thumbnailUrl' => "https://img.youtube.com/vi/$videoId/0.jpg"
           ];
       }
       
       return null;
   }
   
   // 假設 $youtube 是從數據庫或其他來源獲得的 YouTube URL
   $youtube = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
   
   // 獲取 YouTube 影片信息
   $youtubeInfo = getYoutubeInfo($youtube);
   
   // 將信息傳遞給 Smarty
   $smarty->assign('youtubeInfo', $youtubeInfo);
   

    

2. 然後分別修改修改 show() 及 all()，判斷 youtube_url 若有值，就去取得該影片的相關資訊：

   function show(int $id): array
   {
       global $pdo;
   
       try {
           ...略...
   
           $filtered_result['media_json'] = convertMediaToJson($filtered_result['media']);
           $filtered_result['main_image'] = array_key_first($filtered_result['media']);
           $filtered_result['youtube'] = '';
           if ($filtered_result['youtube_url']) {
               $filtered_result['youtube'] = getYoutubeInfo($filtered_result['youtube_url']);
           }
   
           return $filtered_result;
   
           ...略...
       }
   }

   function all(int $start = 0, int $limit = 10): array
   {
       global $pdo;
   
       ...略...
   
       while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
           
       ...略...
           $row['media_json'] = convertMediaToJson($row['media']);
           $row['main_image'] = array_key_first($row['media']);
           $row['summary'] = truncate_string($row['news_content'], 200);
           $row['youtube'] = '';
           if ($row['youtube_url']) {
               $row['youtube'] = getYoutubeInfo($row['youtube_url']);
           }
   
           $results[] = $row;
       }
   
       return $results;
   }

    

3. 接著將播放Youtube的部份取出，存成 templates/youtube.tpl 樣板

   <!-- 使用 Bootstrap 5 的 Ratios -->
   <div class="ratio ratio-16x9">
       <iframe src="{$youtube.embedUrl}" title="YouTube video" allowfullscreen></iframe>
   </div>

    

作法二：

1. 上課時，AI給另一種作法，直接用樣板搞定，一樣存成 templates/youtube.tpl 樣板：

   {if $type =='youtube' && $youtube}
       <div class="ratio ratio-16x9">
           <iframe src="https://www.youtube.com/embed/{$youtube|regex_replace:'/^.*(?:youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*$/':'$1'}" 
                   title="YouTube video" 
                   allowfullscreen>
           </iframe>
       </div>
   {/if}

    

必要的動作：

1. 不管哪種作法，都必須修改有引入 article.tpl 的樣板，包括：templates/main.tpl及templates/show.tpl，在引入 article.tpl 時，多加 youtube=$news.youtube type=$news.upload_type 這兩個參數：

   {foreach $all_news as $key => $news}
       {if $key==0}
           {include file="article.tpl" slider=true title=$news.news_title date=$news.report_date school=$news.school_name count=$news.views author=$news.publisher content=$news.news_content link=$news.related_link youtube=$news.youtube type=$news.upload_type thumb=""}
       {else}
           {include file="article.tpl" slider=false title=$news.news_title date=$news.report_date school=$news.school_name count=$news.views author=$news.publisher content=$news.summary link=$news.related_link youtube=$news.youtube type=$news.upload_type thumb=$news.main_image}
       {/if}
   {/foreach}
   

   {include file="article.tpl" slider=true title=$news.news_title date=$news.report_date school=$news.school_name count=$news.views author=$news.publisher content=$news.news_content link=$news.related_link youtube=$news.youtube type=$news.upload_type thumb=""}
   

    

2. 如此，便可修改templates/article.tpl，根據$type來判斷是要顯示輪播圖或是影片

   <article class="my-4">
       {if $slider}
           {if $type=="youtube" && $youtube}
               {include file="youtube.tpl"}
           {else}
               {include file="slider.tpl"}
           {/if}
       {/if}
   
       ...略...
   
       <div class="row">
           {if $thumb}
               <div class="col-md-4 mb-3">
                   {*作法一*}
                   {if $type=="youtube" && $youtube}
                       <img src="{$youtube.thumbnailUrl}" class="img-fluid" alt="{$title}圖片">
                   {else}
                       <img src="{$thumb}" class="img-fluid" alt="{$title}圖片">
                   {/if}
   
   
   
   
                   {*作法二*}
                   {if $type =='youtube' && $youtube}
                       {$youtube_id = $youtube|regex_replace:'/^.*(?:youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*$/':'$1'}
                       <img src="https://img.youtube.com/vi/{$youtube_id}/0.jpg" alt="YouTube Thumbnail" style="width: 100%;">
                   {else}
                       <img src="{$thumb}" class="img-fluid mb-3" alt="圖片" style="width: 100%;">
                   {/if}
               </div>
               
               ...略...
           {else}
               ...略...
           {/if}
       </div>
   </article>

   作法一和作法二使用其中一種即可

3. 若是選擇用影片，就會秀出影片了
   
4. 縮圖也改為自動擷取的縮圖