Successfully reported this slideshow.

Hosting video js friends (2)

0

Share

Loading in …3
×
1 of 16
1 of 16

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Hosting video js friends (2)

  1. 1. Hosting Video JavaScript Friends Meetup June 30, 2021 Becky Peltz
  2. 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. 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. 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. 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. 6. Video Hosting: Codecs, Containers and Browsers
  7. 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. 8. Code: .mov/h264 in Chrome How do you expect an .mov/h264 file to behave in Chrome? https://replit.com/@rpeltz/VideoSingleSource
  9. 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. 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. 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. 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. 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. 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. 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. 16. Summary Single source video tag Video Embed Element Video Player Video in React Adaptive Bitrate Streaming

Editor's Notes

  • https://idearocketanimation.com/4293-video-worth-1-million-words/
    https://www.cisco.com/c/dam/m/en_us/solutions/service-provider/vni-forecast-highlights/pdf/Global_2021_Forecast_Highlights.pdf
    https://biteable.com/blog/video-marketing-statistics/


  • https://www.circlehd.com/blog/how-to-calculate-video-file-size
    https://youtu.be/DDcYvesZsnw
    https://www.rgb.com/h264-profiles

  • working with mov in chrome https://replit.com/@rpeltz/VideoSingleSource


  • https://replit.com/@rpeltz/VideoSingleSource

  • https://replit.com/@rpeltz/HTML5VideoEmbedElement


    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
    https://peach.blender.org/about/
    https://download.blender.org/peach/bigbuckbunny_movies/

  • https://replit.com/@rpeltz/CloudinaryVideoPlayer
    Load libraries
    Render a video tag
    Wait for all DOM elements to render
    Create Cloudinary object and capture Cloud name
    Attach player to DOM element
    Supply Cloudinary public id as source

  • https://codesandbox.io/s/cld-advanced-concepts-training-video-player-6h3k3

  • ×