Jerome's Blog

  • 11:29:20 pm on December 20, 2006 | # |

    English Version

    前言

    Satay （沙嗲）是吃的，satay 法則是一種在網頁中嵌入 flash 影片的方法，特色是合法（可以通過 W3C HTML validator）、簡單（句法很短，不需要 javascript）、通用（幾乎所有瀏覽器都支援）。

    把 Youtube、Google Video、Yahoo Video 的影片放上網頁現正流行。把影片貼上網頁的方法則是使用由上述網站提供的語法，把 flash video player 寫進部落格或是網頁中。而網頁所供應的語法中，多摻入了 <embed> 標籤。

    問題是，由於 <embed> 並非 W3C 認可的合格語法，注射了 <embed> 語法的網頁就再也通不過 HTML validator。有沒有辦法可以讓 HTML 標準的擁護者可以把 Youtube 等影片合格地放上網頁呢？

    2002 年十一月 A List Apart 介紹了 flash satay 法，利用 type=”application/x-shockwave-flash” 使鑲嵌在網頁中的 flash 影片可以成功地被所有瀏覽器讀取，再加上一個 container flash loader 使 flash 影片可以串流播放，更重要的是完全符合 W3C 規範。

    在 2005年八月accessibility 的文章比較了各種能通過 HTML Validator 的 flash 鑲嵌法，其中 flash satay 依然是最為簡潔的方案，唯一美中不足的是無法正常的被 JAWS 讀取。JAWS 是為視力障礙者設計的螢幕閱讀器，可以念出螢幕上的字句。

    出於對 Flash Satay 的喜愛，我寫了我的第一個 WordPress Plugin：SatayTube。

    下載

    使用

    1. 把 sataytubeXX.zip 解壓縮；
    2. 把解開的 sataytube.php 上傳到 wp-content/plugins/；
    3. 再後台啟用。

    用途

    1. 自動辦識由 Youtube、Google Video、Yahoo Video 提供的鑲嵌語法，將之轉換成 flash satay 的鑲嵌語法。
    2. 自動加上 alternative content，當訪客的瀏覽器沒有安裝 flash player 時，不會看到一個叉燒包，而會看到替代圖片。

    注意事項

    1. 如果您不是遵守 HTML 標準的偏執狂、或您使用 rich editor，那麼您不需要安裝這個 plugin。
    2. 在正常的情形下，應該完全感受不到這個 plugin 在運作。
    3. 唯二可以發現 plugin 在執行的方法是 a. 使用沒有安裝 flash player 的瀏覽器，b. 把您的網頁去餵 HTML validator。
    4. 如果 Youtube、Google Video、Yahoo Video 改變了其影片的鑲嵌語法，這個 plugin 可能會失效，如果各位發現了這類的問題，麻煩請立刻告訴我。
    5. 關於 alternative image，我原本打算做一個 random dots 3d stereogram，中間可以浮現一個 flash 的商標，可是我找遍了工具都做不出來，拜託各位能人做一張給我吧！

    English Version

    Introduction

    Flash Satay is a method to embed flash movie into HTML document. It is not only W3C valid, but also supported by almost all browsers. SatayTube is a wordpress plugin which can automatically transfer the codes provided by Youtube, Google Video, Yahoo Video, or Brightcove.com into Flash Satay format. A custom alternative picture would be shown up if the adobe flash player is not installed.

    Requirement

    WordPress 2.0-2.2

    Download

    Installation

    1. Download and extract the sataytubeXX.zip
    2. Upload the sataytube.php to wp-content/plugins/
    3. Activate it from admin panel.

    Usage

    1. Setup the URL to custom alternative picture at Option-> SatayTube menu. (Optional)
    2. Just copy and paste the embed code provided by Youtube, Google Video, Yahoo Video, or Brightcove.com into your post, no special tags needed.

    Change Log

    • v1.6 Support videos hosted on Brightcove.com
    • v1.5 Restore RSS and Atom feed
    • v1.1 Rewrite the RegExp
    • v1.0 Removal of default alternative image, add option page for custom alternative image
    • v0.1 The initial version
     

