coverImage not working as a splash image or playlist icon

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create XML (or in-stream) Playlist of two or more video/audio files (set to 
autoPlay: false)
2. Assign a coverImage clip property to use as splash image
3. See the empty / black player, the coverImage is never displayed (unless you 
actually create a separate playlist item?)

What is the expected output? What do you see instead?

I would expect to be able to use coverImage as a splash image (and subsequently 
Playlist icons).
I see an empty player, since I am not able to use <a><img/></a> format with our 
dynamic XML playlists.

What version of the product are you using? On what operating system?

Flowplayer Commercial v3.2.7
OS X 10.7.3 / Firefox 11

Please provide any additional information below.

I've never really understood the logic around Flowplayer's solution to serving 
up a splash image for a given playlist entry. It almost seems like an 
afterthought? In fact, the current working methods I've seen are more of a 
hack, requiring you to increase your playlist size (offsetting original 
indexes, etc) by representing each splash image as a playlist entry (sometimes 
defining duration:0 ), and subsequent autoPlay: false for the actual intended 
video, etc.

Why can't coverImage on a given clip simply show the image? (when not set to 
autoPlay, of course) 

Don't get me wrong, I absolutely love Flowplayer -- the advanced API, and 
granular customization options. It's very powerful. JWPlayer (from 
longtailvideo.com), on the other hand, has done things exactly right when it 
comes to splash images / playlist icons, IMHO. They just work, and exactly as 
you'd expect.

The issue I'm facing is that we're using fully dynamic MRSS XML playlists. Each 
playlist entry represents a multimedia asset (video or audio), with the 
corresponding screenshot stored at the clip-level (e.g. fp:clip coverImage). 
Unfortunately, this coverImage only seems to apply to audio files, such as with 
mp3, but DURING playback. 

Does anyone have a patch or other solution that can circumvent having to 
manipulate the playlist entries in order to get a simple splash image to work 
directly from XML? (or inline playlist, for that matter)

I realize the other option is to use a nested IMG tag in the flowplayer HTML 
container, but that model is not well supported for dynamic XML playlists 
containing all the meta data, etc.

Further, I can't seem to find any built-in playlist menu with Flowplayer. I've 
used the HTML/JS plugin in the past, but that was using in-line playlists. Does 
anyone know if this supports XML playlists? Has anyone had success getting 
playlist icons to work, such as this: 

http://flowplayer.org/forum/4/68241

In a nutshell, is Flowplayer in any way capable of showing a coverImage for 
playlist items <em>without</em> having to be a playlist entry itself? If not, 
are there any plans to possibly support this?

Original issue reported on code.google.com by pixelchu...@gmail.com on 6 Mar 2012 at 8:49

[GoogleCodeExporter]

It's mainly used for audio or when setting the video to autoBuffering: true, 
autoPlay: false it will display the configured image. 

Please provide working example perhaps. 

I'm curious what you mean by playlist icon. What is it exactly that is not 
working for you ?  So you need the coverImage property to work the same for 
video correct ? 

audio files can be configured like so

{
   url: 'media/sound1.mp3', 
   title: 'song1', 
   duration: '01:30',
   coverImage: 'media/coverImage1.jpg',
   scaling: 'orig'
}

Original comment by dani...@electroteque.org on 7 Mar 2012 at 1:26

[GoogleCodeExporter]

Hi there is a feature available in the new version about to be released, it is 
documented here

http://flowplayer.github.com/demos/configuration/rss-playlist.html

<media:thumbnail url="/media/img/title/screens.png" />

If you configure this it will setup the splash for you. 

http://flowplayer-releases.s3.amazonaws.com/info/dist.html

The development files are available here to test. The official player will be 
released soon. 

Original comment by dani...@electroteque.org on 7 Mar 2012 at 1:37

[GoogleCodeExporter]

This is fantastic news! No, I did not mean to imply that I needed a "cover 
image" (per se), similar to how this feature is used for audio files. My basic 
point was to address a need for the ability to define a splash image (or 
subsequently a playlist icon image) using something like media:thumbnail -- 
tied to the clip -- and not requiring a separate playlist entry.

What you've posted above is _exactly_ what I was hoping for :)

Original comment by pixelchu...@gmail.com on 7 Mar 2012 at 5:05

[GoogleCodeExporter]

Very nice, I can confirm this is working exactly as I had hoped! This is so 
great :)

The one issue I am facing is that when using XML/MRSS playlist combined with 
the JS Playlist plugin from 
http://flowplayer.github.com/plugins/javascript/playlist.html, the HTML 
playlist generated is creating an extra entry linking to the splash image? 
(basically, whatever is referenced via <media:thumbnail> in the XML)

Is there anyway to suppress the media:thumbnail entry from showing up in the 
generated HTML playlist?

Original comment by pixelchu...@gmail.com on 7 Mar 2012 at 6:54

[GoogleCodeExporter]

Apparently this is tied directly to $f().getPlaylist(), which still creates a 
playlist entry for media:thumbnail (see alternating type="image" entries below)

[
    Object { index=0, media:thumbnail={...}, type="image", more...}, 
    Object { index=1, media:thumbnail={...}, netConnectionUrl="rtmp://[...]", more...}, 
    Object { index=2, media:thumbnail={...}, type="image", more...}, 
    Object { index=3, media:thumbnail={...}, netConnectionUrl="rtmp://[...]", more...}, 
    Object { index=4, media:thumbnail={...}, type="image", more...}, 
    Object { index=5, media:thumbnail={...}, type="video", more...}, 
    Object { index=6, media:thumbnail={...}, type="image", more...}, 
    Object { index=7, media:thumbnail={...}, type="video", more...}
]

