Playback Stutter in H264 FLV & Related Questions

Soniclight wrote on 1/3/2012, 11:44 PM

The link at end here takes you to the above-shown temporary page at my site with the FLV and downloadable WMV version of this 22 seconds draft with which I'm trying to work out some stuff. It's one "scene" from several, but the issue is similar in all.

I've included as much project, events, FX and pan/crop data as possible at that page.

I use the basic JW/Longtail player to put videos at my website. I used to encode with Flix 8 Standard, then Riva for FLV conversions, but for some reason, I can't get those to work right anymore (major stutters unless I compress so much almost unwatchable). So I'm using the new kid on the block, Prism Video Converter that even in freeware version has so far pleasantly surprised me.

My "signature" style involves sparkles and light effects that require a certain crispness or they just start to blur and look like a crappy YouTube video.

But before going any further here, again for those who don't know me here:

While a serious and edit-happy amateur with some moderate chops (been here 6 years or so), I'm not a pro and I live on a limited, fixed medical condition related income. Ergo, I can't just go out and buy plugins or apps as a business expense, etc. as many of you can. I have to work with what I've got, which is:

VP10e and PartileIllusion 3 (PI) and using still shots to mimic motion as in this particular scene and other before and after it. I compose/arrange my music in Cubase 6, import as .wav most of the time.

Most often, I have rendered out only the visual effects as alpha PNGs from PI to give them their own tracks in Vegas. But this required background stills + effects (otherwise pan/tracking the effects in Vegas would have been a keyframe nightmare).

While a space hog, I tend to use the safety of uncompressed AVI for final FLV renders so as to try to preserve as much visual quality as possible.

As you will see, I've specifically chosen to experiment with a wider sized player -- 960 x 480 (half of my .veg project properties. In the past, I've stuck to more or less a 586 to 512 width. I think the bigger footprint works for my artsy panoramic style. Unless it's a real buffer-killer, I'd like to stay with bigger.

_________________________________________

(Most important issue to resolve)

As you will see, the WMV version plays fine, but FLV still stutters slightly some in the middle of this short clip even though I'm using a more or less half-quality setting. Going too much lower may play smoother but then it will also risk to dip into crappy-YouTube-blurry.

I'm wondering if the stutters are also perhaps related to keyframe potions/changes in the FX timeline more than a general AVI>FLV encoding thing. You can see the keyframes in said project screenshot.

Whatever the case, since this converter does not specify bitrate transfer, it uses a 1.0 (highest quality) to 51.0 (lowest) scale.

A) What would be a broad-audience "safe zone" so that I neither crush the file into blur-oblivion nor tax people's browsers with endless buffering?

2. FLV (and Flash in General) is Dying, Go MP4 and/or ?

I've read that FLV is on its way out, does not work on iPads, etc. and that I should go with MP4 and it seems many of you suggest the latter. BUT unless one knows how to use and tweak Handbrake and such (a bit over my head so I've never used it), MP4 does NOT stream = has to be fully downloaded before playing as SWF does.That's just not acceptable to me.

I've used H264 encoding choice in the Prism Video Converter hoping that this helps broaden play-ablity (the only other option is FV1).

B) Any suggestions on some compromise or way to make FLV "stay alive"?

C) Since JW/Longtail now also has a Windows Media Player, would using WMV be a better choice than FLV (seems not but then I may be wrong) - or are WMV filesizes to retain visual quality too buffer-heavy?

3. How To Make a Speed-Steady Pan-Crop?

Specifically in this case where the pan increases in size as it progresses. Using smooth keyframes @100 us the best I could do but due to change of pan area, it slows down near the end. Not that it's unacceptable, but I would prefer it to be a steady glide all the way through.

D) Any suggestions?

Last, for those familiar with JW/Longtail Player

My start image and .FLV flashvars are all consistent, both being 960 x 480, and yet as you will see, there some left/right letter-boxing going on (if values are identical in image and FLV, it should be letter-box free. Yes, one can spend a lot of time reducing vertical or horizontal flashvars of one or the other by just a few pixels at a time to squeeze it to have no letterbox. If necessary, I will do that. But it would be nice to not have to.

E) Any idea why this happens and do you have a solution?
_________________________________________

