Back Button JavaScript

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.

Intermediate
Difficulty
5 episodes
45:53 mins
Start Series

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.

  • Latest Episode: VideoJS Events and AJAX Requests

  • Like this series? Share the love!

  • 01

    Episode 1 Run Time 8:45

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

  • 02

    Episode 2 Run Time 7:22

    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

    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

    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

    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.