PhilFlash - FAQ - Video FLV in PHP Streaming with the JW FLV Player by Jeroen Wijering

Video FLV in PHP Streaming with the JW FLV Player by Jeroen Wijering

FAQ

I don't understand PHP Streaming. The JW FLV Player by Jeroen Wijering has already this option: http streaming. What are the differences ?

I have a previous version of the JW FLV Player. Is it possible to use the PHP Streaming extension to have direct access to any point of the video ?

Which variables can be inserted in the HTML code ?

Problem: When I seek at any point of the video, the video always starts at the beginning.

How to define chapters with a playlist ?

Is it possible to have different videos with chapters in the same playlist ?

I have a Javascript menu that overlaps some of the flash video content and the menu does not display "ontop" of it. How do I get Flash elements to stop overlapping javascript menus ?

With Internet Explorer 7 (IE7), the playlist disappear when I reload a page...

Links and resources

What is PHP Streaming ?

For video in Flash, there are two techniques: progressive download and streaming.
For more information, see this article in the devnet.

A the end of 2005, a new technique is coming: PHP Streaming.
This solution offers a service of streaming via PHP.
The first player has been published by Stefan Richter at FlashComGuru.

PHP streaming is a low cost solution. It does not require a specialized streaming server.
A “simple” server like Apache with the PHP module is sufficient.

The following table provides a comparison of the characteristics of Flash video delivery techniques:

	Progressive download	Streaming	PHP Streaming
Long clips	No	Yes	Yes
Direct instant access to any point of the video	No	Yes	Yes
Video cached on the local system	Yes	No	No
Requires a specialized streaming server		Yes	No
Requires a web server with PHP		No	Yes
Video plays through all firewalls		No	Yes

PHP Streaming principle

PHP Streaming uses the FLV format.
To seek at a position, the video must be prepared.
It is necessary to inject new objects into the FLV's metadata.
These objects contain the exact starting position in bytes and timecode of each keyframe.

When a video player seeks in a position, the player finds the nearest key frame and its file position using the injected metadata and pass the file position to the PHP.
The PHP script creates a new FLV header, seeks to the file position and starts sending data from there.

To inject metadata in the FLV file, there are two free tools :

FLV MetaData Injector by Burak Kalayci: http://www.buraks.com/flvmdi/
It’s a command line program. A GUI interface is provided.
FLVTool2 : http://www.inlet-media.de/flvtool2
It’s a command line program. It’s an open source project.

Licence

The JW FLV Player by Jeroen Wijering is licensed under a Creative Commons License.
It's free for noncommercial purposes.
For commercial use, a licence is required : http://www.jeroenwijering.com/?order=form

My contribution for PHP Streaming is free.
It's a derivative work under the same licence.
For commercial use, a licence for the JW FLV Player is required : http://www.jeroenwijering.com/?order=form

I don't understand PHP Streaming. The JW FLV Player by Jeroen Wijering has already this option: http streaming. What are the differences ?

Yes, the JW FLV Player by Jeroen Wijering has an option: http streaming.

