Website for hosting video....

[Jeff Harper]

Danny, your jerky motion with Vimeo is likely the result of improper encoding. I'm new to Vimeo, but the key is proper project settings, encoding, etc. including proper deinterlacing, etc.

I used wmv files when I began video, and the quality is superior, colors are sharper as is detail. Flv compression sucks in comparison.

On the other hand wmv files, in my business, harken back to the 90's or something, very dated.

For a church audience you have a captive audience, so I suppose it doens't matter in your case.

[Danny Fye]

The magic question is what are the proper settings and encoding?

I tried their suggestions and everything I can come up with and absolutely nothing works!

Oh well, as long as the zipped wmv files work I will let Vimeo be...

[Jerry Amende]

Originally Posted by Danny Fye

The magic question is what are the proper settings and encoding?

I tried their suggestions and everything I can come up with and absolutely nothing works!

Oh well, as long as the zipped wmv files work I will let Vimeo be...

Danny, I know you say you prefer wmv, but if you go here: HD Guide for Vegas Users and use the HandBrake settings (for that matter, follow the entire procedure), I think you'll be happy with the results.

Good Luck!
...Jerry

PS: I've noticed less stuttering in recent Flash Player plugin upgrades.

[Seth Bloombaum]

Originally Posted by Jeff Harper

...I used wmv files when I began video, and the quality is superior, colors are sharper as is detail. Flv compression sucks in comparison.

On the other hand wmv files, in my business, harken back to the 90's or something, very dated...

WMV set the bar for picture quality for the bitrate for many years, since the introduction of the WMV7 codec family.

Early flash video using the Spark codec was horrible - no question about it. Numerous freeware encoders were built on the free Spark codec, they all made horrible video.

Later, the VP6 flash video codec was introduced - this wasn't quite the same picture quality for bitrate that WMV was, but was pretty good, at least it was now in the same ballpark for pq as WMV. However, this codec only came in costly encoding products like Squeeze, Flix, and the Flash authoring app. More recently, a consumer version of Flix with VP6 was available from On2 for $40, then Google bought On2, and Flix went to Wildform, which now has a $50 version of Flix with VP6.

VP6 is a very good codec. Availability of this codec meant FLV could be of acceptable quality at bitrates comperable to WMV.

Most recently, the push is for h.264/MPEG-4/AVC in the flash player. This codec arguably equals or surpasses WMV for pq for the bitrate. However, the decode, especially at higher bitrates, is much more processor intensive than either VP6 or WMV, and so is unsuitable at high bitrate and HD for users of older computers.

Originally Posted by Danny Fye

...One reason for wmv is many people cannot install a player for other formats. So wmv works best for most...

This statement seems 180-degrees from commonly accepted practice. Most people will tell you that Flash Player has greater market penetration than Windows Media Player (it does!).

However, if you exclude Macs and mobile devices from consideration, WMPlayer has excellent market penetration too. Perhaps this is why wmv seems a better choice for members of Danny's church.

**************************************
Which brings up the most important consideration when we're making these streams or clips available - the audience, their expectations, their level of tech sophistication, their likely viewing platforms, and the sustained bitrate their internet connection can support.

The next consideration might be what tools we can employ. For example, Danny's viewers benefit from a local copy of a long clip. Maybe they would be better served by a WM (or flash) player embedded in a web page, but, as Danny points out, they would need a way to skip ahead to the point they're interested in - possible with a web player, but not commonly implemented, and much more sophisticated html coding, as I understand it.

For another example, somebody who has a (name-your-codec)-based workflow that satisfies the people who care is going to be reluctant to change it, even for the promise of higher quality.

[Jerry Amende]

Originally Posted by Seth Bloombaum

However, if you exclude Macs and mobile devices from consideration, WMPlayer has excellent market penetration too. Perhaps this is why wmv seems a better choice for members of Danny's church.

If you're dedicated to wmv renders, Silverlight is also an option. Here's a sample of a WMV render that works fine in IE, Firefox, Chrome as well as Safari: SilverLight Demo However, I doubt that there are many mobile devices that will play it.

That said, if you combine HTML5 & Flash with h.264, Theora & Webm source, you can play on most any platform. I'm still experimenting, but I've got the following to play on pretty much everything except a 'droid phone: Flash/HTML5 Testing Unfortunately, I don't have a 'droid to test with, so I'm not sure how much further I'll get.

