I wonder if its possible to download just the first 5 chunks (5MB) of a html5 video and so prevent to have high traffic bills when showing videos >100MB
the only way to have some control over this is with the preload attribute on the video tag. Sadly this is implemented differently in different browsers (eg auto may download 2s, 25s or the whole video depending on the connection).
Solutions like FMS or IIS SmoothStreaming allow more control, but require plugins (Flash or Silverlight) to manage that experience
preload='none'
From the spec, “Hints to the UA that the user is not expected to need the video, or that minimizing unnecessary traffic is desirable.”
preload='metadata'
“Hints to the UA that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable.”
preload='auto'
“Hints to the UA that optimistically downloading the entire video is considered desirable.”
preload or preload=''
The preload attribute is specified but no value is given. Specifying the empty string is the same as specifying “auto”.
Related
If you put video tags on a page, with not much other attributes other than src (just a onclick javascript handler), what is the usual behavior of browsers? Will they download the video(s) completely? Just some frames? Is this browser specific?
I have been asked to review a site, which showcases a lot of videos, so I am just curious.
This behaviour is browser specific and as browsers get updated so often it may change over time. I believe the spec 'advises' the default to be 'metadata' (see below).
There is a 'preload' attribute which can have several values to instruct the browser to do what you want. It is a 'hint' attribute so browser do not have to follow it:
auto - load when the page loads
metadata - only load the metadata when the page loads
none - don't load the video when the page loads
If the attribute is present with not value or an empty string then is taken as auto case above.
Its worth being aware that this page may be ignored in some cases - one common example was browsers on mobile devices which in the past generally ignored preload to protect a users data usage, although this is changing now.
More info here - worth checking as browsers change often: https://developer.mozilla.org/en/docs/Web/HTML/Element/video
Its probably worth mentioning also that if the video server is providing the video in a streamed format such as HLS or MPEG DASH, then the client will typically only download enough of the video to fills its buffer anyway. These protocols split the video into segments or chunks which the client downloads as required.
Hi,
I developed a simple web server based on an open source C++ project.
In this web server there are a lot of wave files which I would like to show to web clients by using tag of HTML 5.
I added wave files like following sample in html files which are sent to web browsers.
<audio controls>
<source src = "sound.wav" type="audio/wave">
</audio>
But Now I would like to know how web servers handle tag and send stream data to web clients when web clients push play button.
I need to implement it from scratch in my web server.
I read a lot of posts but most of them just handle client side issues.
I need to deeply know how server side of a request is handled.
Best Regards
AS you can see in MDN doc https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
The HTML element is used to embed sound content in documents.
It may contain one or more audio sources, represented using the src
attribute or the element; the browser will choose the most
suitable one.
The stream is not send to web clients when web clients push play button but is send when the page is loaded (lile all the media in a web page)
you can control the execution using some attribute like :
autoplay
A Boolean attribute; if specified (even if the value is "false"!),
the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.
buffered
An attribute you can read to determine which time ranges of the media have been buffered.
This attribute contains a TimeRanges object.
preload
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
none: indicates that the audio should not be preloaded;
metadata: indicates that only audio metadata (e.g. length) is fetched;
auto: indicates that the whole audio file could be downloaded, even if the user is not expected to use it;
the empty string: synonym of the auto value.
Serving a file is something I bet you already know. To serve audio streaming, there are streaming protocols. One is ShoutCast and here you have a nice example in Python.
https://github.com/inforichland/PyCast
Is there a way to control how much of the file will be buffered ahead, once you click play, much like Youtube once did?
If you use the built-in video support in the browser then there is no way to control the amount of data that's being buffered. It depends on the browser implementation and there is no API to control it.
Browser implementations are quite good and typically a browser buffers just a small portion of the video before playback begins. Browsers don't download the whole file. However if a file gets completely downloaded by the browser before playback begins then possible causes include:
Maybe the file is very small and the browser has decided to buffer the whole file in memory.
Maybe the header of the file (required to initialize the video decoder) is not at the start of the file but at the end and the browser has to download the whole file until it reaches it. This is uncommon nowadays but old video encoders used to place the mp4 header at the end of the file instead of at the beginning because it simplified the encoder's implementation.
I've noticed that browsers behave oddly if an mp4 file doesn't have a segment index (used for seeking) in its header. Some browsers download the whole file so that they can build a segment index themselves.
If your server is old/misconfigured then the browser may decide that range requests are not supported and download the whole file (or disable seeking).
If you require to control the buffered amount before playback begins then you have to use a more sophisticated protocol (MPEG-DASH, HLS) and a javascript player that allows you to control this parameter. Youtube use MPEG-DASH and have their own player that they've developed over the years.
I'm pretty sure you c an't stop the HTML5 video from buffering the entire video, but here is a useful link for working out how much of the video has been buffered.
https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/buffering_seeking_time_ranges
Like mylescc mentioned, preventing the video element from buffering might not be possible, without a workaround (described in a similar posting). However, depending on your use case, you can also make use of existing player implementations, which provide this functionality, like the bitmovin player, dash.js, etc.
I have a two-hours long video, that I want to stream through HTML5 video tag (and ye old good Flash as fallback)
So I have four files: mp4, ogv, webm and flv (500-800Mb each)
My server returns right Content-Type and Accept-Range headers
I know about qt-faststart for .mp4 files and yamdi/flvtool2 for .flv files
Do I need any extra tools for .webm and .ogv? Or any other server setup?
Is it possible to ask browser to don't downloaed the whole file, but cache only ~5 minutes ahead?
depending on the browser the behavior can differ, and the only real control you have is via the preload attribute. Depending on the guidance in the preload attribute the browser will attempt to do what it thinks is right given network conditions etc. You can specify one of three options: none; metadata; auto
none: this assumes that the user won't play the video, so does not preload anything
metadata: just preloads metadata (video dimensions, captions etc)
auto: optimizes for user experience so may only download the next 5 mins, but if bandwidth is available may try and suck down the whole file
Note: if you specify autoplay as well, this assumes the need to gather metadata and at least enough to establish a buffer to play so it becomes a de factor "preload: auto" condition.
http://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload
Is it possible that when I click on the pause control of a HTML5 video the video transaction pauses on the server?
According the specifications (See http://www.whatwg.org/specs/web-apps/current-work/#the-video-element): "When a video element is paused and the current playback position is the first frame of video, the element represents the poster frame, unless a frame of video has already been shown, in which case the element represents the frame of video corresponding to the current playback position.
When a video element is paused at any other position, and the media resource has a video channel, the element represents the frame of video corresponding to the current playback position, or, if that is not yet available (e.g. because the video is seeking or buffering), the last frame of the video to have been rendered."
And the important part: "User agents should provide controls to enable or disable the display of closed captions, audio description tracks, and other additional data associated with the video stream, though such features should, again, not interfere with the page's normal rendering.
User agents may allow users to view the video content in manners more suitable to the user (e.g. full-screen or in an independent resizable window). As for the other user interface features, controls to enable this should not interfere with the page's normal rendering unless the user agent is exposing a user interface. In such an independent context, however, user agents may make full user interfaces visible, with, e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.
User agents may allow video playback to affect system features that could interfere with the user's experience; for example, user agents could disable screensavers while video playback is in progress."
By my opinion the answer to your question is: it depends from User-agents (i.e. browsers) implementations, maybe in future we will see this feature available in Chrome, Firefox, Opera, etc. but for now pausing transaction when pausing video is not implemented.