2015年1月22日 星期四

點擊圖片, play 播放鍵再載入 Youtube 影片

以前一直沒什麼機會遇到一個頁面要載入一堆 youtube 影片,大概是我很討厭網頁裡面嵌 youtube (我比較喜歡 host 影片在自己的 server),所以也不怎麼在乎。但試過之後才發現,一個頁面擺一堆影片完全拖垮瀏覽速度,卡到不行...,雖然我早有預期會有這個狀況,但沒想到如此淒慘。

後來輾轉之下,我也沒想到什麼好辦法,唯一目前想到的途徑就是,先去 youtube 要該影片的 thumbnail (縮圖檔) ,有些 api 可以用,這個 stackoverflow 問題的解答已經說得詳細了。

有了 thumbnail 之後,接著就是考驗 HTML / CSS 技術,通常,會在 thumbnail 之上,疊一個 play 按鍵,你可以利用 css 的 :before 或是 :after 的 content 屬性,塞入該 play 鍵的 url,或是放 background,也可以,看你怎麼設計跟規劃。

至於 thumbnail 的顯示,由於他本來就是一張圖片,但你也未必要用 img 標籤,像我的話是走一般的 div 或是其他 tag,設定 background,習慣上我喜歡用 background,然後再用 background-size 去 fit 那張圖的大小到 width 跟 height。

以上我說的做法,HTML 大致的輪廓如下 :
(這些 code 可能未必 run 的起來,我在寫文章,所以只是在盲打,我只在描述『方法』而已 )

<div
  class="thumbnail"
  data-youtube-id="HB09QpIf7_A"
  data-video="https://www.youtube.com/embed/HB09QpIf7_A?&autoplay=1"
  style="background-image: url('http://img.youtube.com/vi/HB09QpIf7_A/sddefault.jpg')">
</div>

Note:
如果想要一點擊,接著就替換為 iframe 時就要自動播放,那 youtube 網址要加上 &autoplay=1。

最後,還是得寫 JavaScript,偵測 play 按鈕或是 thumbnail 被點擊的事件,一旦這個 div 被點擊,就把自己替換為 iframe。


$('.thumbnail').click(function() {
    
  var thisYoutubeId = $(this).attr('data-youtube-id');
  
  var video
      ''
      + '<iframe id="video' + thisYoutubeId + '"'
      + 'src="'+ $(this).attr('data-video') +'"'
      + ' webkitAllowFullScreen mozallowfullscreen allowFullScreen'
      + ' frameBorder="0"
      + ' data-ytid="'+thisYoutubeId+'"></iframe>';

  $(this).replaceWith(video);

  });

Note:
如果不想要 iframe 有個灰色邊筐,要設定 frameBorder = " 0 "。


See the Pen VYbJXK by winwu (@winwu) on CodePen.

如果有更好的方法,希望你可以留言,分享一下 :)

沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...