All the above with and not withstanding, It's embarrassing to say this but I don't own a cell/smartphone or have and HD TV nor can I afford cable. But that doesn't excuse me from having to be aware that mobile is the thing these days, and so having my stuff viewable by those who carry the Net in their pocket or handbag is important.

Hence your suggestions and input would be most appreciated on any and all of the above. Thanks.

LATER EDIT (MONTHS LATER): I had to remove the page that was linked below this notice at my site to make room for other content, so I've removed its link. Thank you for your understanding.

(Where link used to be... :)

Comments

amendegw wrote on 1/4/2012, 5:01 AM

Sonic,

I, too, have been frustrated by playback stutter. I posted a plea for help in the following thread: OT: Browser Stutter just about a year ago. As you can see - no replies. However, I've had several offline discussions with others on the topic. Here's the test page I put up to test various web players, video formats, etc. Fast Pan Stutter Problem

First the bad news: I've haven't discovered a fix for this issue, however the 60fps render appears to be the best of the bunch.

Next the good news: Back a year ago when I posted this problem, the stutter was really, really bad. It has improved significantly since then. I'm attributing this to Adobe Flash Player updates, but I could be wrong. There are so many variables here, Flash Player, Browser version, video card, video driver, CPU speed, etc.

I looked at your playback page, and I have to look very, very closely to see any stutter on your JW Player / FLV playback. I'm using Flash Player 11.1.102.55

I think you may be going down the wrong path if you think that web playback of WMV's will be an improvement over your FLV format. While I haven't tested FLV's, I've used both WMV & mp4 on my test page. I'm convinced the problem occurs in web playback regardless of format. If you download either the WMV or mp4 files, the playback is silky smooth using a Local Player (either WMP or VLC).

Now, I've pretty much abandoned actively pursuing this issue as it seems to be improving as time marches on (Flash Player updates??).

I will have some answers (or at least comments) to many of your other questions later today. I have to do a little preliminary effort prior to posting.

Back later,
...Jerry

amendegw wrote on 1/4/2012, 7:59 AM

"2. FLV (and Flash in General) is Dying, Go MP4 and/or ?Okay, let me take a shot at this question (and maybe answer some of your other questions as well).

First, my disclaimer - the following is a work in progress. I resurrect it every so often as the subject comes up. However, since I don't have a cadre of different hardware (iPads, Androids, Macs, etc, etc.), I find it very very difficult to test and debug - therefore, "a work in progress"

First, here's my test page: Just a Horse It "should" play in most devices. I encourage anyone to test this with oddball devices and let me know if it works.

Here's my procedure:

1) Use this procedure to produce my video:

2) Once I get to the HandBrake portion (CQ:RF 26 seems to be a good quality compromise), I render 4 separate .mp4s, embedding in each name the height of the render. In my example that would be:Horse240.mp4, Horse360.mp4, Horse480.mp4 & Horse720.mp4
3) I use MediaInfo to get the bitrates of each of the encodes. For example, Horse720.mp4 is 899kbps. These values are used in the "levels" params of JW Player. JW Player senses the user's bandwidth and switches to the appropriate video file for progressive download.
4) The "modes" params allow JW Player determine how to play the video. If the browser supports Flash, it plays in Flash. If not, it tries HTML5. If that fails, it downloads the video for local playback.
5) The following html uses jquery & simplemodal to get the "lightbox" effect - that's not needed and you can strip that out.
6) The "qualitymonitor" plugin shows the quality stats on playback and that should be removed for "production" code.

