• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 6 posts ] 
Author Message
 Post subject: Using JWPlayer for HTML5 (for IPad) with Flash as a fallback with AVPlayer
PostPosted: Tue Nov 23, 2010 2:47 am 
Offline
Forum Members
Forum Members

Joined: Mon Aug 25, 2008 8:38 pm
Posts: 159
Location: Comox Valley, BC, Canada
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


Last edited by mw on Tue Nov 23, 2010 8:33 pm, edited 1 time in total.

Top
 Profile  
 
 Post subject: Re: Using JWPlayer for HTML5 (for IPad) with Flash as a fallback with AVPlayer
PostPosted: Tue Nov 23, 2010 6:51 am 
Offline
Forum Members
Forum Members
User avatar

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

_________________
The universe of information technology is constantly growing and contains only emerging products built on successive patches


Top
 Profile  
 
 Post subject: Re: Using JWPlayer for HTML5 (for IPad) with Flash as a fallback with AVPlayer
PostPosted: Fri Dec 03, 2010 5:20 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Apr 20, 2007 7:26 pm
Posts: 235
Location: Ruhrstadt
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

_________________
map_1961


Last edited by map_1961 on Fri Dec 03, 2010 5:36 pm, edited 1 time in total.

Top
 Profile  
 
 Post subject: Re: Using JWPlayer for HTML5 (for IPad) with Flash as a fallback with AVPlayer
PostPosted: Sat Dec 04, 2010 5:45 pm 
Offline
Forum Members
Forum Members

Joined: Mon Aug 25, 2008 8:38 pm
Posts: 159
Location: Comox Valley, BC, Canada
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


Top
 Profile  
 
 Post subject: Re: Using JWPlayer for HTML5 (for IPad) with Flash as a fall
PostPosted: Mon Jan 03, 2011 5:50 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Sun Sep 16, 2007 3:07 am
Posts: 342
Location: Houston, Texas USA
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! :D


Top
 Profile  
 
 Post subject: Re: Using JWPlayer for HTML5 (for IPad) with Flash as a fall
PostPosted: Tue Mar 15, 2011 6:11 pm 
Offline
New Member

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>
=====================


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 6 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting