Hello,
I have been working on an interactive training video for the past few months. I first created an english version of the presentation that was used both as an interactive CD and also featured an online version. The english version works perfectly on all browsers and operating systems. I then had to convert the project to French. This phase is now complete. The interactive CD version (using a projector .exe) is working fine. When I uploaded the online version, the main interface is working but it seems the external videos will not load in Internet Explorer. Both language versions use external links to F4V videos to access each training video of the presentation.
Basically, the French version is an exact copy of the English version, but the language has been converted to french. The coding and functionality is identical to the English. The online verison of the English presentation works on all browsers and operating systems. Oddly enough the online version of the French presentation works on all browsers except Internet Explorer. For whatever reason, the external videos don't load in IE. I have tried everything I can think of but so far nothing has worked.
I am not sure if it matters, but I originally built the English presentation in Flash CS4. I encoded the english training videos using media encoder CS4. When I began converting the english to french, I upgraded to CS5.5. All the french content was created using CS5.5. I also switched to Adobe After Effects 5.5 to render my final F4V's instead of using the media encoder (I have since tried using media encoder 5.5 but my videos still won't load in IE). I am wondering if something has changed in CS5.5 when it comes to encoding F4V's that would cause IE not to load them.
I am pretty well stumped. It doesn't make sense to me why the English version is working in IE and the French version will not load the F4V's. Aside from being setup in a different langauge, these projects are identical. I did try rebuilding the french version because i suspected the pathing was messed up but that did not work. At this point, I think my F4V's I created in CS5.5 are not compatible with IE. Either that or something was done in the coding of the host website that would cause this issue (I did not build this website but now have to edit it so I don't know if the former webmaster did some special coding for the english version that needs to be done to the french). I doubt the website coding is the cause but at this point I am open to all possibilities.
Anyway, if anyone has an idea what the cause of this issue is, I would greatly appreciate the input. Thanks in advance for your replies.
The english and french versions can be found here:
English (this one works fine in IE): http://prevu.com/English/hcp/video/training_video.swf
French (this one will not load F4V's in IE): http://prevu.com/Français/hcp/video/training_video.swf
http://prevu.com/Fran%C3%A7ais/hcp/video/Prevu%20Movies/Video%20-%20In troduction%20(French).f4v works for me in internet explorer.
http://prevu.com/Fran%C3%A7ais/hcp/video/Prevu%20Movies/Video%20-%20Co nfiguring%20(French).f4v works for me in ie (but has a coding error).
http://prevu.com/Fran%C3%A7ais/hcp/video/Prevu%20Movies/Video%20-%20Se tting%20Up%20(French).f4v works for me in ie
http://prevu.com/Fran%C3%A7ais/hcp/video/Prevu%20Movies/Video%20-%20Ca libration%20(French).f4v works for me in ie
http://prevu.com/Fran%C3%A7ais/hcp/video/Prevu%20Movies/Video%20-%20Te sting%20(French).f4v works for me in ie
http://prevu.com/Fran%C3%A7ais/hcp/video/Prevu%20Movies/Video%20-%20Bl otting%20(French).f4v works for me in ie
and i stopped testing.
upgrade your ie flash player version and retest: http://www.adobe.com/support/flashplayer/downloads.html
Works fine in my IE9 as well.
Is there any good reason you'd ever desire to use F4V? Just encode them to MP4. Playback support is in flash as well and if you choose to offer a non-flash version of the site they'll play in a native HTML5 <video> object. They're also a desirable format to download, if that's useful for your viewers. F4V is way too far behind, has inferior quality and compression.
Adobe CS5.5's Media Encoder has presets for H264 and MP4.
Thanks Kglad, that's good to know they are working for you. My flash player is updated but is still doesn't load the videos in IE using the flash interface. I did try this on my other computers, I have an older PC and a new one, all seem to act the same way on my laptop in IE. I did think at first the players were out of date so I did update the player yesterday. What I find strange is the English version works but the french doesn't. Anyhow, my plan of attack for now is to redo the encoding of each french video and redo the flash interface in CS4 format. The english videos were done this way some time ago prior to my upgrade to CS5.5. It is something I havn't tried yet so its worth a try.
Thanks again for the input!
Thanks, Sinious. I am going to try out these different formats. I am actually a big fan of H.264. In my normal video work, I use that above all else. I honestly didn't realise the flash playback component could use other formats besides F4V. My primary objective right now is just to have this flash presentation up and working. I am recommending to the client that they should offer a non-flash version of this presentation down the road. When I finished the english version earlier this year, it was intended to be used as a CD application. Then the client wanted it posted to their website. That initially caused all kinds of problems. When I did a bit of research on the issue, I found out that a non-flash option is more desirable. That is most likely what will be happening in the new year. Anyway, thanks for the help and input.
Well all my efforts are not working. I guess IE just doesn't like my swf. I can view each video in IE but when I use the swf and its external playback feature, IE doesn't know where the file is located it seems, thus it will not load. I have tried using a different video format (H.264) and also downsaving to CS4. I get the same thing in every attempt I have tried. I guess there is something wrong with the pathing or possibly the webpage from which it is playing from. I still don't know why the english swf works and the french swf does not...the method used for external playback is identical. At this point I have run out of ideas...
It's all simply about the errors. Don't give up on mp4, stay that route if you can. Your client won't care as long as if plays and the files are smaller and look better.
Are you coding this by hand or are you using all timelines with components? If you have any code, please show the code you're using to start the playback of the video. including all event handling (especially error checking). Certainly there will be an error.
One of the most common things I see is people update software and then set the current class as the delegate for a stream but forget to implement all the handlers required like onXMPData. Mostly because it's a newer feature (you see export XMP data in publish settings all the time). Errors will easily let you know that.
Hello Sinious,
Thanks again for the reply. Yea, I had suspected there could be an issue with the coding which was done by hand in CS4. Basically, the interface is comprised of 9 scenes that have duplicate menu items that make up the navigation between each scene. I will need to wait until I am home from work as the files are there right now. The navigating code seemed pretty standard to me but perhaps there may be something wrong the extra code that goes with it...I have a timecode counter for each video which I just downloaded from the web. It shows errors when I try to publish in Flash Player 10.2; perhaps this is why IE doesn't like it (I may try removing that code later today to see if it helps). When I can, I will copy all the code here for you to look at.
Its is still a bit mysterious to me that the english version doesn't exhibit this problem, it was originally created in CS4 but I have since made updates and published in CS5.5. The video pathing was unaltered though, just some small adjustments.
Anyway, I will post my coding a little later today.
Hello again, Sinious.
First off, I guess I misunderstood your previous post. To clarify, the navigation is coded using AS3 as is the timecode counter. The videos were imported to the timeline using the external FLVplayback component. Each video is set to autoplay and resides on its on scene. This was done to keep things simple...although later on, I created a play all feature that was contained within one scene. In hindsight, I should have kept everything in one scene. Anyway, the coding is as follows:
The interface buttons use this code. Each scene has this same AS3 but the names of instances were renamed for each.
//Intro Button
intro.addEventListener(MouseEvent.CLICK, btn1c);
function btn1c(event:MouseEvent):void {
gotoAndStop(1, "1 Introduction");
SoundMixer.stopAll();
}
//Configuration Button
config.addEventListener(MouseEvent.CLICK, btn2c);
function btn2c(event:MouseEvent):void {
SoundMixer.stopAll();
prevu2.stop();
prevu2.seek(0);
prevu2.play();
}
//Setting Up Button
setup.addEventListener(MouseEvent.CLICK, btn3c);
function btn3c(event:MouseEvent):void {
gotoAndStop(1, "3 Setting Up");
SoundMixer.stopAll();
}
//Calibration Button
calibrate.addEventListener(MouseEvent.CLICK, btn4c);
function btn4c(event:MouseEvent):void {
gotoAndStop(1, "4 Calibration");
SoundMixer.stopAll();
}
//Testing Button
testing.addEventListener(MouseEvent.CLICK, btn5c);
function btn5c(event:MouseEvent):void {
gotoAndStop(1, "5 Testing");
SoundMixer.stopAll();
}
//Blotting Button
blotting.addEventListener(MouseEvent.CLICK, btn6c);
function btn6c(event:MouseEvent):void {
gotoAndStop(1, "6 Blotting");
SoundMixer.stopAll();
}
//Reviewing Results Button
rresults.addEventListener(MouseEvent.CLICK, btn7c);
function btn7c(event:MouseEvent):void {
gotoAndStop(1, "7 Reviewing Results");
SoundMixer.stopAll();
}
//Troubleshooting Button
tshooting.addEventListener(MouseEvent.CLICK, btn8c);
function btn8c(event:MouseEvent):void {
gotoAndStop(1, "8 Troubleshooting");
SoundMixer.stopAll();
}
//Loop Button
pall.addEventListener(MouseEvent.CLICK, btn8r);
function btn8r(event:MouseEvent):void {
gotoAndPlay(1, "Loop");
SoundMixer.stopAll();
}
-----------------------------------------------------------
This is the code for the timecode counter for the external videos. This is the one I am not so sure about, I am a bit of a novice at flash actionscript and pulled this from the web and changed it to fit my project. I may create a test file with this deleted to see if it is causing issues in IE9.
import fl.video.VideoEvent;
import fl.video.MetadataEvent;
var fullDuration2:String="";
function metadataReceivedF2(e:MetadataEvent):void {
fullDuration2=prettyTime2(prevu2.metadata.duration);
}
function updateF2(e:VideoEvent):void {
var paTime=prevu2.playheadTime;
if (fullDuration2!="") {
time_txt2.text=prettyTime2(prevu2.playheadTime)+" / "+fullDuration2;
}
}
prevu2.addEventListener(MetadataEvent.METADATA_RECEIVED, metadataReceivedF2);
prevu2.addEventListener(VideoEvent.PLAYHEAD_UPDATE, updateF2);
function prettyTime2(timeinSeconds:Number):String {
var seconds:Number=Math.floor(timeinSeconds);
var minutes:Number=Math.floor(seconds/60);
seconds%=60;
minutes%=60;
var sec:String=seconds.toString();
var min:String=minutes.toString();
while (sec.length < 2) {
sec="0"+sec;
}
while (min.length < 2) {
min="0"+min;
}
return min + ":" + sec;
}
-----------------------------------------------------------
There is also a stop command. Anyway, thats pretty well it. I am not sure if there is something else I should be doing with my pathing but it seems like IE doesn't see where the videos are. It is worth mentioning that the project works fine when offline in Internet Explorer9. I only noticed the problems after the project went live.
Anyway, thanks again for the input!
Scenes get ugly. They're a whole different MovieClip so all the code needs to be reinstantiated over and over for each scene. Very tedious as you mentioned, hindsight 20/20.
I see your MetadataEvent and VideoEvent, where is the error handling?
FLVPlayback just wraps VideoPlayer which has a loaderInfo object some extra info can be obtained from. Don't specify the f4v to play in the component, do it with code and try the following:
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.SecurityErrorEvent;
import flash.events.ErrorEvent;
import flash.events.HTTPStatusEvent;
import flash.events.UncaughtErrorEvent;
import fl.video.VideoEvent;
import flash.text.TextField;
var tf:TextField = new TextField();
addChild(tf);
tf.width = stage.stageWidth;
tf.height = stage.stageHeight;
tf.multiline = true;
tf.wordWrap = true;
flp_com.addEventListener(fl.video.VideoEvent.STATE_CHANGE, _stateChange);
flp_com.loaderInfo.addEventListener(HTTPStatusEvent.HTTP_STATUS, _statusEvent);
flp_com.loaderInfo.addEventListener(Event.OPEN, _statusEvent);
flp_com.loaderInfo.addEventListener(UncaughtErrorEvent.UNCAUGHT_ERROR, _handleError);
flp_com.loaderInfo.addEventListener(IOErrorEvent.IO_ERROR, _handleError);
flp_com.loaderInfo.addEventListener(IOErrorEvent.NETWORK_ERROR, _handleError);
flp_com.loaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR, _handleError);
try
{
flp_com.load("moo.f4v");
}
catch (e:ErrorEvent)
{
tf.appendText("Direct error: " + e + "\n");
}
function _stateChange(e:fl.video.VideoEvent):void
{
tf.appendText("StateChange: state[" + e.state + "]" + e + "\n");
}
function _statusEvent(e:Event):void
{
tf.appendText("HTTPStatusEvent: type[" + e.type + "]" + e + "\n");
}
function _handleError(e:ErrorEvent):void
{
tf.appendText("StateChange: type[" + e.type + "]" + e + "\n");
}
This is just creating a TextField above everything and adding the event text to it. See what happens in IE and if it reports any errors. You'll get more useful errors if you use a http:// protocol full URL to the file versus a relative URL. If you use relative at least STATE_CHANGE should report connectionError if it can't use the file.
North America
Europe, Middle East and Africa
Asia Pacific