Recipe 16.7. Managing
and Monitoring Buffering and Loading
Problem
You
want to manage video
buffering and monitor the progress of a video as it downloads.
Solution
Use the bufferTime property to set the
number of seconds that must buffer before playback starts, and then
use bytesLoaded and bytesTotal to monitor the
download's progress.
Discussion
By default, video starts to playback as soon as
0.1 (one-tenth) seconds of the video has buffered. Larger buffers
can ensure a smoother playback. At 0.1 seconds, it is possible that
users with slower connections or connections with spikes in network
usage could experience choppy playback or frequent rebuffering. If
you increase the buffer size, users will most likely experience a
smoother playback. You can set the buffer using the
bufferTime property; the following sets the buffer time to
10 seconds:
videoStream.bufferTime = 10;
Generally a one-buffer-fits-all approach is not
the optimal solution. Although it may work in most cases, you
cannot ensure the best user experience with that approach.
Guaranteeing the best playback experience for all users requires
slightly more work. The first step is to detect each user's
bandwidth. Once you've detected a user's bandwidth (see
Recipe 16.14), you have two basic options:
-
If it's acceptable that users with slower
connections view lower quality encodings of the video, you can
encode many versions of the video at different bit rates and select
the appropriate one for the user based on the detected
bandwidth.
-
If you want all users to view the same video
(encoded at the same bit rate), then you can set the buffer based
on the detected bandwidth. That means users with slower connections
will have much higher buffer values and will have to wait longer
before the video starts to playback.
If you want to display progress to the user
while video is buffering, you can use the bufferLength
property in conjunction with the bufferTime property. The
bufferLength property is a read-only property that returns
the number of seconds currently in the buffer. You can use
bufferLength/bufferTime to return a ratio for the
buffer progress.
The bufferLength property tells you how
many seconds have loaded into the buffer, but it doesn't tell you
how much of the entire video has downloaded. You can use the
bytesLoaded and bytesTotal properties to
determine how much of the entire video has downloaded.
See Also
Recipe
16.1 and
16.14
|