{"id":3074,"date":"2011-10-21T18:26:12","date_gmt":"2011-10-21T22:26:12","guid":{"rendered":"http:\/\/richard.rathe.org\/?p=3074"},"modified":"2012-06-24T08:44:37","modified_gmt":"2012-06-24T12:44:37","slug":"video-script-that-degrades-gracefully","status":"publish","type":"post","link":"https:\/\/redmangrove.org\/rathe.org\/richard\/2011\/video-script-that-degrades-gracefully","title":{"rendered":"A Video Script That Degrades Gracefully"},"content":{"rendered":"

A few years ago I was looking for a clean way to embed mp4 video<\/strong> into my blog. Prior to HTML5<\/strong> the best approach was a\u00a0Flash-based video player<\/strong>. Of course there is no Flash on iPhones<\/strong> and similar devices. Plus many people avoid Flash because of bugs and security concerns. So I modified this script so it\u00a0defaults to JWPlayer when Flash is present<\/strong>…<\/p>\n

\"\"<\/p>\n

…but degrades gracefully into a screen shot linked to the mp4 when Flash is absent<\/strong>…<\/p>\n

\"\"<\/p>\n

…and displays the video in a separate window or helper app…<\/p>\n

\"\"<\/p>\n

[see the script in action<\/a>]<\/p>\n

The code appears below. You must replace all the “V_”\u00a0placeholders<\/strong> with specific information about the video. The path to the player software should be adjusted to match your configuration. The <div> ID should be unique<\/strong> on your site to prevent collisions. This setup assumes there is a jpg key frame file<\/strong> with the same V_NAME as the mp4. Make sure you adjust the size<\/strong> to suit your needs. I find that 320×240<\/strong> works well embedded in a content area 500-600 pixels wide. The actual mp4 is 640×480<\/strong>, which looks pretty good even when expanded to full screen.<\/p>\n

How does it work? Basically the script attempts to load the player and write the display code<\/strong> into the <div> container. If it fails, the default <div> contents are displayed instead<\/strong>\u00a0(key frame and link). <smile><\/p>\n

<script src=\"\/jw\/swfobject.js\" type=\"text\/javascript\"><\/script>\r\n\r\n<div id=\"V_DIV\" style=\"text-align: center;\">\r\n<a href=\"\/wp-content\/videos\/V_NAME.mp4\" target=\"_blank\">\r\n<img src=\"\/wp-content\/videos\/V_NAME.jpg\" alt=\"\" \/>\r\n<\/a><br \/>V_SIZE Mb Video\r\n<\/div>\r\n\r\n<script type=\"text\/javascript\"> var so = new SWFObject('\/jw\/player.swf','mpl','320','240','9');\r\nso.addParam('allowfullscreen','true');\r\nso.addParam('allowscriptaccess','never');\r\nso.addParam('wmode','opaque');\r\nso.addVariable('controlbar','over');\r\nso.addVariable('autostart','false');\r\nso.addVariable('file','\/wp-content\/videos\/V_NAME.mp4');\r\nso.addVariable('image','\/wp-content\/videos\/V_NAME.jpg');\r\nso.addVariable('title','V_TITLE');\r\nso.addVariable('author','V_AUTHOR');\r\nso.write('V_DIV');\r\n<\/script><\/pre>\n
[Note that if you cut and paste the code above you should remove most of the line breaks I added to make it display properly.]<\/p>\n","protected":false},"excerpt":{"rendered":"
A few years ago I was looking for a clean way to embed mp4 video into my blog. Prior to HTML5 the best approach was a\u00a0Flash-based video player. Of course there is no Flash on iPhones and similar devices. Plus many people avoid Flash because of bugs and security concerns. So I modified this script … Continue reading “A Video Script That Degrades Gracefully”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32,30],"tags":[],"class_list":["post-3074","post","type-post","status-publish","format-standard","hentry","category-programming","category-video"],"_links":{"self":[{"href":"https:\/\/redmangrove.org\/rathe.org\/richard\/wp-json\/wp\/v2\/posts\/3074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redmangrove.org\/rathe.org\/richard\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/redmangrove.org\/rathe.org\/richard\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/redmangrove.org\/rathe.org\/richard\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/redmangrove.org\/rathe.org\/richard\/wp-json\/wp\/v2\/comments?post=3074"}],"version-history":[{"count":22,"href":"https:\/\/redmangrove.org\/rathe.org\/richard\/wp-json\/wp\/v2\/posts\/3074\/revisions"}],"predecessor-version":[{"id":3076,"href":"https:\/\/redmangrove.org\/rathe.org\/richard\/wp-json\/wp\/v2\/posts\/3074\/revisions\/3076"}],"wp:attachment":[{"href":"https:\/\/redmangrove.org\/rathe.org\/richard\/wp-json\/wp\/v2\/media?parent=3074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/redmangrove.org\/rathe.org\/richard\/wp-json\/wp\/v2\/categories?post=3074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/redmangrove.org\/rathe.org\/richard\/wp-json\/wp\/v2\/tags?post=3074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}