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

Question

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.

Answer 1

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.