Video Hosting with Cloudinary

1. Hosting Video
JavaScript Friends Meetup
June 30, 2021
Becky Peltz

2. Bio
Linked In: Rebecca Peltz
MBA University of Washington
Database Programming
Application Development
Web Engineering
Bootcamp & University Web Developer Certificate Instruction
Developer Instructional Designer @Cloudinary

3. Video Hosting: Why?
“if a picture is worth a thousand words, then a video has to be worth at least 1.8 million words” - Dr.
James McQuivey, Forester Study
1000/words per picture x 30 frames(pictures)/second x 60 seconds/minute = 1,800,000 pictures
_____________________________________________________________________________
______
“74% of marketers say video has a better return on investment than static imagery.”
Biteable.com Video Marketing Stats
_____________________________________________________________________________
______
“Globally, IP video will be 82% of all IP traffic in 2021, up from 73% in 2016”
Cisco 2021

4. Video Hosting
Terminology & Concepts
● Size and Duration
● Codecs, Containers and Browsers
● Advanced Bitrate Streaming (ABR)
Code
● Video Tag
● Video Embed Element
● Video Player
● React and Video
● Processing and delivery of ABR (Advanced Bitrate Streaming)

5. Video Hosting: File Size and Duration
file size (bytes) = bitrate (bytes per sec) * duration (sec) * compression ratio
bitrate (bytes per sec) = frame size * frames per second (fps)
frame size (bytes) = width (px) * height (px) * color depth (bytes)
● compression ratio depends on codec, h264 baseline is about 1000:1, so 1 GBS can
be compressed to 1 MBS
● frames per second can vary depending on how recorded, but 30 fps is common
● width and height make up the resolution as in an image

6. Video Hosting: Codecs, Containers and Browsers

7. Video Hosting: Code
Single Video Source https://replit.com/@rpeltz/VideoSingleSource
HTML5 Video Embed Element
https://replit.com/@rpeltz/HTML5VideoEmbedElement
Cloudinary JavaScript SDK Video Embed Element
Cloudinary Video Player https://replit.com/@rpeltz/CloudinaryVideoPlayer
Cloudinary React Component
https://codesandbox.io/s/cld-advanced-concepts-
training-video-player-6h3k3
Cloudinary React Video Player
Video Processing add HD Profile for ABR Backend https://replit.com/@rpeltz/ABR-hd-profile
Cloudinary Video Player with ABR Frontend https://replit.com/@rpeltz/ABRCloudinaryVideoPlayer

8. Code: .mov/h264 in Chrome
How do you expect an .mov/h264 file to behave in Chrome?
https://replit.com/@rpeltz/VideoSingleSource

9. Code: Video Tag Single Source
<video controls src="myvideo" width="300"></video>
<video controls poster="myposter" width="620">
<source src="myvideo" type="video/mp4">
Sorry,your browser doesn't support embedded videos.
</video>
https://replit.com/@rpeltz/VideoSingleSource#index.html

10. Code: HTML5 Video Embed Element and Cloudinary
JavaScript VideoTag
<video controls="" height="349" poster="myposterimage.jpg" width="620">
<source src="myvideo.webm" type="video/webm">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogv" type="video/ogg">
Your browser does not support HTML5 video tags.
</video>
https://replit.com/@rpeltz/HTML5VideoEmbedElement

11. Code: Cloudinary Video Player
// instantiate cloudinary to set config
const cloudinary = cloudinary.Cloudinary.new({ cloud_name:"cloudinary-training"});
// wait for the player id element to load
document.addEventListener("DOMContentLoaded",e=>{
const media = cloudinary.videoPlayer("player");
media.source("video-hosting/goats");
})
<video id="player" controls class="cld-video-player cld-fluid"></video>
HTML
JavaScript
https://replit.com/@rpeltz/CloudinaryVideoPlayer

12. Code: React
React SDK v Cloudinary Video Player
https://cloudinary.com/documentation/react_integration
https://codesandbox.io/s/cld-advanced-concepts-training-video-player-6h3k3
1. Libraries from npmjs.org
2. Create components for the Video Embed and the Player
3. Parameters are Cloudinary “cloudName” and “publicId”
4. Use the “useEffect” React hook to “wait” for DOM elements to be
rendered for Video Player

13. Adaptive Bitrate Streaming
https://cloudinary.com/documentation/adaptive_bitrate_streaming
➢ Chunk the video data
➢ Browser receives list of chunks
➢ Detect user bandwidth real time
➢ Browser requests chunks with different resolutions based on network
➢ HTTP layer
➢ Use Cloudinary transformations to create chunks before requested
Large Video Better User Experience

14. Adaptive Bitrate Streaming: Formats
Containers for ABR
● HLS : h264 (Universal)
● MPEG-DASH: VP9
.mp4
Cloudinary Transformation:
transcode and create different
resolutions to support
different bandwidths
.m3u8
.m3u8
.ts
master
playlist
list of
“chunks”
a “chunk”

15. Code: Adaptive Bitrate Streaming using just HLS/h264
require('dotenv').config()
const cloudinary = require('cloudinary').v2
const options =
{
resource_type: "video",
type: "upload",
eager: [
{ streaming_profile: "hd", format: "m3u8" },
{
format: "mp4",
transformation: [{ quality: "auto" }],
}],
eager_async: true,
eager_notification_url:
"https://webhook.site/20d13ebe-105c-4f04-9719-
7e1e55f6ad94"
};
cloudinary.uploader.explicit("myvideo", options)
.then(result => console.log(JSON.stringify(result,
null, 2)))
.catch(error => console.log.log(error))
// instantiate cloudinary to set config
const cloudinaryCld = cloudinary.Cloudinary.new({ cloud_name:
"cloudinary-training" });
// wait for the player id element to load
document.addEventListener("DOMContentLoaded", e => {
const options = {
sourceTypes: ["hls", "mp4"],
muted: true,
controls: true,
width: 800,
sourceTransformation: {
hls: [{ streaming_profile: "hd" }],
mp4: [{ quality: "auto" }],
},
playbackRates: [0.5, 1, 1.5, 2],
};
const media = cloudinaryCld.videoPlayer("player", options);
media.source("myvideo");
})
Backend processing Frontend delivery
Node.js Browser JavaScript
https://replit.com/@rpeltz/ABR-hd-profile https://replit.com/@rpeltz/ABRCloudinaryVideoPlayer

16. Summary
Single source
video tag
Video Embed
Element
Video Player
Video in React
Adaptive Bitrate
Streaming