In any case, here's my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    Just a Horse

    <meta name="title" content="Name of your page" />

    <meta name="description" content="Page summary" />

    <link rel="image_src" href="http://www.jazzythedog.com/testing/images/Jazzy-Cartoon.jpg " />

    <link href="http://fonts.googleapis.com/css?family=Copse:regular" rel="stylesheet"

        type="text/css" />

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="js/jquery.simplemodal-1.4.1.js" type="text/javascript"></script>

    <script src="JWPlayer/jwplayer.js" type="text/javascript"></script>

    <script type="text/javascript">

        function playIt(divID, vid, width, height) {

            var pct = .70;

            var aspect = width / height;

            var w;

            var h;

            //Four Videos at three different Framerates

            //  These will be used for bitrate switching

            var vid720 = vid + "720.mp4"; 

            var vid480 = vid + "480.mp4"; 

            var vid360 = vid + "360.mp4";

            var vid240 = vid + "240.mp4";

            //Logic to size the player based upon the browser size 

            if ($(window).width() / $(window).height() > aspect) {

                h = Math.round($(window).height() * pct);

                w = Math.round($(window).height() * pct * aspect);

                //                alert("h=" + h + "\r\n" + "w=" + w + "\r\n" + "Ratio =" + w / h);

            }

            else {

                w = Math.round($(window).width() * pct);

                h = Math.round($(window).width() * pct / aspect);

                //                alert("h=" + h + "\r\n" + "w=" + w + "\r\n" + "ratio =" + w / h);

            }

            //Don't make the Player larger than the source footage

            if (h > height) {

                h = height;

                w = width;

            };



            jwplayer('container').setup({

                //'file': vid,

                // Use MediaInfo to get the bitrates for each video file

                'levels': [

                    { bitrate: 899, file: vid720 },

                    { bitrate: 475, file: vid480 },

                    { bitrate: 330, file: vid360 },

                    { bitrate: 200, file: vid240 }

                    ],

                'height': h,

                'width': w,

                // comment out the following for production code

                'plugins': {

                    'qualitymonitor': {} 

                }, 

                // The following will configure JW Player to 

                //    Play Flash, if not supported then

                //    Play HTML5, if not supported then

                //    Download the file

                'modes': [

                    { 'type': 'flash',

                        'src': 'JWPlayer/player.swf'

                    },

                    { 'type': 'html5',

                        'config': {

                            'provider': 'video'

                        }

                    },

                    { 'type': 'download', config: {

                        'provider': 'video'

                    }

                    }],

                'events': {

                    'onComplete': function () {

                        $.modal.close();

                    }

                }

            });



            $(divID).modal({

                opacity: 80,

                overlayCss: { backgroundColor: "#342826" },

                containerCss: { height: h, width: w },

                onClose: function () {

                    $.modal.close();

                }

            });



            jwplayer('container').play();

        }

    </script>



    <style type="text/css">

        #simplemodal-container a.modalCloseImg

        {

            background: url(images/x.png) no-repeat;

            width: 50px;

            height: 58px;

            display: inline;

            position: absolute;

            top: -20px;

            right: -20px;

            cursor: pointer;

            z-index: 3200;

            overflow: hidden;

        }

        div.divmain

        {

            background: url(images/JazzyEmboss.jpg);

            background-color: Gray;

            width: 1024px;

            height: 768px;

            margin: 0 auto;

        }

        

        .vidbutton

        {

            margin-left: 50px;

        }

    </style>

</head>

<body style="background-color: #686868;" onload="playIt('#player','Videos/Horse',848,480);">

    <div class="divmain">

        <h1 style="font-family: Copse, Verdana; color: Orange; text-align: center; padding-top: 20px;">

            Just a Horse

        [/title]

        <div style="height: 200px;">

        </div>

        <input id="Button1" class="vidbutton" type="button" value="Play" onclick="playIt('#player','Videos/Horse',848,480)" /><br />

        <!--        <input id="Button2" class="vidbutton" type="button" value="Video 2" onclick="playIt('#player','Videos/Horse',848,480 )" />-->

    </div>

    <div id="player" style="display: none; overflow: hidden;">

        <div id='container'>

            Loading the player ...</div>

    </div>

    <div style="display: none;">

        <img src='Images/x.png' alt='Close' />

    </div>

</body>

</html>

Note this forum's codeblock posting bug:

...Jerry

musicvid10 wrote on 1/4/2012, 10:24 AM

I downloaded the clip and I have a couple of observations RE playback stutter.
It was encoded with x264, so a couple of things you can try are:
-- Disable 8x8 DCT
-- Disable weightp
-- b-frames are already disabled, but an interesting test would be 2 Ref, 2 B frames, with b-pyramid turned off.

Your maximum compression hit from disabling the first two is <5%.

That being said, the main cause of playback stutter on these browser players is a sustained high bitrate from detail in motion. Your average bitrate is 2850 Kbps (although the video bitrate is flagged incorrectly), but there are several seconds in the middle where it is sustained at 3600-3900 Kbps and the stutter is at its worst, definitely too much for browser players on most systems.

My suggestion then, is to reduce the average bitrate to around 2000 Kbps. That will definitely reduce the stutter, but maybe not eliminate it entirely on all systems. Quality should still be excellent for 960x480, you could probably get away with 1500-1800 Kbps ABR. The point at which the opening transition starts to block up is where you have gone too low (x264 doesn't have a very good way of controlling minimum bitrate).

amendegw wrote on 1/4/2012, 1:02 PM

Here's something else that might help. Create a page on your site with the following bit of code. I think it will work by making only 3 changes.

1) Fix the title tag by substiting GT & LT signs for the brackets.
2) Point the jwplayer.js to your own JWPlayer library
3) Point the player.swf to your own JWPlayer library

Note that it uses the "qualitymonitor" plugin. That should display statistics that may be helpful in diagnosing your problems - notably "Dropped Frames"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    [title][/title]

    <script src="JWPlayer/jwplayer.js" type="text/javascript"></script>

</head>

<body style="background-color: #000000;">

    <div style="margin: 0 auto; text-align: center;">

        <p style="color: orange; font-size: x-large;">

            Browser Testing</p>

        <!--This is the HTML for playing a JWPlayer Video-->

        <div id="container" style="margin: 0 auto; text-align: center;">

            Loading the player ...</div>

        <script type='text/javascript'>



            jwplayer('container').setup({

                file: 'http://www.compassionsensuality.net/Other/VEGAS_Forum_Q/PINK_DAWN.flv',

                height: 480,

                width: 960,

                flashplayer: 'JWplayer/player.swf',

                plugins: 'qualitymonitor'

            });



            jwplayer('container').play(); 



        </script>

    </div>

</body>

</html>

...Jerry

Soniclight wrote on 1/4/2012, 1:36 PM

"Ah, my post was too wordy, nothing will be posted here...." I thought. lol.

Thanks to both of you for your informative responses. The bitrate spike during the part that stutters seems to be the culprit. I really appreciate your time and effort, Jerry, but I'm not sure I can comprehend everything you wrote right now, so I'll have to come back and re-read once I'm more awake :o)

Musicvid, I'm somewhat familiar with your x264 parameters having read up on it a bit, but I can't adjust those in this converter as you stated. All I can do is slide the "Ratefactor" thing between 1.0/highest to 51.0/lowest slider. If I could find a freeware or under-USD $50 x264 converter to create FLV and such for my site, that would be great but I know of none so far. As you said, if I can maintain image quality at a 2000 rate, that may work.

amendegw wrote on 1/4/2012, 1:39 PM

"Jerry, but I'm not sure I can comprehend everything you wrote right now"Heh, heh. That's what my wife tells me all the time.

...Jerry

musicvid10 wrote on 1/4/2012, 1:52 PM

You really don't need to wrap as FLV.
MP4 from Handbrake works just fine in Flash based web delivery.

As far as the rate factor slider in your converter, start at 20 and work up or down from there. Obviously, different videos will produce different bitrates at the same rate factor. I take it you don't have advanced controls or VBR option in that converter?

Soniclight wrote on 1/4/2012, 2:22 PM

"You really don't need to wrap as FLV".

I don't know (yet) if JW/Longtail gives me other options. I'm just so used to the FLV/SWF player that I've stuck to that so far.

"MP4 from Handbrake works just fine in Flash based web delivery."

For some reason I thought Handbrake was a DOS/command line app, but just visiting there, I realize that maybe.... it's not that over-my-head to use. I'll seriously consider it for as I understand it, it's a useful and versatile program that comes in handy in various situations.