Here's the 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 runat="server">
    <title>Flash/HTML5 Testing</title>
</head>
<body style="background-color: Black;">
    <form id="form1" runat="server">
    <div style="width: 1024px; margin: 0 auto; background: url(Images/html5.gif) repeat;
        text-align: center; padding-bottom: 50px; -moz-border-radius: 15px; border-radius: 15px;">
        <h1 style="text-align: center">
            Flash/HTML5 Testing</h1>
        <video style="-moz-border-radius: 15px; border-radius: 15px;" width="480" height="270"
            autoplay controls>
            <source src="Videos/HandHelds/Horse.mp4" />
            <source src="Videos/HandHelds/Horse.webmvp8.webm" type='video/webm; codecs="vp8, vorbis"' />        
            <source src="Videos/HandHelds/Horse.theora.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
               
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="295"
                id="player1" name="player1">
                <param name="movie" value="jwplayer54/player.swf">
                <param name="allowfullscreen" value="true">
                <param name="allowscriptaccess" value="always">
                <param name="flashvars" value="file=../Videos/HandHelds/Horse.mp4&autostart=true">
                <embed id="player1" name="player1" src="jwplayer54/player.swf" width="480" height="295"
                    allowscriptaccess="always" allowfullscreen="true" flashvars="file=../Videos/HandHelds/Horse.mp4&autostart=true" />
            </object>
         </video>
    </div>
    </form>
</body>
</html>

...Jerry

[Larry Reavis]

thanks, Jerry - I've always admired your work. I may (again) cut'n'paste your code - just to see if I can get a little traction on this.

I talked to my daughter last night who is a producer in a post-production house in Santa Monica, and she may give me a few leads on tiny hand-held 'droid devices that don't have an included phone (any suggestions?). Then maybe I can test further.

[Jerry Amende]

Larry, Feel free to use the code. If you get it to work with 'droids, please post the results back here or to the SCS form. One thing that you should be aware of... I used HandBrake to render the h.264 (.mp4) clips. And Miro: Miro Video Converter FREE - Convert any video to MP4, WebM (vp8), iPhone, Android, iPod, iPad, and more. to transcode the Theora & Webm.

Good Luck!
...Jerry

PS: Here's a very valuable resource: Dive Into HTML5

[Seth Bloombaum]

Jerry, thanks for posting that code sample. I look forward to working with it. Also, yes, the diveintoHTML5 looks great too.

For those wondering why html5 video code looks so friggin' weird, the problem is that there isn't agreement between the html5 browser manufacturers as to what is an appropriate video codec, which is very irritating to content producers wanting to use it. Actually, it's a small tragedy, that the "next big standard" isn't a standard at all. Apple appears to have been the big spoiler - I guess the point is that they're more concerned with icing competition in their mobile market than serving customers. That's just my slightly informed opinion, they probably see it differently, and their competitors aren't lily-white either... Here's some commentary from The Economist, I find it interesting, don't know if you will.

The result is what you see in Jerry's code snippet - a whole series of video sources in various formats, the intention being that a particular browser will ignore the code & codecs it doesn't understand, and execute the first code that it does understand. This isn't quite the same thing as sniffing out the browser and delivering code customized for that browser... which is another approach that is popular among coders.

For me, this has mostly been theory for html5, one of these days it's gonna' be important.

[Larry Reavis]

The way I read the JW Player propaganda, it is supposed to be able to "sniff out" the browser's capability and roll over to HTML5 as needed; but I haven't had much success with that so far - but my time is tight and I haven't really done justice to this project.

@Jerry:
"I used HandBrake to render the h.264 (.mp4) clips. And Miro: Miro Video Converter FREE - Convert any video to MP4, WebM (vp8), iPhone, Android, iPod, iPad, and more. to transcode the Theora & Webm."

