Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Video for the Web 2020 and Beyond

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about the future of video for the web!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Freshbooks__Sponsor_12" name= "Freshbooks__Sponsor_12"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 08:19 - Scott’s Background in video</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> Started editing in middle school</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> Worked professionally as an editor and production assistant for magazine</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Created specialty flash video players</li> <li class="has-line-data" data-line-start="22" data-line-end="24"> Have been hosting video content since the start of my web career</li> </ul> <p class="has-line-data" data-line-start="24" data-line-end="25"> 09:12 - Terminology</p> <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> Transcoding - digital to digital conversion of one format to another</li> <li class="has-line-data" data-line-start="27" data-line-end="29"> Ingest - bringing a video to a new facility (ie uploaded video file or data stream to server)</li> </ul> <p class="has-line-data" data-line-start="29" data-line-end="30"> 10:51 - Streaming vs Downloading</p> <ul> <li class="has-line-data" data-line-start="31" data-line-end="33"> Streaming is basically chunks of content at a time, while download is waiting for the entire file to be downloaded before playing.</li> </ul> <p class="has-line-data" data-line-start="33" data-line-end="34"> 11:16 - Formats</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> MP4</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> WebM</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> DASH</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> HLS (HTTP Live Streaming)</li> <li class="has-line-data" data-line-start="39" data-line-end="41"> m3u8</li> </ul> <p class="has-line-data" data-line-start="41" data-line-end="42"> 21:35 - Players</p> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> shaka-player - <a href= "https://github.com/google/shaka-player/">https://github.com/google/shaka-player/</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> hls.js - <a href= "https://hls-js.netlify.app/demo/">https://hls-js.netlify.app/demo/</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> dash.js - <a href= "https://github.com/Dash-Industry-Forum/dash.js">https://github.com/Dash-Industry-Forum/dash.js</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> video.js - <a href= "https://videojs.com/">https://videojs.com/</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> jw player - <a href= "https://www.jwplayer.com/">https://www.jwplayer.com/</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> Bit Movin player - <a href= "https://bitmovin.com/docs/player">https://bitmovin.com/docs/player</a></li> <li class="has-line-data" data-line-start="49" data-line-end="51"> Ooyala Brightcove - <a href= "https://www.brightcove.com/en/">https://www.brightcove.com/en/</a></li> </ul> <p class="has-line-data" data-line-start="51" data-line-end="52"> 27:48 - Services Roundup 

In this episode of Syntax, Scott and Wes talk about the future of video for the web!
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
 Show Notes 08:19 - Scott’s Background in video
  Started editing in middle school
 Worked professionally as an editor and production assistant for magazine
 Created specialty flash video players
 Have been hosting video content since the start of my web career
  09:12 - Terminology
  Transcoding - digital to digital conversion of one format to another
 Ingest - bringing a video to a new facility (ie uploaded video file or data stream to server)
  10:51 - Streaming vs Downloading
  Streaming is basically chunks of content at a time, while download is waiting for the entire file to be downloaded before playing.
  11:16 - Formats
  MP4
 WebM
 DASH
 HLS (HTTP Live Streaming)
 m3u8
  21:35 - Players
  shaka-player - https://github.com/google/shaka-player/

 hls.js - https://hls-js.netlify.app/demo/

 dash.js - https://github.com/Dash-Industry-Forum/dash.js

 video.js - https://videojs.com/

 jw player - https://www.jwplayer.com/

 Bit Movin player - https://bitmovin.com/docs/player

 Ooyala Brightcove - https://www.brightcove.com/en/

  27:48 - Services Roundup 🐴
  YouTube - free
 Vimeo - $
 MUX - $$
 Wistia - 
 Cloudflare - $$
 JW Player - $
 Cloudinary - $$$
 Brightcove - $$$
 Azure - $$
 Bit Movin - $$
 AWS - $$
  46:59 - What Scott did and how/why
  upchunk
 Mux
 Video.js
 Custom uploader
 Using polling
  Links  Basecamp

 Hey

  Inbox

 YouTube

 Wistia

 Drip

 ConvertKit

 Vimeo

  https://fronteers.nl/congres/2015/sessions/jsmpeg-by-dominic-szablewski

 https://www.vidbeo.com/blog/hls-vs-dash

 HLS Can I Use

 youtube-dl

 Syntax Ep 254: Headless CMS Break Down & Roundup

 Cloudflare

 Mux

 Framer Motion

 Cloudinary

 upchunk

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Flexibility Focus Podcast

 Wes: Mustie1 YouTube Channel

  Shameless Plugs  Scott: CSS Variables Course - Sign up for the year and save 25%!
 Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
  Tweet us your tasty treats! Scott’s Instagram
 LevelUpTutorials Instagram
 Wes’ Instagram
 Wes’ Twitter
 Wes’ Facebook
 Scott’s Twitter
 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Video for the Web 2020 and Beyond

Poslechněte si podcast