Using JWPlayer for HTML5 (for IPad) with Flash as a fallback with AVPlayer

mw · **Posted:** Tue Nov 23, 2010 2:47 am

I have recieved quite a few request for IPad support in AVPlayer, so
Since JW Player has started to support HTML5 and video can be presented for the IPad/Iphone and Ipod as well as using Flash for a fallback for other Browsers , I thought I would setup a new "Player" for AVPlayer (http://dev.cmsmadesimple.org/projects/avplayer)

1.Download the new JW Player : http://www.longtailvideo.com/players/jw-flv-player/
2.Upload it to your webserver somewhere like "uploads/jwplayer
3.Add it as a "player" in avplayer.
4.Too add parameters, see: http://www.longtailvideo.com/support/jw ... tup-wizard
Optional:
Download skins for JW Player here: http://www.longtailvideo.com/addons/skins
And add the skin as a parameter, IE: &skin=uploads/jwplayer/skins/beelden.zip

in AVPlayer (prior to 1.3) as a final_template :

Code:

<video
    src="{root_url}/uploads{$item->mediafile}"
    height="{$item->parent_object->height}"
   width="{$item->parent_object->width}"
    id="container"
    poster="{root_url}/uploads{$item->picture}"
    skin="{root_url}/uploads/jwplayer/skins/beelden.zip" >
   <!-- flash fallback -->
   <embed
   src="{root_url}/{$item->parent_object->location}" 
   width="{$item->parent_object->width}"
   height="{$item->parent_object->height}"
   allowscriptaccess="always"
   allowfullscreen="true"
   id="player1"
   name="player1"
   flashvars="file={root_url}/uploads{$item->mediafile}{$item->parent_object->parameters}"/>
</video>

in AVPlayer 1.3 final template:

Code:

{if $item->parent_object->userdefined1_namevalue!=""}

{assign var="skin" value="uploads/jwplayer/skins/"}
{/if}

<video controls width="{$item->parent_object->width}"
height="{$item->parent_object->height}"
poster="uploads{$item->picture->filepath}"
skin="{$skin}{$item->parent_object->userdefined1_namevalue}">  
<source src="{root_url}/uploads{$item->mediafile->filepath}" type="video/mp4" />  
<!--flash fallback -->
<embed
   src="{$item->parent_object->location}" 
   width="{$item->parent_object->width}"
   height="{$item->parent_object->height}"
   allowscriptaccess="always"
   allowfullscreen="true"
   id="player1"
   name="player1"
   flashvars="file={root_url}/uploads{$item->mediafile->filepath}{$item->parent_object->parameters}&skin={root_url}/{$skin}{$item->parent_object->userdefined1_namevalue}"/>
 </video>  

the above template is making use of the "Userdefined1" field to hold the name of the skin.

Using the MP4 file format, this has been tested to work with: IE8,Firefox 3.08, Ipad,IPod,IPhone.

for other browsers refer to : http://camendesign.com/code/video_for_e ... /test.html

I have uploaded a "how to" pdf in the AVPlayer file area.

sorry I should have mentioned: This has been tested on CMSMS version 1.8.6 and version 1.9

seensite · **Joined:** Sun Feb 10, 2008 7:36 pm **Posts:** 173

Great, that's what I needed!

Does it work on 1.9 - 1.9.1 ? I'll try it, thanks

map_1961 · **Posted:** Fri Dec 03, 2010 5:20 pm

Hi Martin - hi there.

Thank you so much for this effort to implement mp4 into avplayer. It is the demand of the time to make this change possible.

1. I tried this as described in my geekmoot2010.mp-p.net installation using mle-cmsms 1.8.2 (no further mle version will be released - so i can't update to 1.9.x anyway).

2. Then i changed action.browsefiles.php in order to be able to add a mp4 file to the avplayer media list.

3. Adding the media i choose the jwplayer.swf related player called mp4player and added a startimage like i am used to do using avpalyer module with flv files.

4. I call the mudole using this tag:

Code:

{cms_module module='avplayer' alias='meintiermp4' finaltemplate='mpp-mp4-final_template' lang="en_US }

4. The results are like this:
http://geekmoot2010.mp-p.net/en_US/media/alias/
... in various browers it does not work...
IE 7 & 8 : no startimage but playing video (i belive using flash fallback)
Opera 10 : showing startimage - video not running
Firefox 3.8.x: showing startimage - video not running
Google Chrome: showing startimage AND running video but using different skin - i think chrome uses its own player

5. The result is the same with and without pretty url. I even upgraded another single lingual system to 1.9.1 trying it the same way .... and even there the result is the same. Please refer to:
http://www.mp-p.eu/mp4/
or
http://www.mp-p.eu/flv/.

6. jwplayer.swf is located in ../modules/avplayer/player/jwplayer.swf

7. Skins are lokated in ../modules/avplayer/player/skins

8. Here ist the mp4-final-template:

Code:

  
{if $item->parent_object->userdefined1_namevalue!=""}

{assign var="skin" value="modules/avplayer/player/skins/"}
{/if}

<video controls width="{$item->parent_object->width}"
height="{$item->parent_object->height}"
poster="uploads{$item->picture->filepath}"

skin="{$skin}{$item->parent_object->userdefined1_namevalue}">  
<source src="{root_url}/uploads{$item->mediafile->filepath}" type="video/mp4" />  
<!--flash fallback -->
<embed
   src="{$item->parent_object->location}" 
   width="{$item->parent_object->width}"
   height="{$item->parent_object->height}"
   allowscriptaccess="always"
   allowfullscreen="true"
   id="player1"
   name="player1"
flashvars="file={root_url}/uploads{$item->mediafile->filepath}{$item->parent_object->parameters}&skin={root_url}/{$skin}{$item->parent_object->userdefined1_namevalue}"/> </video> 

Maybe someone has an idea what's wrong...
And many greetings 2 Courtenay....

Yours

map_1961

mw · **Posted:** Sat Dec 04, 2010 5:45 pm

Hi Martin!
I checked out the links you provided and yes I agree there is definitely an issue with different browsers and what they are capable of.
if you look at the source of: http://camendesign.com/code/video_for_e ... /test.html
he has provided a different type of video for different browsers.
the most common being MP4 which seems to play with IE 7 and FF 3.08.
(I played the video on your site with FF 3.08)

so unless one is prepared to upload a variety of file formats to support each browser we are stuck with the kind of results you got.

Thanks for mentioning the addition to "action.browsefiles.php" I totally forgot to upload that change.

cheers
Martin

pixelita · **Posted:** Mon Jan 03, 2011 5:50 pm

This is very timely. I've just been asked to port a site to CMSMS and it relies heavily on flash movies for each section of the site. I will be bookmarking this thread. Those other CMSes out there better watch out. CMSMS has got its steel-toed boots on!

patrickpowerlight · **Joined:** Tue Mar 15, 2011 5:58 pm **Posts:** 4

I'm tried to find a little more documentation on setting up the jwplayer inside of AVplayer. I've got the window to load, but somewhere the parameter passes are wrong. Here's the webpage:

http://www.powerlight-studios.com/test

Anyone have a method that's working on the base template that they'd be willing to share?

-----
Outside of CMS in a simple htlm file, this method plays on iPad, Chrome, FF, and IE beautifully.
=================
div id="container">Loading the player...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "/jwplayer/player.swf",
file: "/images/video/PLAAnimationReel-desktop.m4v",
image: "/images/video/PLAAnimationReelExports-poster.jpg",
height: 480,
width: 640
});
</script>
=====================

Using JWPlayer for HTML5 (for IPad) with Flash as a fallback with AVPlayer

Who is online