Yes, me too, but I vaguely recall someone arguing that Miro had limitations and that maybe we should be looking at ?? (I can't remember the other one, but I think it was somewhere in that HTML5 thread)

[Seth Bloombaum]

I just ran my first tests on the code Jerry supplied in post #20 above...

Testing across iPad, Safari/Mac Firefox/Mac, and on the PC in IE8, IE9, Chrome, and Firefox, I seemed to have more luck nesting the html5 video code inside of the object, instead of as written.

But, I'm not sure I'm doing this the best way... Jerry, have you continued with this, or are you aware of others who are continuing this approach to multi-browser support?

[Jerry Amende]

Seth,

I've "kinda abandoned this" as I need to have a cadre of devices in order to test - and all I have are Windows computers and a Viewsonic gTablet.

However, my direction in posting to the web has taken a different turn. I'm now using the JW Player javascript api (rather than embedded objects).

I'll post some html tomorrow. It's all based on h.264 (mp4) videos, but it plays on many devices/browsers.

...Jerry

[Jerry Amende]

As mentioned in the previous post, I have no means to test this, but here's my latest venture into hosting video for multiple devices based upon JWPlayer. It has some "fluff" in it as it uses lighbox techniques based upon SimpleModal - not necessary and you can strip it out of the code.

Cutting to the chase, here's the URL of the test page: Autumn in Delaware I'd be very interested if folks in DVInfo-land with various devices/browsers could feedback its playability.

Here's the 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>
    <title>Autumn in Delaware</title>
    <meta name="title" content="Autumn in Delaware" />
    <meta name="description" content="An Autumn Day in Northern Delaware, featuring the Wilmington and Western Railroad" />
    <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;
            //video names for lower bitrates/framesize
            //  we have 3 video files at three different bitrates
            //  base file is 960x540, lower bitrate folders are 640x360 and 320x180   
            var vid640 = vid.split(".")[0] + "640.mp4";
            var vid320 = vid.split(".")[0] + "320.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;
            };
            // setup the jwplayer & use the levels param to switch bitrates
            // use MediaInfo to get the bitrates of each video file 
            jwplayer('container').setup({
                //                'file': vid,
                'levels': [
                    { bitrate: 1235, file: vid },
                    { bitrate: 660, file: vid640 },
                    { bitrate: 241, file: vid320 }
                    ],

                'height': h,
                'width': w,
                '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/Autumn2011.mp4',960,550);">
    <div class="divmain">
        <h1 style="font-family: Copse, Verdana; color: Orange; text-align: center; padding-top: 20px;">
            Autumn in Delaware
        </h1>
        <div style="height: 200px;">
        </div>
        <input id="Button1" class="vidbutton" type="button" value="Play" onclick="playIt('#player','Videos/Autumn2011.mp4',960,550)" /><br />
        <!--        <input id="Button2" class="vidbutton" type="button" value="Video 2" onclick="playIt('#player','Videos/Parrots.mp4',640,360 )" />-->
    </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>

Finally, my caveat - I'm not an html/javascript "expert" I just struggle thru the documentation and Google when I get errors.

...Jerry

[Danny Fye]

Originally Posted by Seth Bloombaum

Most recently, the push is for h.264/MPEG-4/AVC in the flash player. This codec arguably equals or surpasses WMV for pq for the bitrate.

With earlier versions of WMV encode I would agree but with the VC-1 I am getting much better pq for the bit rate and a much smaller file size than with h.264/MPEG-4/AVC.

I now divide the 1.5 to 2 plus hours Church service into related parts, compress them with Vegas in regions to wmv with audio settings being,

Mode: Quality VBR - Format: Windows Media Audio 10 Professional, Attribute: VBR Quality 10, 48 kHz, 2 channel 24 bit VBR,

Video settings are Mode: Quality VBR, Format: Windows Media Video 9 Advanced Profile, Image size custom, width 560, height 320, frame rate 29.970 (NTSC), Quality 83%.

While that gives a good quality video, it is not the best because I am trying to keep the file sizes as small as possible. So I am compromising a bit.

I am using Vegas 11 and have tried the MC AVC and Sony's AVC and I can't get anything close to what WMV gives me!

As for the handbrake method that seems more oriented to shorter and larger frame size videos.

Anyway, the VC-1 makes a huge difference for me.

Finally, I am not closed on this; I am always spending too much time looking for that magic something that will work for as many people as possible.

My target audience is everyone not just the Church members.

Living Hope Restoration Branch

[Ian Stark]

Jerry, complete success viewing the video in IE9. Some success viewing on a Motorola Xoom running Android 3.1, but no transport/volume controls. Worked fine on iPhone3GS.

Hope that's of use. Lovely footage, by the way. Delaware added to the list . . .

[Andy Wilkinson]

Works fine with Safari on a Mac Pro. Progress bar and full screen works as it should. You just can't beat a steam engine...Lovely!