Comments

  • Dint 8:52 pm on March 25, 2007 | #

    When using this plugin I get white borders around my YouTube videos, how can this be fixed?

  • Jerome 9:56 am on March 26, 2007 | #

    Dear Dint,
    I have visited your website, but I could not see the “white border”. (I tried both firefox and IE7).
    Generally, the output of Sataytube contains no border information at all, the border of an embed object should be defined in your CSS file.

  • WP Plugins DB » Blog Archive » SatayTube 3:56 pm on May 20, 2007 | #

    [...] Visit [...]

  • SatayTube — My Favorite Wordpress Plugin » Oliver Hansen 12:30 pm on July 6, 2007 | #

    [...] modify the embed tags that youtube and others give you but I thought there must be an easier way. Satay Tube allows you to just paste in the URL from one of many video sharing sites and it will convert the [...]

  • WP Plugins DB » Plugin Details » SatayTube 4:11 pm on August 11, 2007 | #

    [...] Visit [...]

  • 10 video embedding plugins for WordPress » Webdesign Archive 3:54 am on August 22, 2007 | #

    [...] SatayTube SatayTube is a wordpress plugin which can automatically transfer the codes provided by Youtube, Google Video, Yahoo Video, or Brightcove.com into Flash Satay format. A custom alternative picture would be shown up if the adobe flash player is not installed. [...]

  • Tube 11:33 pm on September 8, 2007 | #

    Really easy to use and efficient! Thank you! :-)
    I use it for a blog with my tennis club, not on my personal blog yet :p

  • Wordpress Plugin List And Set-Up | Blogger Unleashed 10:36 pm on January 17, 2008 | #

    [...] related entries based on active/passive keyword matches. By Alexander Malov & Mike Lu.   SatayTube 1.6 Add hosted flash videos into your blog using satay method, silently. Just copy and paste the codes [...]

  • Video, Music, Podcasts, Audio, and Multimedia WordPress Plugins « Lorelle on WordPress 8:37 am on March 13, 2008 | #

    [...] SatayTube WordPress Plugin [...]

  • » Blog Archive » Best Wordpress Plugins 6:41 am on March 23, 2008 | #

    [...] SataTube – Embed a flash movie into a HTML document. [...]

  • [Wordpress Plugin Series] Video, Música, Podcasts, Multimedia, Audio e outros | Wordpress Love - Themes, Plugins e tudo para Wordpress, em Português 12:03 am on July 23, 2008 | #

    [...] SatayTube WordPress Plugin  [...]

  • YouTube Vidoes! 1:03 am on August 11, 2008 | #

    Thanks to the article, Now there is more reason to comment than ever before! Everyone should participate. I am incorporating what your wrote to our project!

  • Harry 1:46 pm on August 15, 2008 | #

    Good info. bookmarked.

  • alan "canary rental" redman 9:41 pm on November 2, 2008 | #

    Very helpful info.Thanks:)

  • hustler 5:35 am on March 30, 2009 | #

    Very useful and bookmarked :0

  • Hustler VOD 5:36 am on March 30, 2009 | #

    thanks for the excellent info

  • The Hotel Box 3:31 am on April 6, 2009 | #

    This is an excellent tool.

    Thank you very much

  • Alice Hall 8:39 pm on April 21, 2009 | #

    Thanks for the helpfull information.

  • Homy 10:34 pm on May 20, 2009 | #

    Thank you so much. I’ll try to use this one.

  • johnny 5:24 pm on June 1, 2009 | #

    Hi i am johnny,
    thanks for helpfull info, i am new user.

    bye again

  • Sportbekleidung Knobi 3:01 am on June 7, 2009 | #

    Thank you for the Information

  • Craigslist Phone Verified Accounts 8:58 pm on June 13, 2009 | #

    Nice one. I have stumbled and twittered this for my friends. Others no doubt will like it like I did.

  • Hosting 11:04 pm on June 16, 2009 | #

    verry nice thnx

  • hkdedicatedhosting 11:39 am on June 17, 2009 | #

    Thank you for the Information. it’s good article

  • 迷你倉 6:26 pm on June 17, 2009 | #

    This is an excellent tool.

    Thank you very much

  • newsbook 9:42 am on June 19, 2009 | #

    Thanks for sharing your experience!

  • timemini 9:43 am on June 19, 2009 | #

    WordPress is everything. Thanks.

  • oyUn 2:29 am on June 23, 2009 | #

    modify the embed tags that youtube and others give you but I thought there must be an easier way

  • Sophie Elise 5:26 pm on June 24, 2009 | #

    I think this will be helpful on my website. Hope you could visit my homepage. Thanks.

  • cold sores 11:58 pm on July 20, 2009 | #

    learn more from you.thanks

  • Dloadmp3 2:10 am on August 1, 2009 | #

    now… this is what called an award winning post!

  • Patricia "autogobierno ayllu " Rondan 2:10 am on August 30, 2009 | #

    An easier way to change youtube

  • Patricia "directorio cusco " Rondan 2:13 am on August 30, 2009 | #

    Many of my colleagues do not understand but people understand that if successful with me.

  • Kaffeevollautomaten 9:20 am on November 1, 2009 | #

    thanks, your article is very informative.

  • gretel 2:27 am on November 3, 2009 | #

    perfect. thanks

  • Sushi 11:58 pm on November 3, 2009 | #

    Nice plugin and easy to use. Thanks for your work!

  • fast software 6:38 am on November 6, 2009 | #

    Thanx for the blog its very useful

  • DVD Rohlinge 2:38 am on November 7, 2009 | #

    Really easy to use and efficient! Thank you! :-)
    I use it for a blog with my tennis club, not on my personal blog yet :p

  • panico brasil 3:48 am on November 11, 2009 | #

    thanks guy

  • Biggi 3:52 am on November 19, 2009 | #

    an easy way to get move(ies) in the blog running – great tool! thanks!

  • Berufsbekleidung 4:42 am on December 11, 2009 | #

    Many of my colleagues do not understand but people understand that if successful with me.

  • JohnG 12:09 am on December 28, 2009 | #

    Really useful post. Bookmarked this one.

  • wordpress guru 3:53 am on January 22, 2010 | #

    nice post i loved that one

  • Gouri 10:48 am on May 18, 2010 | #

    Great Plugin! Planning to use it on my blog.

  • bidding 7:35 pm on June 9, 2010 | #

    thanks for sharing such a wonderful tool now i will be able to play movies on my blog yahoooo…

  • QNET 1:59 pm on June 11, 2010 | #

    Hey this is Great post & thanks for sharing with us.

  • Cool Video Wordpress plugins for free | cool-wordpress.com 2:35 pm on July 26, 2010 | #

    [...] format. A custom alternative picture would be shown up if the adobe flash player is not installed. http://jerome.zh-tw.org/archives/151 Self-Hosted Video WordPress [...]