Intermediate

HTML5 Video and VideoJS

In this series, we'll review HTML5 video, as well as the very popular VideoJS player. Whether you need to control playback speeds, or submit AJAX requests to your server based upon player events, or even disquise a video as an animated background, it all couldn't be simpler.

Start Series

Share this series on:

  • 01

    Episode 1 Run Time 8:45

    HTML5 Video 101 Free

    Before we touch VideoJS, let's first begin by reviewing the essentials of HTML5 video.
  • 02

    Episode 2 Run Time 7:22

    VideoJS Setup

    Now that you understand the basics of HTML5 video, let's switch our attention over to VideoJS, which is a popular open source framework for presenting videos.
  • 03

    Episode 3 Run Time 5:36

    Video Event Handling 101

    Next up, we'll review how to respond to any number of video-specific events. Maybe you want to write to local storage every five seconds to record the user's progress in the video. Or maybe you want to submit an AJAX request to your server each time a video is finished. It's all a piece of cake!
  • 04

    Episode 4 Run Time 7:39

    Hot Keys and Custom Playback Speeds

    The plugin ecosystem for VideoJS is significant. In this episode, we'll review a couple plugins that I use here at Laracasts.
  • 05

    Episode 5 Run Time 16:31

    VideoJS Events and AJAX Requests

    Let's review a full of example of how you might submit an AJAX request to your server, once a video has concluded. Perhaps you allow your users to mark videos as "completed" (just like you can here at Laracasts). Let's see how to do that. First, in this lesson, we'll prepare the Laravel backend code and then use some fairly basic JavaScript and jQuery to submit the AJAX request. In the next video, we'll switch to using npm and Vue.

    View the source for this lesson on GitHub.