Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum

Hi Mike,
I set up FLV streaming according to TWGs FAQs.

Here is my video.php content:
<?php
$video_size_x=512;
$video_size_y=384;
$video_player="FLV";
$video_flash_site = "";
$video_autostart=true; // true and false works
$video_show_dl_link=false; // true and false works
?>

The video plays fine but only after fully downloading the entire file which can be time consuming. Here is a direct link:
http://www.carlmontmusic.com/media/inde ... twg_show=x


I then took <twg_install_folder>/html/mediaplayer.swf and created a video streaming folder outside of TWG based on JW-FLV-Player instructions.

<object type="application/x-shockwave-flash" data="mediaplayer.swf" height="384" width="512">
<param name="movie" value="mediaplayer.swf">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=20091006_Save_The_Music_Espana_Cani.flv&amp;image=20091006_Save_The_Music_Espana_Cani.jpg&amp;autostart=true">
<p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>
</object>

This one works with streaming and starts playing immediately. Here is a direct link:
#removed_broken_link

So, using mediaplayer.swf that comes with TWG 1.7.8 streaming works for me outside of TWG but not within. Is this a bug or am I missing something?

Visitors of my site complain that they have to wait a looong time before videos start playing so I'd like to find a solution for this issue.

Thanks for looking into this,
--Alex

I tested your links.

the 2nd one is only kind of starting immediately. I see the first image and then the loading icon again. Seems your server is too slow or your video too big. And I have a 16 MBit download line.

TWG starts the video after a 2 seconds buffer. I added a new parameter to video.php that this buffer can be set.
add $video_flv_buffer=0;
to your video.php

Download the patch again and replace the inc folder.

- Michael

OK, downloaded the patch again, replaced inc added the new video buffer parameter. User experience is the same which isn't unexpected when changing the buffer size from 2 to 0 seconds.

Here are some more information/observations:

- My video are big. I don't know what too big is but they range from 30 to 50MB

- When you tried my links you did not experience much difference since you have a super fast download line. Most of my visitors have much slower connections and for them it takes up to 10 minutes before a TWG FLV video starts

- My hosting server might be slow but then both links I provided should provide the same speed which they're not. I tested with a slow internet connection and TWG FLV video takes a couple of minutes before it starts whereas the FLV outside of TWG only a few seconds

- Most importantly. This issue is is that for some reason TWG downloads the entire file before even attempting to play. I'm assuming due to your fast connection it took about 2 secs to do that. I can tell that it downloads the entire file by looking at the FLV player. It doesn't do any buffering and doesn't count percentages at all and just stays there loading. At the same time the file downloads into my browser cache. When this is complete the video starts. When using my 2nd link you can see the buffering process in the FLV player while it's counting up to 100. This is not happening through TWG.

Any more ideas?

Thanks,
--Alex

There is definitely a bug in videstreaming.inc but I'm pretty new to the video embedding game so all I could come up with quickly is a hack that optimizes streaming for IE. Below actually makes IE now stream TWG FLV videos immediately and not make it download the entire file. Like I said, that's just a quick and dirty hack until a real solution can be found but for my lower bandwidth visitors it'll be good news:


diff videostreaming.inc.php.hack videostreaming.inc.php.org
179,184d178
<
< $browser = $_SERVER['HTTP_USER_AGENT'];
< if (preg_match('|MSIE ([0-9].[0-9]{1,2})|',$browser,$matched)) {
< // $browser_version=$matched[1];
< // $browser = ‘IE’;
< } else {
190,193c184,187
< so.addVariable("type", "video");
< so.addParam("allowfullscreen","true");
< so.addParam("overstretch","true");';
< if ($show_flv_player_below_iframe) {
---
> so.addVariable("type", "video");
> so.addParam("allowfullscreen","true");
> so.addParam("overstretch","true");';
> if ($show_flv_player_below_iframe) {
198,199c192
< </script>';
< }
---
> </script>';
202,210d194
< // echo '
< // <noscript>
< // <embed style="width:' . $video_size_x . 'px; height:' . $video_size_y . 'px;" id="VideoPlayback" align="middle"
< // type="application/x-shockwave-flash" src="' . $movie . $file . '" allowScriptAccess="sameDomain"
< // quality="best" bgcolor="#ffffff" scale="noScale" wmode="window" salign="TL"
< // FlashVars="showfsbutton=true&amp;playerMode=embedded&amp;fullscreenpage=html/fullscreen.html' . $auto_param . '"></embed>
< // </noscript>
< // ';
< // ** FLV STREAMING HACK -- START **
212,217c196,201
< <object type="application/x-shockwave-flash" height="' . $video_size_y . '" width="' . $video_size_x . '">
< <param name="movie" value="html/mediaplayer.swf">
< <param name="allowfullscreen" value="true">
< <param name="allowscriptaccess" value="always">
< <param name="flashvars" value="' . $file . '&amp;autostart=true">
< </object
---
> <noscript>
> <embed style="width:' . $video_size_x . 'px; height:' . $video_size_y . 'px;" id="VideoPlayback" align="middle"
> type="application/x-shockwave-flash" src="' . $movie . $file . '" allowScriptAccess="sameDomain"
> quality="best" bgcolor="#ffffff" scale="noScale" wmode="window" salign="TL"
> FlashVars="showfsbutton=true&amp;playerMode=embedded&amp;fullscreenpage=html/fullscreen.html' . $auto_param . '"></embed>
> </noscript>
219d202
< // ** FLV STREAMING HACK -- END **

Where is actually the difference? because the noscript part is not used at all normally.

the script part looks the same. You only use the object tag and this should not be use for ie 6 and 7 users.

It's just that you are not using the buffer and if this is the problem then the bug is in the player and not in TWG.

- Michael

I just checked the code again. Setting $video_flv_buffer to 0 was still setting the buffer to 2.

I have corrected this.

But I still think that your server is too slow to show the videos properly. Because when I try with my fast line I still have to wait a lot because the video is loading in the middle quite often.

Maybe this is better for you because you are closer to your server ...

- Michael

I studied the JW-FLV-Player instructions more today and rewrote your implementation of the SWFOBJECT which seems to do the trick, at least for me and mu website users. Both IE and Firefox now start buffering FLVs and start playing with just a little delay, no more downloading the entire file. Btw, I also downloaded and upgraded to JW-FLV-Player version 4.5.230

Here is the entire FLV elseif section for better documentation:

} else if ($video_player == "FLV") {
$movie = $install_dir . "html/mediaplayer.swf?";
$filedir = substr($basedir, strlen($install_dir));
$url = twg_urlencode( fixUrl (getTWGHttpRoot() . $filedir . "/" . $twg_album . "/" . getMovieName($twg_album , $image)));
$file = "file=" . $url;
$video_player="DIVX"; // we need the full path
$preview = "&image=html/" . $url;
$video_player="FLV";
$auto_param = "";
if ($video_autostart) {
$auto_param = "autostart=true";
} else {
$auto_param = "autostart=false";
}
if (isset($video_flv_buffer)) {
if ($video_flv_buffer != '0') {
$auto_param .= "&bufferlength=" . $video_flv_buffer;
} else {
$auto_param .= "&bufferlength=2";
}
}

$auto_param .= $preview;
echo "<span id=videoFLV>";
// swfobjects!
// echo '
// <script type="text/javascript">
// document.write(\'' . $flashtext . '\');
// var so = new SWFObject("' . $movie . $file . '", "VideoPlayback", "' . $video_size_x . '", "' . $video_size_y . '", "6");
// so.addParam("FlashVars","' . $auto_param . '&height='.$video_size_y.'&width='.$video_size_x.'");
// so.addVariable("type", "video");
// so.addParam("allowfullscreen","true");
// so.addParam("overstretch","true");';
// if ($show_flv_player_below_iframe) {
// echo 'so.addParam("wmode","transparent");';
// }
// echo'
// so.write("flashcontent");
// </script>';

if ($video_autostart) {
$auto_param = "true";
} else {
$auto_param = "false";
}

echo '
<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->

<script type="text/javascript" src="html/swfobject.js"></script>

<div id="mediaspace">This text will be replaced</div>

<script type="text/javascript">
var so = new SWFObject("html/player.swf","mpl","' . $video_size_x . '","' . $video_size_y . '","9");
so.addParam("allowfullscreen","true");
so.addParam("allowscriptaccess","sameDomain");
so.addParam("wmode","opaque");
so.addVariable("file","' . $url . '");
so.addVariable("bufferlength","' . $video_flv_buffer . '");
so.addVariable("autostart","' . $auto_param . '");
so.write("mediaspace");
</script>

<!-- END OF THE PLAYER EMBEDDING --> ';


// noscript way
$auto_param = str_replace("&" , "&amp;" , $auto_param); // to make it w3c conform!
echo '
<noscript>
<embed style="width:' . $video_size_x . 'px; height:' . $video_size_y . 'px;" id="VideoPlayback" align="middle"
type="application/x-shockwave-flash" src="' . $movie . $file . '" allowScriptAccess="sameDomain"
quality="best" bgcolor="#ffffff" scale="noScale" wmode="window" salign="TL"
FlashVars="showfsbutton=true&amp;playerMode=embedded&amp;fullscreenpage=html/fullscreen.html' . $auto_param . '"></embed>
</noscript>
';
} else if ($video_player == "QT") {
$movie = getTWGHttpRoot() . twg_urlencode($basedir . "/" . $twg_album . "/" . getMovieName($twg_album , $image));
if ($video_autostart) {
$auto_param = "true";
} else {
$auto_param = "false";
}
echo "<span id=videoQT>";
echo '<script type="text/javascript">';
echo "QT_WriteOBJECT('".$movie."', '". $video_size_x ."', '". $video_size_y ."','','class','transparent','controller','true','autoplay','".$auto_param."');";
// echo 'showDivx("' . $movie . '", ' . $video_size_x . ',' . $video_size_y . ');';
echo '</script>';
echo '<noscript><br/><span class="noflash">Please activate Javascript. The Quicktime plugin does not work otherwise.</span><br/>&nbsp;<br/></noscript>';

strange - but the swfobjects.js is still the same?

And about the player version. I use the latest unbranded version that is available. Have you tried with this version as well?

btw: You only changed half of the code. Because after changing the video a different code is used which exchanges the player with Javascript.

- Michael

I just checked my code - it's actually very bad because I only updated the player but the code calling it. Some part of it are not even right.

I will update the code and the one used if you change the video as well.

Stay tuned .

- Michael

1. swfobjects.js is different. You use version 1.4.4 and the one I've upgraded to is 1.5 (#removed_broken_link)

2. Yes, it also works with your unbranded version

3. You are right about selecting another video. Switching doesn't work anymore but since you're looking into this I'll be waiting for your fix.

Herzlichen Dank fuer Deinen grossartigen Support!
--Alex

You have confirmed the that the new version does work now fine.

Everyone who has problems with FLV's - Please update to the latest version.

- Michael

Absolutely, I can confirm that the latest posted 1.7.8 patch addresses the issue that I reported only 2 days ago. FLV videos are now buffering correctly.

Many thanks from the Carlmont High School Music program for prompt and professional support. We love our Media Gallery!

TWG ROCKS!