Ever come across a wonderful website with lovely design and catchy animation, that you can’t help but fall in love with it?
One must have experienced such wonders as the internet has countless of them. Today, Multimedia has become a necessity for any modern website. Be it a meme that got shared, be it a tutorial video, an audio format or an animation that entertains the user during the loading time.
Multimedia is a perfect way of imparting knowledge, as visualization contracts the learning curve.
Check this out: Online Automation Testing Platform - Accelerate your release velocity with blazing fast test automation on cloud.
Codecs and their support
A codec is a program that speeds up the transfer of Multimedia by compressing then coding and decoding the file. These codecs support different Multimedia format and it is the duty of the web developer to keep in check what sort of formats are supported by the various browsers and their versions. Join in as we explore the numerous multimedia formats.
WebM
- It is a restricted version of the Matroska format that allows VP8 or VP9 video codec and the Vorbis or Opus audio codec. While it has been accused of patent infringement by a group of companies which lead to formation of patent pool but MPEG LA have agreed to license to google.
Ogg Theora Vorbis
- Ogg is the container and Theora is the video codec, while it supports majority of browsers like firefox, chrome, opera and to some extent can be used with safari by installing add-ons. Internet explorer lacks support completely. This format can be implemented for old browsers since the earlier versions lack support of the latest formats.
Ogg Opus
- Ogg container sometimes facilitates audio encoding with the help of Opus codec. The format has wide support in mostly firefox browsers and also mobile browsers.
Ogg FLAC
- It is very much similar with difference being the use of FLAC codec for encoding extensively used by Firefox, Thunderbird and SeaMonkey in both desktop and mobile.
MP4 (AAC or MP3)
- Using H.264 video codec and AAC audio codec, it is widely supported by both desktops and mobiles. Internet Explorer, Safari and Chrome support this wonderful browser, however Chromium and opera lack proper support. H.264 is currently not a royalty free format, it is therefore unfit for open web platform. Mozilla wholeheartedly supports this format as google lacks .
MP4 FLAC
- Using the FLAC codec MP4 files can be played with or without MediaSource Extension and DRM support.
MP3
- MP3 audio format is different from the MP3 audio contained within the MP4 container, it is actually supported in audio tag. Firefox, Chrome, Safari and android mobile browsers support this format too.
WAVE PCM
- The WAVE container format, taps into the PCM audio codec, it is supported by desktop browsers such as Firefox and Safari along with mobile browsers.
FLAC
- The format has support in the mozilla browser. Files are worked upon using FLAC audio/video codec.
Wav audio format
- Waveform Audio Format, aka WAV or WAVE, a typically compressed audio format.
Do you know you can perform cross browser testing with Android emulator. Ditch your in-house android browser emulator and test your website on cloud with official android emulators online.
Animations today
In the starting I mentioned about animations that steal your heart. Animations had always been part of the society but earlier the bandwidth didn’t allow them. Today, the scenario is different altogether. It is now possible to include animations in various new formats that not only catch the attention of the user but also do that without hindering with the efficiency of website.
Websites offer animations in different formats like GIF,SVG or simply video. Before this Flash was extensively used for this. But now the progress in CSS, HTML, canvas, JavaScript etc has solved the puzzle. New web animation API boosts up the animation making them easier and quicker for browsers to process.
Adobe too has made it clear that they will terminate the Flash support by 2020.
People use animations in UI quite a lot, in the logos, loading screen, chat bots, hovering media and animations are made in a way that they sooth the user’s eye. Following are the animation directives that you should take a look before you put animations in your website.
CSS Animation
- It is a complex method that grants the designer with the power of animating element properties. Almost all the browsers including mobile browsers support this except Opera Mini.
Web Animations API
- This API lets you create animations as well as manipulate and inspect them through declarative means like CSS. While Firefox supports it completely, google along with android chrome,UC and Samsung offer partial support and IE, Edge, Safari, Opera offer none.
requestAnimationFrame
- This API allows efficient ways of running script-based animation, compared to traditional methods using timeouts. This is supported by almost all browsers except Opera Mini.
SVG SMIL animation
- It enables the method of using animation elements to animate SVG images. SVG is the new upcomer in the media and all browsers except IE, Edge and Opera Mini support them.
Certain methods that enable SMIL animation in the web pages, namely XHTML and SMIL animation used in web pages have no browser support yet.
Check this out: what is Regression testing, its importance and types, and how to perform it.
Conclusion
Compatibility with multimedia is really necessary as without multimedia your website will be mundane. Ensure that your animation is supported too. Unsupported HTML5 and CSS3 amounts for most of the compatibility issues, understanding them would solve half of our problems. Multimedia files have a special place in content, it is up-to us to choose browser compatible formats and codecs till the time there is a standard format.
Till then, Goodbye!
Top comments (0)