VideoPlayer seemless loop

timwjohn

OK, finally had the chance to submit the issue!

Vote, vote, vote! And please amend or contribute in any way you see necessary.

I'm yet to submit the frame freezing issue, but hope to do that over the weekend.
Thanks.

timwjohn

Here are the bug reports for the video freezing issue:

Is anyone else getting this? I'd be surprised if not, as I'm getting it on 2 very different machines i.e. Intel Atom + NVIDIA ION and Intel Core i7 with HD Graphics.

If not though, then could it possibly be an issue with my compiler (I compiled it in Flash Builder)? If you wouldn't mind trying the captive runtime version I provide in the issue to see if results differ from the version you have compiled? Thanks!

@tuarua, thank you for that info. So, (if these issues don't get fixed soon) perhaps I could set a file size threshold and load in smaller files as byte arrays to use the appendBytes method.

dfdiaza

@timwjohn Thanks for reporting the bug. I have already voted it.

Last night I had access to the Mac Mini for doing the tests with the AppendBytes version.
Running the .air file. It last some hours working properly, this morning when I checked the computer I noticed the video frozen, moving the window refreshed one video frame.
Next, I made the test with the captive runtime, this time the app last 5 hours, and it crashed with APPCRASH error. That's what I can tell you about my tests.
Hope Adobe can fix it! Thanks so much.

Gargiulo

Sorry guys, I know you are trying to solve problems at the root, but for a quick solution I managed to loop seamlessly like shown below.
In essence I draw the last frame when I finish and keep such frame still until later.
The green/black glitch is caused when it loops and plays the first frames of the video, these frames seem to be corrupted.
I avoid such frames with 200ms delay after the seek(0) and play and only then I assign the texture.
For sure I miss a few frames to be sure I don't see the first corrupted ones, but for most videos this is acceptable, unless the very first frames are so important, for example a looping ball which loops to the same position, then bye bye, but I guess most videos are ok.

private function playBackComplete(e:Event):void
	{
	log("Video playback completed: " + videoSource);
	_renderTexture.draw(_imageLoader);
	_imageLoader.source = _renderTexture;

	if(_loop)
		{
		seek(0);
		play();

		setTimeout(function():void{
			_imageLoader.source = texture;
		}, 200);
		}

bill

So I've seen a few workarounds here for cleanly looping video, I've tried all of them in this thread and the previous post worked pretty good but not each time and it got me thinking because of the timeout, I decided to dig a little deeper and see if I could replace the loader texture at the exact time needed

After reading the bug report and adobes response was:

"Basically, content can render video texture when Event.TEXTURE_READY event has been sent to ActionScript"

So I decided to watch this and match it up with the the MediaPlayerEventType.CURRENT_TIME_CHANGE event to see how much time went by when the video texture was NOT ready.

I tested on a 60.05 second video and saw these results at the end of the video at the time of looping.

As you can see below there are quite a bit of times both at the end of the video and at the beginning of the video where the texture is NOT ready, this is the time you either see black or green. Note that the texture becomes ready again at .205 in this run, which is close to the previous posts setTimeOut, but I have seen lower times, it varies a lot.

Snapshot of the end and beginning of a loop, note that texture doesn't show ready for several frames

Current time: 59.996 - Total Time: 60.05 -- Texture is ready
Current time: 60.012 - Total Time: 60.05 -- Texture is ready
Current time: 60.028 - Total Time: 60.05 -- Texture is ready
Current time: 60.044 - Total Time: 60.05 -- Not ready
Current time: 60.05 - Total Time: 60.05 -- Not ready
Current time: 0 - Total Time: 60.05 -- Not ready
Current time: 0 - Total Time: 60.05 -- Not ready
Current time: 60.05 - Total Time: 60.05 -- Not ready
Current time: 60.05 - Total Time: 60.05 -- Not ready
Current time: 0.137 - Total Time: 60.05 -- Not ready
Current time: 0.154 - Total Time: 60.05 -- Not ready
Current time: 0.169 - Total Time: 60.05 -- Not ready
Current time: 0.187 - Total Time: 60.05 -- Not ready
Current time: 0.205 - Total Time: 60.05 -- Texture is ready
Current time: 0.25 - Total Time: 60.05 -- Texture is ready
Current time: 0.287 - Total Time: 60.05 -- Texture is ready
Current time: 0.31 - Total Time: 60.05 -- Texture is ready

Based on this info, I wanted to see if I could have the renderTexture draw the first available frame of the video, not the end, but it doesn't really matter from what I've tried, then to watch for the moment the video texture is NOT ready which isn't necessarily the very end of the video, and replace the player texture the moment the texture is ready again after the loop starts.

In the end it is a clean loop in my opinion. No green or black. I would get the green sometimes in the previous posters example since the time 200 mil timer was hit and miss. I won't put the entire code here, just the stuff you will need to replicate.

This will draw the first frame of the video that is ready, sometime after it starts

//I had to "un"internalize ConcreteVideoTexture for this to work, there's probably a better way, which I'll look into.

private function videoPlayer_readyHandler(event:Event):void
{
     _loader.source = _player.texture;

     var texture:ConcreteVideoTexture = _player.texture as ConcreteVideoTexture;

     texture.videoBase.addEventListener(flash.events.Event.TEXTURE_READY, textureReady);
}

private function textureReady(e:flash.events.Event):void
{
     _textureReady = true;

     if (!_firstAvailableFrameDrawn)
     {
          _firstAvailableFrameDrawn = true;

          _renderTexture.draw(_loader);
     }
}

private function onCurrentTimeChange(e:Event):void
{
     if (_looping && _textureReady)
     {
          _looping = false;

          _loader.source = _player.texture;

         return;
     }

     _textureReady = false;
}

private function onVideoEnd(e:Event):void
{
     _loader.source = _renderTexture;

     _looping = true;

     _player.seek(0);

     _player.play();
}

Hope it helps

Bill

stortof

Hi guys,

I see that Adobe did not solve the issue, right?
I need video loop for a museum app and is going to run 12 hours per day...I hesitate to use Stage3D and Starling because of this issue...

Did you find any new workaround?

amihanya

any solution for this? 🙂

retropunk

hey guys, I see a lot of the same issue here with multiple solves. It's a little difficult to scan through all the different solves.

Has anyone overcome the dreaded green frame issue when trying to loop a video?

Thanks for any help

retropunk

This seems to be unique to Windows. So far my Mac machines loop ok.
But Windows shows a green frame when the video loops.

The Bug Reports at Adobe that are posted earlier in this thread appear to have addressed it.

Anyone out there with a fix that wont destroy the CPU? Running 2 videos concurrently to avoid the green frame is not ideal.

Thanks guys

twistedmedia

This really needs to be addressed by Adobe as it's pretty core to Animate. BUT...one thing I have done that's solved some problems is to take a screen shot type of thing at the end of a video (or when switching videos), write that to the stage then do the switch. Voila! No black, is much more seamless than before.

retropunk

@twistedmedia thanks
Do you mean take a screenshot of the video frame on the fly? Or import the last frame of the video separately?
Any code you can share?
Thx

timwjohn

My earlier post does this by drawing the last frame of the video to a RenderTexture while it loops around.

retropunk

I see that now. This seems to draw every loop though. Wouldn't the GPU memory eventually run out?
Can I store that last frame once and reuse it each time it loops?

retropunk

Hi everyone, I know this a very specific problem not everyone will have but if you do its really annoying. With the help of lots of people I might have something that works.
I am letting this video application run for 8 hours to see how it goes with the looping. So far so good.

I will be adding methods for properly reusing and disposing the videos too. The app I am creating is something that will run for hours a day and display up to 14 videos total. Only 1 video at a time though. 🙂

Any comments/suggestions are welcome.
When I am convinced this is a solid solution I will post a full project here for the next person that comes here.
I've had a heck of a time finding the right solution on Desktop for Windows and Mac.

Thanks everyone

package views
{
  import feathers.controls.ImageLoader;
  import feathers.media.VideoPlayer;
  import flash.filesystem.File;
  import starling.display.Sprite;
  import starling.events.Event;
  import starling.textures.RenderTexture;

  public class FeathersVideoPlayer extends Sprite
  {
    private var videoPlayer : VideoPlayer;
    private var videoLoader : ImageLoader;
    private var renderTexture:RenderTexture;
    private var firstPlay_complete:Boolean = true;
    private var firstPlay_ready:Boolean = true;
    private var video_W: Number = 1080;
    private var video_H: Number = 1920;
    private var videoPath:String = 'video.mp4';
    private var videoFile:File;

    public function FeathersVideoPlayer ()
    {
      super ();
    }

    public function start ():void
    {
      videoPlayer = new VideoPlayer();
      videoPlayer.setSize(video_W, video_H);
      addChild(videoPlayer);

      videoFile = File.applicationDirectory.resolvePath(videoPath);
      videoPlayer.videoSource = videoFile.url;

      videoLoader = new ImageLoader();
      videoLoader.maintainAspectRatio = false;
      videoLoader.width = video_W;
      videoLoader.height = video_H;
      videoPlayer.addChild(videoLoader);

      videoPlayer.addEventListener( Event.READY, videoPlayer_readyHandler );
      videoPlayer.addEventListener( Event.COMPLETE, videoplayer_Complete_handler);
    }

    private function replayVideo():void
    {
      videoPlayer.stop();
      videoPlayer.play();

      videoLoader.source = renderTexture;
      videoPlayer.videoSource = null;
      videoPlayer.videoSource = videoFile.url;
    }

    private function videoPlayer_readyHandler(e:Event) : void
    {
      videoLoader.source = videoPlayer.texture;

      if (firstPlay_ready)
      {
        renderTexture = new RenderTexture(video_W, video_H);
      }
      firstPlay_ready = false;
    }

    private function videoplayer_Complete_handler (e:Event):void
    {
      if (firstPlay_complete)
      {
        renderTexture.draw(videoLoader);
      }
      firstPlay_complete = false;
      replayVideo();
    }
  }
}

itlancer

For me bug with video freezes on Windows devices finally fixed with AIR 32.0.0.83 beta. Thanks for Adobe!

indra_mahkota

nice info @itlancer, thanks

omdb

WOW! Only took 3 years!

Bink

@king bily on your NetStream instance, set the following to eliminate the green flashes:

netStream.useHardwareDecoder = false;

Regarding the freezing issue, I'm not sure if this'll help, but perhaps give it a go. I don't commence playback of videos until the playback buffer is full. This also allows you to do other things in that moment while it's buffering, such as show an image, a transition, visible = false, etc etc.

// Add this event listener to your NetStream instance.
netStream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);

private function netStatus(event:NetStatusEvent):void
{
	switch (event.info.code)
	{
		case "NetStream.Buffer.Full":
			netStream.resume();
			break;
		default:
			trace("NetStatusEvent:", event.info.code);
	}
}

/**
* Cueue's a video file for playback. Playback is paused until the NetStream buffer is full.
* @param fileName Path to the video file.
*/
private function cueVideo(fileName:String):void
{
	trace("Play " + fileName);
	netStream.play(fileName, 0);
	netStream.pause();
}

Lastly, it may help to encode your videos targeting the lowest viable H.264 Profile and Level. If 1920x1080, this is Profile = Baseline, Level = 4.0. This will increase the file size of the video files, but also improve playback overhead and latency.

To offer hope, I've had many purpose built AIR apps over the years designed to do little more than loop high resolution (1836x2750) video indefinitely. These apps do not have the luxury of system reboots or app restarts, they run 24/7 on a 2 story LED video wall. Based on this, I offer that AIR should be a viable and reliable solution for you, hopefully it's just a case of nutting out an issue.

« Previous Page Next Page »