Video · Web Dev 5 · Learn the Web

Video

Don’t host video yourself

Host your video on a dedicated video platform like YouTube or Vimeo as a first choice

But, hosting video yourself gives you more control

Never, ever (ever, [ever, {ever}]) commit video to GitHub

You’ll wreck your repo & won’t be able to sync

Self-hosted video on a CDN

If you want to self-host video you need to put it onto a Content Delivery Network

KeyCDN† is easy to set up and works really well
(This whole website is on KeyCDN)

Video on the web

Only one format will work reliably in all browsers:
MPEG-4, H.264 encoding

Unlike many web features this isn’t open source—all browsers pay exorbitant fees to let you watch video

Export from Adobe

Adobe Media Encoder

Format: H.264
Preset: Vimeo 1080p HD or YouTube 1080p HD
The regular “HD 1080p 29.97” should also work but may create larger file sizes.

Handbrake is a wonderful open source alternative

HTML

<!-- The <video> tag for self-hosted videos -->

<video controls src="https://assets.learntheweb.courses/web-dev-5/liftoff-of-spacex-crs-5.mp4"></video>

HTML

<!-- Embed containers make <video> responsive -->

<div class="embed embed-16by9">
  <video class="embed-item" controls src="https://assets.learntheweb.courses/web-dev-5/liftoff-of-spacex-crs-5.mp4"></video>
</div>

HTML

<div class="embed embed-16by9">
  <video id="my-video" class="embed-item" src="https://assets.learntheweb.courses/web-dev-5/liftoff-of-spacex-crs-5.mp4"></video>
</div>

<button id="my-button">Play/Pause</button>

JavaScript

var myVideo = $('#my-video').get(0);

$('#my-button').on('click', function () {
  if (myVideo.paused) {
    myVideo.play();
  } else {
    myVideo.pause();
  }
});

Videos & tutorials

Video & audio ➔