I've stayed away from it in part because it's been mentioned by the big poubahs/grand masters at this board and so I figured it was way too complex for me to dive into.

"I take it you don't have advanced controls or VBR option in that converter?"

Correct. Only said slider and audio bitrate drop-down (only up to 128). There are other output formats available, of course, including mp4 (including for specific platforms such as iPad, SPS, etc.). I'm just interested in what works for my site.

amendegw wrote on 1/4/2012, 2:26 PM

"I don't know (yet) if JW/Longtail gives me other options. I'm just so used to the FLV/SWF player that I've stuck to that so far"HandBrake rendered .mp4s work super with JW Player. See my code above. The example page I posted, Just a Horse uses HandBrake rendered video.

...Jerry

Soniclight wrote on 1/4/2012, 2:33 PM

"HandBrake rendered .mp4s work super with JW Player. See my code above. The example page I posted, Just a Horse uses HandBrake rendered video."

Great to know. I've just downloaded Handbrake and finally take the dive (maybe I'll become a big poubah/grand master here one day too - lol) I still have to go and study your input above, including the cool bitrate monitor thingy that you have at this example page. Useful little thingy :o)

PS: Is that horse yours and a Palomino? I once ride one long, long, long time ago--we wuz buddies.

amendegw wrote on 1/4/2012, 2:45 PM

Not steal musicvid's thunder, but watch the video:

and view the HandBrake settings on the project page: HD Video for the Web - Guide for Vegas Users (it's a slide show, you'll have to scroll thru the screens).

As I mentioned in my earlier posts, I've found that CQ:RF 26 (rather than 19 for YouTube uploads) works very well for JW Player. You might go even lower than that. Then you might experiement with musicvid's custom settings above.

...Jerry

musicvid10 wrote on 1/4/2012, 2:46 PM

Actually, Handbrake will make you look like a poobah grand master even if you're just a flimflam man like me. The Handbrake GUI has a relatively modest learning curve. Of course one can use the CLI if one wants.

If you really like to tinker, I can refer you to Nick Hope's favorite tools and toys here:
http://www.bubblevision.com/underwater-video/Vegas-YouTube-Vimeo.htm

Soniclight wrote on 1/4/2012, 3:43 PM

Thanks again for further responses.
I need time to digest all of this.

In general terms, I have to say that this x264 is a vast improvement over past encoding for the Net. I've read some of the specs/white paper type of stuff at Wiki and such. One thing I like about this and other collective projects (i.e. Handbrake and such) is that they un-seat Adobe's proprietary hold on video content encoding.

Adobe like Mac make great products but there is a certain amount of elitism IMO. Adobe's imaging and video editing apps are not very "for the 99 percent". I love to find and use quality far less expensive options. As an example:

While I studied Photoshop back in 1996-97, I could never afford it. One day around that time I was at Best Buys and saw a sale for Corel Graphics Suite which included PhotoPaint -- for just USD $99. As they say, the rest is history. As others are good at Photoshop, I've mastered PhotoPaint since then and have upgraded twice from v.7 > v.12 > X5. I'm very pleased with it.

My ego may be a bit embarrassed when I can't say I used Photoshop for something, but the craftsman in me doesn't care.
It's results garnered from the use of a tool that matter, not its name-plate or cache.

So I'm grateful for all of you pointing me towards Handbrake. Another cool discovery for "the pauper class" :o)
Hopefully it will stay open source and never be sold to Adobe, etc.

Soniclight wrote on 1/4/2012, 4:39 PM

Ah, viva Handbrake!

I just did my first test render and did it @1500 ABT with some things l left at deafault It's about a 25% bigger file than the FLV I did with Prism (I can probably whittle that down as I learn more on what I can tweak Handbrake) and the playback... is smooth as a baby's bottom :o)

LATER EDIT: Well, locally it played totally smooth, but it still hiccups a wee bit around the same place as originally, so I have some more tweaking to do...

Speaking of tweakin'....

Yes, I do want the audio to be decent since it is my own work (call it musician's ego). But I don't do surround - yet - and so what can I get away with in terms of cutting down on file size yet keeping quality? So far I've use lame mp3 in my FLVs.

Any settings, suggestions welcomed.
__________________

In terms of compatibility of JW player:

I just discovered that they've added three embedding modes (Flash, HTML5 and Download) that just about covers everything -- the last one in particular. Maybe I should keep up on stuff a bit more--but it's sometimes also too easy to get information overload these days :o)

[linkhttp://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/18508/jw-embedder-modes]JW Embedder Modes[/link]

amendegw wrote on 1/4/2012, 4:53 PM

Sonic,

Did you read my links in the post 4 posts above this one? There's a wealth of knowledge there. The one thing I would add (change) would be that CQRF:26 is a good place to start for JW Player.

...Jerry (who's beginning to feel like Rodney Dangerfield, again)

Soniclight wrote on 1/4/2012, 4:58 PM

Jerry -- Sorry, I haven't read everything yet, as I said a lot to take in.
But I had set it at default 26 for the first-out one I did with Handbrake mentioned above.
So it appears that I'm not a total clueless clutz :o)

amendegw wrote on 1/4/2012, 5:01 PM

All of the HandBrake settings are in the second link: HD Video for the Web - Guide for Vegas Users (remember it's a slideshow so you'll have to advance one frame at a time - or press play).

...Jerry

Soniclight wrote on 1/4/2012, 7:30 PM

I had an MME problem for mp4 and m4v files I'm working through and should be able to resolve soon, so I deleted the post that was here.

amendegw wrote on 1/4/2012, 8:08 PM

1) To configure HandBrake for .mp4: Tools->Options->Output Files-> MP4 FileExtension->Always use MP4. Also on the main page of HandBrake, you will see Container: MP4 file. (btw, I believe renaming m4v to mp4 will work as well).
2) Make sure you have "Web Optimized" checked.
3) I'm guessing your error results because JW Player can't find "player.swf" rather than the video file. Double check to make sure the reference to "player.swf" is correct.
4) I can't download your m4v video. Have you mistakenly put an underscore rather than a period in the href of the anchor tag? i.e. it looks like PINK_DAWN_m4v s/b PINK_DAWN.m4v

...Jerry

Soniclight wrote on 1/4/2012, 8:18 PM

Thanks for Handbrake tip.

As far as the problem I described in my posting directly above--then deleted and to which you replied:

3) I'm guessing your error results because JW Player can't find "player.swf" rather than the video file. Double check to make sure the reference to "player.swf" is correct.
It was and in part still is a server MME issue:

I had to add mp4 and m4v to it, but the one for the latter "video/x-m4v" only works in part: second player now shows video, but no sound. Download version works as its supposed to. So I have to go and look for either an audio-video MME version of that MME parameter or a separate one to recognize the audio in m4v files. Or maybe if I switch to mp4, this no-audio won't happen.

Still working on this...

LATER EDIT: Now I replaced the m4v URLs in the page and player with mp4, but still no audio in player version.

amendegw wrote on 1/4/2012, 8:26 PM

I'm not sure I understood your post, but I would strongly recommend that you abandon the .m4v videos and only work with .mp4 I'm not sure that JW Player understands the .m4v extension. I know it works very well with .mp4

...Jerry

musicvid10 wrote on 1/4/2012, 8:32 PM

You just can't stream .m4v because Flash doesn't understand it.
That being said, the .mp4 and .m4v extensions are interchangeable. You can call one the other, and vice versa. Specifically, .m4v is Apple's name for .mp4 with chapter support.

In Handbrake preferences, you should change the option to force the .mp4 extension on all encoded files.

amendegw wrote on 1/4/2012, 8:34 PM

One more thing... I don't think you will have MIME issues if you play the files via JW Player. You might have MIME issues if you href the file via an anchor tag. However, there's an easy solution to that - just zip the file and

<a href="blah/blah/Pink_dawn.zip">Pink_dawn.zip</a>

...Jerry

Soniclight wrote on 1/4/2012, 8:40 PM

Download versions now download fine (without .zip thing, though good workaround :o)