dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: How do I improve playback of Embedded Videos?

  1. #1
    Join Date
    Apr 2011
    Posts
    19

    How do I improve playback of Embedded Videos?

    I embedded some videos on a site I am building. The videos are hosted on Vemeo. They will be viewed in a ‘LightBox’ type of window when launched. The JQuery script I used is named ColorBox.

    The videos seem to play fine but on some machines playback starts out stalled and jaggy. If I was creating a Flash site the obvious answer would be to create a preloader but this site is entirely xHTML and JavaScript.

    Anyone know how to improve playback for embedded videos? Is there a way to create a preloader or some such similar solution?

    Thanks


    Link: garrigan.net/sites/DSF_New/

  2. #2
    Join Date
    May 2011
    Posts
    194

    preload and runtime machine of player

    Hi,

    preload need runtime machine of player

    preload images in javascript --> use new Image() function
    preload flash --> use functions of flash runtime, maybe http://www.senocular.com/flash/tutorials/preloading/
    streaming video --> no preload needed.
    embed Quicktime in HTML (mp4 video) --> quicktime should preload.
    html 5 media (ogv, webm, oga etc.) --> AUDIO tag with AUTOBUFFER

    preload flash with pure html --> not possible (runtime machine of flash player needed)

    some players support preloading and or streaming.

  3. #3
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    WHAT...???? I have no idea what twseitex is talking about.....
    The cause of your problem
    but on some machines playback starts out stalled and jaggy.
    is that the bitrate is too high for the viewers particular Internet connection download speed.
    Each video is encoded at a particular "bitrate". That bitrate is the amount of data that the media player must constantly be receiving or the player (not the video itself) will have to stop displaying video for a moment while it (the player) waits for more data to be delivered via the Internet.
    If the viewers Internet connection does not provide fast enough delivery of that data, the video will appear "stalled and jaggy".
    Video is normally NOT used with preloaders, since it is "progressively downloaded"... preloading just makes the viewer wait anyway... exactly the same as progressive download.
    The simple solution... reduce the bitrate and/or the display size.
    For a review on bitrate:
    Video bit rate

    One of the principle of goal setting is to "Begin with the end in mind". In this case it'll be very hard to give good recommendations because the end is not defined. So I'll just make a few assumptions and you can correct me as needed.
    First, I'll assume that since you are converting to Flash, you want to deliver this video over the Internet. If that's true, then we'll have to make some assumptions on the Internet connection download speeds of your potential viewers. Let's just say that most have at least a 1.5Mb connection or faster.
    OK, that would mean that a video bitrate of half that should usually provide a video download that is not interupped by buffering (most of the time anyway). So assuming a video bitrate of 750kbps, what would the optimum display dimensions be?
    Before we decide, here's a little info about bitrate. For highest quality playback, the video bitrate is tied directly to the display dimensions. That is, the larger the display, the more incoming data is required to properly display the video. Think of bitrate in terms of a can of paint. If you have 1 quart of paint, you might be able to do a very nice job on a 32 X 24 foot area. But if you try to stretch that same amount of paint out over a 64 X 48 foot area, the coverage will not be nearly as good and you get poor results.
    In the same way, a video displayed at 640 X 480 pixels will require 4 times the bitrate as a video displayed at 320 X 240 pixels to produce the same quality. So for example a video with a bitrate of 100kbps, displayed at 160 X 120 will produce the same quality results as a video with a bitrate of 1600kbps if displayed at 640 X 480.
    So to boil it all down, video bitrates of 750kbps, even up to 1000kbps can usually get delivered of the Internet on most high speed connections. Higher bit rates may work for really fast connections but will cause problems for viewers with slower connections. Video display size has a direct bearing on the final quality. In the 750 to 1000kbps range, display size should be kept around 450 or 500 width max (and whatever height the aspect ratio calls for). Yes it can be displayed larger, but the quality will suffer.
    Sound like your audio settings are fine, especially for Internet delivery.
    As for framerate, maintain the original raw video framerate for best results. So if the video was shot at 24fps, leave it.
    As for video converters, do you have the Flash 8 Video Converter? It works just fine for video to be delivered over the Internet. Remember, you are taking a Cadillac version of video (h.264 HD) and stuffing it into a Chevy body to get it to work over the Internet.
    Do you know your own Internet connection download speed? or test here:
    http://www.speedtest.net/
    If you have a couple friends having download problems, ask them to test also and then choose a bitrate that is about two thirds of their max download speed. You may have to reduce your display size two accomodate them or offer to bitrates, and high and a low.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  4. #4
    Join Date
    Sep 2010
    Posts
    84
    great discussion..

  5. #5
    Join Date
    Apr 2011
    Posts
    19
    Thanks Eye For Video. I suspected this was a bandwidth problem but try explaining that to your client. The guy wants to know why his high quality HD videos aren't playing well on an old laptop while he's sitting at Starbucks. Because maybe public WiFi isn't that great!!!!

  6. #6
    Join Date
    Aug 2011
    Posts
    1
    What a nice discussion we have here. its really nice explanation. thumbs up!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles