Menu
Is there any defined behaviour if I have an HTML5 VIDEO tag but include neither a SRC attribute nor SOURCE tags inside the element? Would this still be valid HTML, and if so, what should the (HTML5 capable) browser do - ignore the element or display it's contents?
722
There are 3 things to check: make sure your video files are properly encoded for web delivery. make sure the server where the videos are hosted is properly configured for web delivery. make sure your others scripts on the page do not interfere with video playback.
The <video> tag is used to embed video content in a document, such as a movie clip or other video streams. The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.
If you come across an HTML5 page with the following error message “file not found,” then it means your browser doesn't have the proper video codec installed. For example, if you are using Google Chrome and you come across an HTML5 MP4 video, then you may get an error message because you don't have an MP4 codec.
The hidden attribute hides the <video> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <video> element is not visible, but it maintains its position on the page.
Yes, there is defined behavior; HTML5 is trying to provide defined behavior for any case in which it could make a difference between browsers, to reduce incompatibility, even when dealing with invalid documents.
From my reading of the spec, it looks like it is invalid to have no src attribute or source element:
Content model:
If the element has a src attribute: transparent, but with no media element descendants.
If the element does not have a src attribute: one or more source elements, then, transparent, but with no media element descendants.
This seems to indicate to me that it must have either a src attribute or a source child element. But both the Validator.nu and the W3C Validator seem to think this is a valid document:
<!DOCTYPE html>
<title>Video test</title>
<video></video>
Regardless of whether it's valid, the behavior is defined in the resource selection algorithm as follows:
⌛ Otherwise the media element has neither a src attribute nor a source element child: set the networkState to NETWORK_EMPTY, and abort these steps; the synchronous section ends.
This implies a ready state of HAVE_NOTHING
HAVE_NOTHING(numeric value 0)
No information regarding the media resource is available. No data for the current playback position is available. Media elements whose networkState attribute isNETWORK_EMPTYare always in theHAVE_NOTHINGstate.
In that state, the video is represented by its poster frame, or nothing:
When no video data is available (the element's readyState attribute is either
HAVE_NOTHING, orHAVE_METADATAbut no video data has yet been obtained at all), the video element represents either the poster frame, or nothing.
When it's represented by nothing, that means it appears as just a generic box; like a div, that can be styled but has no intrinsic display of its own, though it will be the width and height specified by its width and height attributes. For example:
<!DOCTYPE html>
<video width=100 height=100
style="border-width: 1px; border-color:black; border-style: solid;
background: green">
foobar
</video>
Note that it does not display its content, in browsers that support the video tag. Content within the video tag, other than the source elements, is intended to be fallback content displayed only by older browsers that don't support the video element:
Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
