Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is the Video source type tag optional? If it is should I put the src inline rather than nested?

I'm using the following to display a video player:

<video id="VideoPlayer816" controls="true" >    
    <source src="me-breaking-dancing-naked-covered-in-peanut-butter-and-jelly-num-33.mp4">
</video>

Do I have to put the type="video/mp4" in the source tag? With the previous code it worked fine in Firefox.

I'm not sure if I will be using the the same video type every time so I don't want to hardcode it or regex the extension* if the browser can figure it out if I do not include it.

According to caniuse all browsers support the h264mp4 type, http://caniuse.com/#feat=mpeg4.

Can I safely leave off the type tag or should I put the src inline since I'd rather have the browser figure out the type for me?

*There are numerous problems with extensions, sometimes there is none, sometimes they are incorrect. Some professional software completely ignores the extension type and uses the file headers.

I would rather trust the browser to determine the video type if I do not have control of the name and extension of the video. Hint: Users will be able to upload from their phone or laptop a quick vine type of video.

like image 299
1.21 gigawatts Avatar asked Dec 29 '15 07:12

1.21 gigawatts


People also ask

What is SRC in video tag?

The src attribute specifies the location (URL) of the video file.

Why video is not playing in HTML?

If you encountered “HTML5 video not found” error while playing a video on any website then it implies your browser doesn't support the HTML5 format codecs or your browser doesn't have the proper video codec installed.

What is the use of source element in video element of HTML5?

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

What is source tag used for?

The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>. The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width.


1 Answers

According to the WHATWG HTML Living Standard:

The type attribute gives the type of the media resource, to help the user agent determine if it can play this media resource before fetching it. If specified, its value must be a valid MIME type.

In other words: the type attribute is optional. If specified, its purpose is to help the browser determine if the resource can be played or not.

Specifying type (and for that matter source) makes most sense when dealing with multiple sources. For example:

<video>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg"> 
</video>

If the browser supports ogg but does not support webm then the browser will not request even a single byte from foo.webm. Instead it will request foo.ogg right away. This saves at least one HTTP request and significantly improves the loading times.

If there is only a single source then omitting type (or using the MediaElement src attribute) makes more sense and avoids possible wrong type values. IMHO the only point of specifying type in this case is to speed up the detection of unsupported sources. For example:

<video>
  <source src="foo.ogg" type="video/ogg"> 
  Ogg not supported
</video>

Theoretically, if the browser does not support ogg it should display Ogg not supported immediately without even requesting foo.ogg. This could come in handy if one is implementing flash fallback, for example.

like image 109
Svetlin Mladenov Avatar answered Oct 07 '22 12:10

Svetlin Mladenov