But, there are some bugs (for example, if you seek in the video and when the video is finished, the player returns to the position of the last seek (and not at the beginning of the video).

The PHP Streaming extension for the JW FLV Player has new features. For example:

With autostart=false, the player displays the first image of the video
In pause mode, it is possible to seek at any part of the video.
In this case, the player displays the image of the video seek.

The implementation is more robust.

I have a previous version of the JW FLV Player. Is it possible to use the PHP Streaming extension to have direct access to any point of the video ?

Yes. A server with PHP is required.

add metadata to the video file. Use the free FLV MetaData Injector from Burak Kalayci
http://www.buraks.com/flvmdi/
upload the new video file on your server
upload the new video player : phpsflvplayer.swf
upload the PHP script on your server : flvprovider.php
modify your HTML file to use the flash component and the PHP script like this:
var attributes = {}; var params = {}; // for fullscreen params.allowfullscreen = "true"; var flashvars = {}; // the PHP script (1.5 is a recommended value for PHP Streaming for bufferlength) flashvars.streamscript = "flvprovider.php"; flashvars.bufferlength = "1.5";

// 9 for Flash Player 9 (for ON2 Codec and FullScreen)swfobject.embedSWF("phpsflvplayer.swf", "flashcontent", "320", "260", "9.0.0", "playerProductInstall.swf", flashvars, params, attributes);
upload the new HTML file on your server

Which variables can be inserted in the HTML code ?

Flashvars are variables you can insert into your HTML code to control both behavior and appearance of the player. For more information, visite the readme file of the JW FLV Player by Jeroen Wijering.

We have added two new variables to control the width (thumbimagewidth) and the height (thumbimageheight) of the preview image in a playlist.
By default, the width is 60 and the height is 40.

flashvars.thumbsinplaylist = "true"; flashvars.thumbimagewidth = "60"; flashvars.thumbimageheight = "40";

Problem: When I seek at any point of the video, the video always starts at the beginning.

You have not injected metadata to the video file
You have not uploaded the new video file (with the metadata)
You have not uploaded the PHP script on your server : flvprovider.php
You have not added the variable streamscript in your HTML file
flashvars.streamscript = "flvprovider.php";

How to define chapters with a playlist ?

The chapters are defined in a playlist (a xml file in XPSF format). For each chapter, define title, author and start tags.

For start tag, the value is the starting position in seconds. To determine the exact starting time, use the xml file generated by the FLV MetaData Injector (time value in times tag).

It is possible to add images (use image tag).
We have added two new variables to control the width (thumbimagewidth) and the height (thumbimageheight) of the preview image in a playlist. By default, the width is 60 and the height is 40.
To add images (dimension 64x52) in the playlist , add the following code to your HTML file:
flashvars.thumbsinplaylist = "true"; flashvars.thumbimagewidth = "64"; flashvars.thumbimageheight = "42";

Playlist example:

<?xml version="1.0" encoding="UTF-8"?> <playlist version="1" xmlns="http://xspf.org/ns/0/"> <trackList> <track> <creator>LipoPropulsion</creator> <title>Où trouver de l'huile à patate ?</title> <location>lipopropulsion_420.flv</location> <image>images/lipopropulsion.jpg</image> </track> <track> <creator>Rest-Poustine</creator> <title></title> <location>lipopropulsion_420.flv</location> <image>images/poutine.jpg</image> <meta rel="start">98.2</meta> </track> <track> <creator>Récolte</creator> <title>Il faut récolter l'huile</title> <location>lipopropulsion_420.flv</location> <image>images/recolte.jpg</image> <meta rel="start">188.933</meta> </track> </trackList> <playlist>

If you want a "blank" line for creator, use the special value: none

If you want multilines, use CDATA et br tag in creator or title tag:
<title><![CDATA[La voiture qui fonctionne <br/>à l'huile à patate.]]></title>

Is it possible to have different videos with chapters in the same playlist ?

NO. Chapters must be defined in the same video file in a playlist.

I have a Javascript menu that overlaps some of the flash video content and the menu does not display "ontop" of it. How do I get Flash elements to stop overlapping javascript menus ?

To manage the javascript menu above flash movie just adding param: params.wmode = "transparent";

Example with SWF Object 2.1:

Example with SWF Object 1.5:

// width of video:320, height of the video+20(for controlbar):260, // 9 for Flash Player 9 (for ON2 Codec and FullScreen) var s1 = new SWFObject("phpsflvplayer.swf","playerphp","320","260","9", "#FFFFFF"); // for ExpressInstall s1.useExpressInstall("playerProductInstall.swf"); s1.setAttribute("xiRedirectUrl", window.location.href); // for javascript menu s1.addParam("wmode", "transparent"); // the video file or the playlist file s1.addVariable("file","myvideo.flv"); // the PHP script s1.addVariable("streamscript","flvprovider.php"); s1.addVariable("bufferlength","1.2"); // the width and the height of the video s1.addVariable("displaywidth","320"); s1.addVariable("displayheight","240"); s1.addVariable("autostart","true"); s1.addVariable("showdigits","true"); // for fullscreen s1.addParam("allowfullscreen","true"); s1.addVariable("showfsbutton","true"); s1.write("flashcontent");