[Youtube] 在網頁中嵌入重覆播放的youtube影片

我知道很多人發過這篇文章,不過自己整理的心得自己才最看得懂吧 囧rz

如何嵌入?
要把youtube內嵌到你的blog,直到2012年5月份為止( 我這樣說是因為Youtube經常改變內嵌的方式,不過不得不讚的是一次比一次簡單 )的方法如下:
  1. 首先進入到你想嵌入的Youtube頁面,往下拉一下影片的下方會有一顆叫分享(Share)的按鈕,按一下。


  2. 然後按一下內嵌(Embed)


  3. 然後把下圖這段html複製起來(滑鼠右鍵->複製 或 Ctrl+c)


  4. 轉回你正在寫blog的頁面(以下以blogger為例),跳到HTML模式(其他種類的blog的 HTML模式在那裡 小弟 就不知道了 ˊ_>ˋ ) 把剛才複製的那段HTML貼在你的CODE的最底下。


    你可能會好奇說,這段HTML究竟是啥咪啊?這段Code的意思就是說:

    "建立一框架(iframe),沒有規定是不是一定要全螢幕(allowfullscreen=""),框架沒有厚度(framework="0"),高315單位(height="315"),寬420單位(width="420"),來自以下這個地方(src="brabrabra") "

    所以結果如下,內嵌就完成了。

如何加入其他功能?
  1. 如果有另外的需求,例如不停重播或者在那裡開始之類的,就要使用Youtube提供給我們的參數設定了。這個網站有列出所有Youtube提供給我們用的參數。以下用autoplay這個參數來當例子。跟據上面這個官方網站的說明,autoplay的描述如下:

    autoplay (supported players: AS3, AS2, HTML5)
    Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.
  2. 意思就是說1的話影片在網頁載入以後就會自動播放,0的話就不會,就這麼簡單!

  3. 那我們要怎麼加呢這個參數進去呢? 先回到HTML模式,然後找回剛貼到網頁上的HTML碼, 先找到 src="http://www.youtube.com/embed/mAfr1KC50KU" 這段,這段表示的是影片的位置,然後在src的尾段加入一個問號"?",然後再打autoplay=1這個參數:

    意思就是說從
    src="http://www.youtube.com/embed/mAfr1KC50KU"
    變成
     src="http://www.youtube.com/embed/mAfr1KC50KU?autoplay=1"
    所以,整段就變成
    <iframe width="560" height="315" src="http://www.youtube.com/embed/mAfr1KC50KU ?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
    存檔以後,影片在網頁載入以後就會開始播放囉!



  4. 再來複雜一點,如果一開始要自動播放,又要不停的重複又重複又重複又重複(以下省一萬字) 那怎麼辦?
    也是很簡單,就是把剛才的 ?autoplay=1 變成 ?autoplay=1&loop=1 就可以了! 為什麼要這樣? 意思就是說除了要傳入autoplay這個參數以外,還要傳入loop參數,參數之間要用"&"來連結,就是 and 的意思。

  5. 要閱讀Youtube提供的其他參數,記得來這裡看!

Popular posts from this blog

[SQL SERVER] 找出LOCK方法懶人包

[SQL Server] 解決log檔(ldf file)過度膨脹的實戰經驗

[開箱] Dell P2415Q 4K螢幕開箱