Flowplayer: problem with playlist on iPad

Webmaster Discussion
#1

I’ve installed Flowplayer on a few web pages with the iPad plugin, which works fine when I leave the configuration alone. But when I use a playlist with a picture first, as a splash screen (as shown in the code below) the video will no longer play on the iPad.

<script src="/library/flowplayer/flowplayer.ipad-3.2.11.js"></script><a id="player" style="display:block;width:900px;height:506px;"
href="{movie_file}"></a>
<script language="JavaScript">
  $f("player", "/library/flowplayer/flowplayer-3.2.14.swf", {
    plugins:  {
        controls:  {
            backgroundGradient: 'none',
            backgroundColor: 'transparent'
        }
    },
    playlist: [
     {
         url: "{movie_preview_img}",
         scaling: 'orig'
     },
     {
         url: '{movie_file}',
         autoPlay: false,
         autoBuffering: true
     }
    ]
  }).ipad();
</script>

Is there some way I can make this work?

#2

Re: Flowplayer: problem with playlist on iPad

Did you try something like


         url: '{movie_file"],
         autoPlay: false,
         autoBuffering: true,
         thumbnail: "{movie_preview_img}",
         scaling: 'orig'

Or something like that, sticking them into one array instead of two? Your code looks to me like it defines just the thumbnail as the playlist item, then the URL as a second one…

#3

Re: Flowplayer: problem with playlist on iPad

Why don’t you put the preview image as the background-url in a href line instead of using a playlist. Thats what we do on our sites. We have a preivew image and a button on top of it, then click to the video.

Jimmy

#4

Re: Flowplayer: problem with playlist on iPad

[QUOTE=romancexcore;119817]Did you try something like


         url: '{movie_file"],
         autoPlay: false,
         autoBuffering: true,
         thumbnail: "{movie_preview_img}",
         scaling: 'orig'

Or something like that, sticking them into one array instead of two? Your code looks to me like it defines just the thumbnail as the playlist item, then the URL as a second one…[/QUOTE]

I’ll give this a go, but the reason I did it like I have is because it says to do this in the documentation:

http://flowplayer.org/demos/configuration/playlist-splash.html

flowplayer("player","http://releases.flowplayer.org/swf/flowplayer-3.2.14.swf",{
 
  [I]// here is our playlist with two clips[/I]
  playlist: [
 
      [I]// this first PNG clip works as a splash image[/I]
     {
         url: "/media/img/title/screens.png",
         scaling: 'orig'
     },
 
     [I]// second clip is a video. when autoPlay is set to false the splash screen[/I]
     [I]// will be shown[/I]
     {
         url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv',
         autoPlay: [B]false[/B],
 
         [I]// video will be buffered when splash screen is visible[/I]
         autoBuffering: [B]true[/B]
     }
  ]
});

I’ll let you know how I get on with your suggestion. Thanks!

#5

Re: Flowplayer: problem with playlist on iPad

[QUOTE=Nicedreams;119818]Why don’t you put the preview image as the background-url in a href line instead of using a playlist. Thats what we do on our sites. We have a preivew image and a button on top of it, then click to the video.

Jimmy[/QUOTE]

I don’t want to have to do any coding to get the thumbnail the user uploads to have a play button attached it it, and I can’t rely on the user to put the play button in exactly the right place on the thumbnail they upload. Or did you mean something else?

When I’ve used backgroundImage it loads that in the canvas and still a black background appears in front.

#6

Re: Flowplayer: problem with playlist on iPad

Using thumbnail and putting it into one playlist item didn’t work unfortunately. What it does is load the player with no splash image at all.

#7

Re: Flowplayer: problem with playlist on iPad

The play button is separate from the preview image. Just using css to place it on top of the player.

Here’s the code we use with the preview image with the button on top of it.

<html>
<head>
<title></title>
<style type="text/css">
<!--
a.myPlayer{display:block;width:640px;height:360px;padding:0;margin:0;border:6px solid black;}
a.myPlayer img{margin-top:142px;margin-left:295px;border:0;}
-->
</style>
</head>
<body>

<script type="text/javascript" src="http://www.18andupstuds.com/previewer/js/flowplayer-3.1.4.min.js"></script>

<div id="flv">
<a class="myPlayer" href="http://www.18andupstuds.com/images/previews/NDE313/NDE313-previewclip_640.mp4" style="background-image:url('http://www.18andupstuds.com/images/previews/NDE313/NDE313-previewclip_640.jpg')"><img src="http://www.18andupstuds.com/previewer/play.png" width="50" height="50" border="0" alt="" /></a>
</div>

<script type="text/javascript">
	flowplayer("a.myPlayer", {
		src: 'http://www.18andupstuds.com/previewer/flowplayer.commercial-3.1.4.swf',
		version: [9, 115],
		onFail: function()  {         
			document.getElementById("info").innerHTML =             
				"You need the latest Flash version to see these movies. " +             
				"Your version is " + this.getVersion();     
		}
	},
 	{
		onLoad: function() {this.setVolume(100);},
		canvas: {     
			backgroundColor: '#000000',     
			backgroundGradient: 'none',      
			borderRadius: 20 
		},
		clip: {    
			provider: 'pseudo'
		},
		play: {
			url: 'http://www.18andupstuds.com/previewer/play.png',
			width: 50,
			height: 50
		},
		logo: {
			opacity: 0,
			linkUrl: ''
		},
		plugins: {
			pseudo: {
				url: 'flowplayer.pseudostreaming-3.1.3.swf'
		       },
			lighttpd: {
				url: 'flowplayer.pseudostreaming-3.1.3.swf'
		       },
   			controls: {
				url: 'flowplayer.controls-tube-3.1.4.swf',
			       tooltipTextColor: '#001A2D',
				timeBgColor: '#262626',
				durationColor: '#547db0',
				volumeSliderColor: '#1a27c1',
				borderRadius: '0px',
				sliderGradient: 'none',
				sliderColor: '#0b3c79',
				bufferGradient: 'none',
				tooltipColor: '#C9C9C9',
				volumeSliderGradient: 'none',
				backgroundColor: '#e9dc2f',
				progressColor: '#001A2D',
				progressGradient: 'none',
				buttonColor: '#1a27c1',
				buttonOverColor: '#FF0000',
				bufferColor: '#a5a9d4',
				backgroundGradient: 'high',
				timeColor: '#FFFFFF',
				height: 24,
				opacity: 1.0,
				playlist: 'false',
				stop: 'true'
			}
		},
   		contextMenu: [
			'18andUpStuds Video Player 1.0'
		]
	});
	</script>
</body>
</html>

Jimmy

#8

Re: Flowplayer: problem with playlist on iPad

Thanks for the code Jimmy. I’d have loved to have done this without having an image leading to the player, but looks like this is currently the only way to do it AND get it to still work well on iPad.