Enabling HTML5 for Blipblip.tv in WordPress plugin Video Sidebar Widgets

1 minute read

The problem

Visiting my blog from a tablet I noticed that theBlip.Tv videos I set in _Video Sidebar Widgets _were not shown. Doing a research I realized the plugin loaded the old flash-based player  instead of the HTML5 version, so videos coudn’t be played from mobile devices with not flash support, which are the majority of the handheld systems nowadays.

The solution

I just had to add some conditionals in files helper-functions.php and class-videosidebarwidget.php to consider the Blipblip.tv case and thus I added the HTM5 player. In particular, I added the following lines to helper-functions.php:

elseif($admin=="true"){
 if($source == "Blip"){
 echo "\n<iframe src=\"$value.html?p=1\" width=\"250\" height=\"250\" 
 frameborder=\"0\" allowfullscreen>
 </iframe> 
 
 <embed type=\"application/x-shockwave-flash\" src=\"http://a.blip.tv/api.swf#$v_id2\" 
 style=\"display:none\">
 </embed>\n\n"; 
 }else{ 
 // echo video in admin
 echo "\n<object width=\"212\" height=\"172\">\n";
 echo $flashvar;
 echo "<param name=\"allowfullscreen\" value=\"true\" />\n";
 echo "<param name=\"allowscriptaccess\" value=\"always\" />\n";
 echo "<param name=\"movie\" value=\"$value\" />\n";
 echo "<param name=\"wmode\" value=\"transparent\">\n";
 echo "<embed src=\"$value\" type=\"application/x-shockwave-flash\" wmode=\"transparent\" ";
 echo "allowfullscreen=\"true\" allowscriptaccess=\"always\" ";
 echo $flashvar2;
 echo "width=\"212\" height=\"172\">\n";
 echo "</embed>\n";
 echo "</object>\n\n";
 }
}else{

And in file class-videosidebarwidget.php I edited the below code:

<br class="Apple-interchange-newline" /> case 'Blip':
 $rv_value = "http://blip.tv/play/$Embed_id";
 <strong>$rv_flashvar</strong> = "";
 $rv_flashvar2 = "";
 $rv_cap = $Embed_cap;

And I added the following lines:

if($select_source == "Blip"){ 
 echo "\n&lt;iframe align=\"left\" src=\"$rv_value.html?p=1\" width=\"$RV_width\" height=\"$RV_height\" 
 frameborder=\"0\" allowfullscreen&gt;
 &lt;/iframe&gt;
 
 &lt;embed type=\"application/x-shockwave-flash\" src=\"http://a.blip.tv/api.swf#$Embed_id\" 
 style=\"display:none\"&gt;
 &lt;/embed&gt;\n\n";
}else{
 echo "\n&lt;object width=\"$RV_width\" height=\"$RV_height\"&gt;\n";
 echo $rv_flashvar;
 echo "&lt;param name=\"allowfullscreen\" value=\"true\" /&gt;\n";
 echo "&lt;param name=\"allowscriptaccess\" value=\"always\" /&gt;\n";
 echo "&lt;param name=\"movie\" value=\"$rv_value\" /&gt;\n";
 echo "&lt;param name=\"wmode\" value=\"transparent\"&gt;\n";
 echo "&lt;embed src=\"$rv_value\" type=\"application/x-shockwave-flash\" wmode=\"transparent\" ";
 echo "allowfullscreen=\"true\" allowscriptaccess=\"always\" ";
 echo $rv_flashvar2;
 echo "width=\"$RV_width\" height=\"$RV_height\"&gt;\n";
 echo "&lt;/embed&gt;\n";
 echo "&lt;/object&gt;\n\n";
 }
 if(!empty($rv_cap)){echo "&lt;p class=\"VideoCaption\"&gt;$rv_cap&lt;/p&gt;\n\n";};
 
 
 echo $after_widget;
 }

After these changes random HTM5 videos are loaded without problems.

Plugin support

By the way, I tried to contact the plugin developer to include these changes and he said he had not time for doing it. It a shame it’s not open-sourced so somebody else can maintain the code.

Leave a Comment