如何把 YouTube 720P 影片嵌入到自己的網站或 blog 中?

目前 YouTube 16:9 720P 影片播放只做半套的問題,也在這裡出現了。以 YouTube 影片區的右邊所提供的嵌入碼來說,直接複製使用的結果,是在你的網站中嵌入一個 4:3 的播放介面,不是 16:9,而且是「一般品質」,不是「高品質」,更不是 720P,所以該怎麼做呢?就是要自己小改一些地方啦!拿以下這段程式碼來做範例,這是 YouTube 提供的原始碼:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com
/v/kvT7Sqfnyok&hl=zh_TW&fs=1">param><param name="allowFullScreen" value="true">
param><param name="allowscriptaccess" value="always">param><embed
src="http://www.youtube.com/v/kvT7Sqfnyok&hl=zh_TW&fs=1" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="425" height="344">embed>object>

我們要修改的地方有二:

  1. 播放器介面的長寬比,我建議與 YouTube 介面相同,採用寬 640×360,但是還要額外加上 YouTube 下面的播放器介面高度是 25,所以是 640×385,注意有兩處要修改。
  2. 出現網址的最後方,添加&ap=%2526fmt%3D22參數,同樣注意也是有兩處要修改。

所以整段程式碼會變成這樣:

<object width="640" height="385"><param name="movie" value="http://www.youtube.com
/v/kvT7Sqfnyok&hl=zh_TW&fs=1&ap=%2526fmt%3D22">param><param name="allowFullScreen" value="true">
param><param name="allowscriptaccess" value="always">param><embed
src="http://www.youtube.com/v/kvT7Sqfnyok&hl=zh_TW&fs=1&ap=%2526fmt%3D22" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="640" height="385">embed>object>

把這段改過的程式碼放到您的網站中,就可以嵌入一個 16:9 正確比例的播放器,而且播放的是 720P 的影片了。

如果你發現,沒有添加額外的參數前,可以看到模糊的一般品質影片,但是添加參數後嵌入自己的網站,卻跟你說沒有這段影片的話,那就是沒有產生對應的 720P 版本,這時候只好放棄嵌入 720P 的念頭,或者回頭參考我剛才提的影片格式問題,換用其他編碼後重新 upload 一次看看了。

如果您的網站或 blog 的頁面更寬大,不想只是呈現 640×360 的解析度的話,請自行計算更大的 16:9 解析度,例如 704×396960×540,最後在高度這邊再加上 25 就剛剛好了;此外也別忘記要考慮一般人來瀏覽您網站時的常見寬度,嵌入 1280×720 在技術上當然是可以,只是這可能會撐破不少人的螢幕,也可能撐破了您自己 blog 的外觀,而得到了反效果。

arrow
arrow
    全站熱搜

    Lein 發表在 痞客邦 留言(3) 人氣()