That said, I'm not sure there is a currently a built-in way to easily support 
generated HTML playslists sourced via XML / MRSS with each clip containing an 
image / thumbnail reference...

Original comment by pixelchu...@gmail.com on 7 Mar 2012 at 7:40

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Nice, I found a solution that is working for me:

In flowplayer.playlist-3.2.8.js, change to the following within buildPlaylist() 
function, inside of the $.each() call: [approx. line 73]

if(typeof this['media:thumbnail'] == 'object' && this['media:thumbnail'].url == 
this.url ){
    wrap.append('<a style="display:none"></a>');
}
else wrap.append(toString(this));

This way, "wrap.append(toString(this));" only gets called when the 
media:content URL is not the same as media:thumbnail URL, otherwise a hidden 
<a> element is added instead in order to maintain playlist indices, etc. This 
works great for audio/video XML playlists. Now the generated HTML playlist only 
contains the relevant multimedia <items> from the XML!

The only issue I foresee with this solution would be if someone was using 
Flowplayer to serve up image files and they happened to be using XML playlists 
containing a media:thumbnail entry with the same value... media:thumbnail 
shouldn't be required for splash image since it should already load the same 
file already referenced via media:content URL, correct?

Original comment by pixelchu...@gmail.com on 8 Mar 2012 at 2:05

[GoogleCodeExporter]

Thanks very much may I please have your rss if possible to confirm this ? 

Original comment by dani...@electroteque.org on 9 Mar 2012 at 1:55

[GoogleCodeExporter]

My RSS is actual running on localhost, however I will mock one up for you to 
emulate the setup and post as XML for your review. 

Original comment by pixelchu...@gmail.com on 9 Mar 2012 at 2:00

[GoogleCodeExporter]

thanks very much , just configure with dummy urls if needed. 

Original comment by dani...@electroteque.org on 9 Mar 2012 at 9:27

[GoogleCodeExporter]

Any chance of your example rss ? 

Original comment by dani...@electroteque.org on 9 Mar 2012 at 11:29

[GoogleCodeExporter]

Sure, I will send over shortly.

Original comment by pixelchu...@gmail.com on 10 Mar 2012 at 12:36

[GoogleCodeExporter]

Here you go (see attached)

NOTE: I am having to still use coverImage so that I have a reference to the 
image file to merge into the HTML playlist for the icon to be showed with each 
playlist entry. I couldn't figure out how to easily get media:thumbnail url 
reference to work with the playlist template merge.

Original comment by pixelchu...@gmail.com on 10 Mar 2012 at 1:43

Attachments:

• multimedia.xml

[GoogleCodeExporter]

Let me have a look thanks. 

Original comment by dani...@electroteque.org on 12 Mar 2012 at 12:33

[GoogleCodeExporter]

Hi, unfortunately I see the problem, I will get back to you, there is an issue 
if the images are filtered out of the list due to the indexing. Will let you 
know. 

Thanks for the report. 

Original comment by dani...@electroteque.org on 12 Mar 2012 at 2:08

[GoogleCodeExporter]

hi there confirming video should be able to support the coverImage feature, 
this will display the image directly rather than being a playlist item. Moving 
to a feature request and will be pushed out with an urgent release. 

Original comment by dani...@electroteque.org on 13 Mar 2012 at 2:36

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Great news. Will XML playlists still be able to leverage the new 
media:thumbnail feature? Can either also be referenced in the JS Playlist 
plugin template? (E.g. splash image in player, playlist entry icon image in the 
video menu, etc)

Original comment by pixelchu...@gmail.com on 13 Mar 2012 at 2:52

[GoogleCodeExporter]

Hi there, media:thumbnail will likely be another feature request though I know 
what you are getting at. coverImage will make the image in the playlist 
redundant, therefore media:thumbnail most likely can be parsed as a thumbnail. 

Original comment by dani...@electroteque.org on 14 Mar 2012 at 2:32

[GoogleCodeExporter]

NOTE: My Patch above for flowplayer.playlist-3.2.8.js addresses the indexing 
issue by maintaining index association with a hidden anchor tag.

However, another issue I am seeing when combining coverImage / media:thumbnail 
(XML) with the Playlist plugin is that the buildPlaylist() is getting called 
twice. By removing buildPlaylist() call inside the if (!manual) claus, you can 
prevent the browser from throwing "404" error when trying to serve up Playlist 
HTML template containing a reference like <img src="${coverImage">, such as:

<a href="${url}"><img src="${coverImage}"/>${title}</a>

As long as you don't embed  the ^ above ^ in the HTML of your page (rather pass 
it via "template" property to playlist() function), you can prevent the 404. It 
seems commenting out the first buildPlaylist() is required to prevent it still 
this way, and the playlist still builds out as expected...not sure why it's 
being called twice, onPlaylistReplace seems to take care of it.

Original comment by pixelchu...@gmail.com on 27 Mar 2012 at 5:28

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I've identified an additional issue with media:thumbnail -- it is not honored 
when placed within <media:group> node, such as:

    <media:group>
        <media:content url="http://domain.com/video.mp4" type="video/mp4"/>
        <media:thumbnail url="http://domain.com/images/slpash.jpg" />
    </media:group>

<media:thumbnail> should be be accepted in either format. Even if you place 
media:thumbnail outside of media:group (against spec?), if media:group is 
present, media:thumbnail ceases to work.

Original comment by pixelchu...@gmail.com on 3 Apr 2012 at 10:51