Having worked with video and audio content for a long time, online and offline, I will try to group some concepts and standard methods that can help you integrate multimedia content in your web and app projects. Please note: I am not responsible for the content of external pages This page by Nicola Grassini, 2019 | nicola @ fotonix.it

HTML5 video tag

Info: Video - W3

Main attributes: src, controls, autoplay, poster, width, height, preload

Prototype.js offers some extra functionality.

Video tag examples:
http://www.fotonix.it/llcd_04.html
http://www.studionotte.it/video_06.html

HTML5 audio tag

Info: Audio - W3

Main attributes: src, controls, autoplay, loop, preload

Audio tag examples:
http://www.fotonix.it/mix_050215.html
http://www.studionotte.it/audio_111.html
http://www.fotonix.it/b_soundscape.html

plug-ins

Before HTML5, the use of media files in a webpage was made possible by embedded plug-ins. Different plug-ins would be associated with different content types and the code would tell the browser which plugin to use (e.g. QuickTime for a .mov and Flash for a .swf file)

"The embed tag defines a container for an external application or interactive content (a plug-in)" (W3Schools), but today browsers offer native support for a variety of formats and handling these files is easier.

Meanwhile, the availability of broadband connections in several countries has made the streaming of media files part of the daily web experience for millions of users.

HTML5 iframe tag - embedding

Info: Iframe - W3

You can make content from other websites available on your page by embedding it.

All major platforms offer this service, but you could do it too to distribute your content.

The iframe tag can help you do that.

ReactPlayer

Today we can take advantage of React components that offer advanced functionality directly on our page (e.g. sharing on social media), integration with the major media platforms on the web for both video and audio, and require minimum configuration for standard use. At the same time, they can offer very advanced tweaking and parameter control. The installation is quick via npm install.

GitHub repo:
https://github.com/CookPete/react-player
Run: npm install react-player --save

View all options on:
https://cookpete.com/react-player/

Some examples on my GitHub pages.

iframe code examples
<iframe width="40%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=%2Fjazzameianoite%2Fjazz-a-meia-noite-with-enrico-rava%2F" frameborder="0" ></iframe>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/
?url=https%3A//api.soundcloud.com/tracks/617034249
&color=%23ff5500&auto_play=false&hide_related=false
&show_comments=true&show_user=true&show_reposts=false
&show_teaser=true&visual=true"></iframe>

develop: customize with the Web Media API, process sounds with the Web Audio API

You can create custom playback controls for your player using JavaScript and the HTMLMediaElement API.

You can also generate and process sounds in the browser by creating an Audio Context with the Web Audio API.

This can be a stimulating path for a developer with an interest in media.

recap

I hope you got an overview of an expanding area you can work with.

I might develop a series of workshops in the future.

Remember you can start recording video and audio with your phone or pocket camera these days. Keep it simple and your project may become more interesting, but don't overdo it. Try to keep it relevant.

Coding links

My profiles on:
github

freecodecamp  |  JS certification

mongodb M001  |  M220JS

codecademy

codewars