Video

Page address: https://web.mnsu.edu/its/web/editing/template/documentation/video.html

Video files can be very useful in bringing unique content to your webpage. They can quite literally show your users something that just text and pictures cannot.

With the new HTML5 and the implementation of this tag we no longer need to put videos on outside sources such as Youtube to be able to display them effectively.

<video controls>

	<source src="movie.mp4" type="video/mp4">

	<source src="movie.ogg" type="video/ogg">

	<source src="movie.webm" type="video/webm">

	<track label="English" kind="captions" srclang="en" src="captionfile.vtt" default></track>

	Your browser does not support the video tag.

</video>

File Types

There are three main file types that can be linked using the video tag. MP4, Ogg, and WebM may be used with the video tag. Please have your video file in these forms before trying to link onto your webpage. When writing the code the type="" must be present and match the type of file you are linking to otherwise it will not display.

As you may have noticed all three different files are being linked. This is the new standard for HTML5 in that the <video> can look for multiple different files, and will only display one. The thought here was that if for some reason the browser was unable to play a certain file, or if one of the files were not working for some reason there would be others there as a backup to link to.

In this way the text works the same. The text saying Your browser does not support the video tag. will appear in place of the video player if the files were not able to play for any reason. This can be a useful safety net to use when develop your site to see if you have linked your files correctly, or if files are not working properly.

Video Captioning

Due to our accessibility standards every video that we place on our site should have captioning to go along with it. Captioning is done by adding in a <track> tag, as shown above, that links to a VTT file which stores the information for captioning the video. If you need to get a VTT file for your video you can contact the IT Service Desk and one can be made for you, or you can do it yourself by following the WebVTT Instructions. If you have any questions or concerns about accessibility please contact Ginny Bessler.