Videos offer an efficient and engaging method of conveying information as well as providing entertainment and visual aids. Subsequently, they are being used increasingly more by organizations and individuals for websites, blogs, and various forms of media in an effort to improve user experience. Videos make up a significant section of internet content and it is therefore important for both amateur and professional software and web designers to understand how to manage their video content.
Traditionally, the only way to effectively embed videos onto a webpage was with the use of Adobe Flash. Consumers were required to have the Adobe Flash plugin in order to see videos which most people have but still creates a level of separation. Newer systems such as HTML 5 and JavaScript include video proponents that don’t require a Flash plugin. The HTML 5 has methods to embed a video on a webpage while its properties can be manipulated with JavaScript.
HTML
Video embedment is initiated with the use of the <video> tag. There are then a number of attributes that can be included in the code to adjust the video as preferred. Along with typical controls buttons for volume and progress, these can include options for the height and width of a video, making a video loop back to the beginning after playback ends, a mute “true” or “false” option to control the playback sound, an option to display an image or ‘poster’ before playback commences and an autoplay option.
JavaScript
The HTML5 <video> tag can be connected with JavaScript from where users can have control of all the same features as well as set up more intricate and complex video settings and user interactions via the mouse and keyboard. JavaScript connects with HTML5 through the Document Object Model (DOM) interface which allows users to translate video information. When writing code instructions for videos with JavaScript, users are advised to use MediaElement which supports media files and streaming content and allows for the control and monitoring of videos and their players.
Managing Videos
Now we know how to embed them and organize playback, let’s look at how to manage video files.
- Responsive Sizing
Responsive videos follow the same concept as responsive images in that their size is dependent on the format and size of a user’s device. Such parameters can affect how the video is cropped as well as it’s quality when played. Whichever way the height and width is limited, videos will always maintain their shape, otherwise known as aspect ratio. Common ratios include the standard 4:3 and Instagram 1:1. If height and width don’t match the aspect ratio, the extra space will be filled with a background colour.
The sizes can be set in two ways. Firstly by setting the width to 100% and the height to auto. This forces the video to expand to the maximum size possible. Alternatively, video controls can be set to max-width which allows videos to be played at a specific size but is more flexible as the width can be reduced if necessary.
“optimizing the video sizing for various forms of receptacle devices can create a user-friendly and attractive usage of video on a website for all viewers,” says Tom Harwood web developer at Britstudent and Writemyx.
- Text Tracks
“A simple solution to making videos more interactive, unique, and accessible to users is to utilize the Text track function,” says Shauagh O’ Doherty, tech writer at Australia2write and Nextcoursework. Tracks are used to embellish videos with subtitles, captions, and timed descriptions. They are positioned on top of the video using the <track> tag. Specific languages can be selected, and multiple tracks and types can be included in one video.
- Format
Maybe the most important aspect of video embedment and embellishment is the format features. The wrong format can prevent a video from being played on a specific device. Designers should use a preferred format and a backup format to ensure playability on a range of devices. They do this by defining the <source> of the video which acts as the default, followed by extra <source> tags that provide the backups.
Conclusion
Managing videos with HTML 5 and JavaScript need not be as complicated as many users first assume. The specific tags may take some practice to become comfortable with but with practice, coders will be embedding videos with ease and without the need for Flash.
Michael Dehoyos is a marketing expert who imparts his expertise as a content marketer and editor at Phdkingdom and Academicbrits while contributing writing to numerous sites and publications including Originwritings. Additionally, he offers marketing consultancy to companies in need of strategy.
