Display videos in HTML5 for non Flash enabled browsers [#1111074]

I ran into a problem where Brightcove videos weren't being displayed in non flash enabled browsers (i.e. iPhone, iPad, etc.) using this module, but with raw pasted in text, they would. After playing around with the output created by the module (and spending a lot of time in BrightcoveExperience.js) in a plain HTML page, I was able to get the videos to display in HTML5. Here's the before and after:

Before:

<div id="media-brightcove-1" class="media-brightcove">
  <object id="media-brightcove-video-0" width="962" height="536" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0">
    <param name="movie" value="http://c.brightcove.com/services/viewer/federated_f9/799730532001?isVid=1&isUI=1&publisherID=59121" />
    <param name="bgcolor" value="#FFFFFF" />
    <param name="flashVars" value="videoId=837300752001&playerID=799730532001&domain=embed&" />
    <param name="base" value="http://admin.brightcove.com" />
    <param name="seamlesstabbing" value="false" />
    <param name="allowFullScreen" value="true" />
    <param name="swLiveConnect" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="wmode" value="opaque" />
    <embed src="http://c.brightcove.com/services/viewer/federated_f9/799730532001?isVid=1&isUI=1&publisherID=59121" bgcolor="#000000" wmode="opaque" flashVars="videoId=837300752001&playerID=799730532001&domain=embed&" base="http://admin.brightcove.com" name="flashObj" width="962" height="536" seamlesstabbing="false" type="application/x-shockwave-flash" allowFullScreen="true" swLiveConnect="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
  </object>
</div>

and after:

<div id="media-brightcove-1" class="media-brightcove"></div>   
  <object id="media-brightcove-video-0" class="BrightcoveExperience" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0">
    <param name="movie" value="http://c.brightcove.com/services/viewer/federated_f9/799730532001?isVid=1&isUI=1&publisherID=59121" />
    <param name="bgcolor" value="#FFFFFF" />
    <param name="width" value="962" />
    <param name="height" value="536" />    
    <param name="flashVars" value="videoId=837300752001&playerID=799730532001&domain=embed&" />
    <param name="base" value="http://admin.brightcove.com" />
    <param name="seamlesstabbing" value="false" />
    <param name="allowFullScreen" value="true" />
    <param name="swLiveConnect" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="wmode" value="opaque" />
    <param name="playerID" value="802303198001" />
    <param name="playerKey" value="AQ~~,AAAAAAAA5vE~,Eeb-O-20Rk-jlxdYAGz13MFmlwr5Y_Rn" />
    <param name="@videoPlayer" value="837300752001" />
    <embed src="http://c.brightcove.com/services/viewer/federated_f9/799730532001?isVid=1&isUI=1&publisherID=59121" bgcolor="#000000" wmode="opaque" flashVars="videoId=837300752001&playerID=799730532001&domain=embed&" base="http://admin.brightcove.com" name="flashObj" width="962" height="536" seamlesstabbing="false" type="application/x-shockwave-flash" allowFullScreen="true" swLiveConnect="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
  </object>

I've modified the preprocess and template files to generate this output (see attached patch), and it seems to be generating it properly, but I'm still not getting the video to render in the HTML5 player in Drupal the way I can on a plain page. If anyone can see what I might need to change, I would appreciate it.

Note, the patch above was created against 6.x-2.x-dev with the patch from #1071226: Echove PHP library no longer exists applied.

Thanks.

Comment	File	Size	Author
#6	media_brightcove_1111074-6.patch	5.19 KB	adamdicarlo
#5	media_brightcove_1111074-5.patch	5.04 KB	adamdicarlo
#3	brightcove_html5-1111074_3.patch	4.68 KB	frankcarey

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

wonder95 CreditAttribution: wonder95 commented 30 March 2011 at 23:42

OK, figured out that the issue was that the BrightcoveExperiences.js wasn't being added to the page. However, since the media_brightcove_video theme isn't outputting that

tag, and IIRC you can't add external JS files with drupal_add_js() in D6, it seems the only way to get the required js added is in hook_init(). If I add the tag to $output in the preprocess function, I still get the Flash warning, as if it isn't being loaded. Any suggestions for a better way to get it added?

Comment #2

pGustafson CreditAttribution: pGustafson commented 14 June 2011 at 15:52

We are also waiting for this to be fixed.

Comment #3

frankcarey CreditAttribution: frankcarey commented 29 September 2011 at 18:45

File	Size
brightcove_html5-1111074_3.patch	4.68 KB

This patch provides support for the Media Brightcove JS API by default and reformats the output to use it. It also adds support for the HTTPS version of the embed if the $_SERVER['HTTPS] == 'on'. You will probably want to apply the following patches before this one as well.

http://drupal.org/node/1151768#comment-4445738
http://drupal.org/node/1071226#comment-4257494
http://drupal.org/node/1071226#comment-4540244

Comment #4

frankcarey CreditAttribution: frankcarey commented 29 September 2011 at 18:45

Status:

Active

» Needs review

Comment #5

adamdicarlo CreditAttribution: adamdicarlo commented 12 September 2012 at 02:29

File	Size
media_brightcove_1111074-5.patch	5.04 KB

Awesome! It applies to 6.x-1.x as well! (After applying the Replace Echove patch.)

One issue - all the drupal_set_html_head() calls get called as many times as there are videos on the page. I re-rolled with a fix for that, also a simplification of the http-or-https-in-script-tag -- isn't "//foo.bar/baz.js" acceptable?