網際網路‎ > ‎

HTML5

Youtube現在可以直接用iframe內嵌囉~

張貼者:2010年7月28日 下午7:31Wei-Chang Lin   [ 已更新 2010年7月28日 下午7:33 ]

來源:http://feedproxy.google.com/~r/techbang/~3/6WyuC8c4zAQ/3173-youtube-embedded-code-on-a-new-line

新的YouTube嵌入碼拋棄了原有的JavaScript形式,直接採用HTML中的<iframe>標 籤來插入影片。新的Youtube嵌入碼長得像這樣:

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"> </iframe>

雖然現在一般使用者還沒辦法直接從YouTube的網頁上取得這種影片嵌入碼,不過你只要將YouTube的影片ID放入「VIDEO_ID」的位 置,然後直接放在你的部落格上就可以了。

新版嵌入碼可以讓你的使用者依自己的設定,選擇看到哪一種格式的影片。如果你的使用者加入了YouTube HTML5測試, 那它就會看到HTML5的播放器;如果沒有加入,那他就會看到Flash版的播放器。影片插入後如下:

另外,你也可以用另一種方式來插入播放列表:

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/p/PLAYLIST_ID" frameborder="0"> </iframe>

---------------------------------這麼棒~最大問題是什麼?就是iframe不是標準的XHTML啦------------------------------------------

HTML5的相關應用

張貼者:2010年5月24日 上午6:51Wei-Chang Lin   [ 已更新 2010年5月24日 上午7:03 ]

    1.    http://html5demos.com/              Demos and Examples,包含HTML5標籤各項技術的支援瀏覽器速查表!!       
    2.    http://mugtug.com/sketchpad/    輕量級讀取速度的HTML 5繪圖軟體,好用到我都想哭了T.T
    3.    http://html5gallery.com/              HTML 5範例網站收集
    4.    http://html5tutorial.net/               就是HTML 5的tutorial啦!
    5.    http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html   一個日本人寫的站台,可以測試HTML 5+CSS3的支援度.

使用HTML5的影片播放

張貼者:2010年5月24日 上午6:09Wei-Chang Lin   [ 已更新 2010年5月24日 上午6:19 ]

參見原文連結 http://www.inside.com.tw/05/08/how-to-use-html5-video-playback

簡單來說,統統瀏覽器一次打死的方案就是
<video width="640" height="480" poster="_YOUR-POSTER_PATH_.JPG" controls>
<source src="_YOUR-FILE-PATH_.mp4" type="video/mp4"></source>
<source src="_YOUR-FILE-PATH_.ogv" type="video/ogg"></source>
<object width="640" height="480" type="application/x-shockwave-flash" data="_DO-YOUR-FLASH-EMBEDED">
</object>
</video>

注意事項:
第一行.mp4的是H.264格式,.ogv的是OGG格式,
object標籤後面主要是外掛的影片檔案,也可以改用YouTube、Vimeo等外嵌程式片段.最後一行是給沒有辦法支援html5的瀏覽器用的(你/妳的家人與同事,誰會記得要更新瀏覽器呢?XD)



1-3 of 3