Video Playlist Manager

Video Playlist Manager

This custom video playlist manager was built for a professor needing to embed self-hosted videos in an LMS course without relying on external platforms like YouTube. It features an HTML5 video player with a scrollable list of video titles; clicking a title loads and autoplays the corresponding MP4 file. The setup ensures videos play directly from the institution’s server, avoiding potential blocks or ads. It supports start times for specific clips, enhancing navigation in educational content.

Project Background

Created for an LMS environment where YouTube embeds were unreliable or restricted. The solution uses native HTML5 video and jQuery for playlist interaction, keeping everything self-contained and customizable.

Code Overview

The HTML structure includes a video element and an unordered list with movieurl attributes:

<video id="videoarea" controls></video>
<ul id="playlist">
  <li movieurl="video1.mp4">Video Title 1</li>
  <li movieurl="video2.mp4" startt="30">Video Title 2</li>
</ul>

JavaScript handles clicks to update the video source:

$("#playlist li").on("click", function() {
  $("#videoarea").attr({
    "src": $(this).attr("movieurl"),
    "autoplay": "autoplay"
  });
  starttime = $(this).attr('startt') || 0;
});

An event listener sets the start time after metadata loads:

document.getElementById("videoarea").addEventListener("loadedmetadata", function() {
  this.currentTime = starttime;
});

CSS styles the layout with Bootstrap for responsiveness.

Use Cases

Ideal for educational videos in LMS like Canvas or Moodle, where self-hosting ensures availability. Useful for training modules, tutorials, or any scenario needing offline-capable playlists.

Alternatives

Several options exist for video playlists:

  • YouTube/Vimeo Embeds: Easy but depend on external services; may have ads or restrictions.
  • JW Player: Robust player with playlists, analytics, but requires licensing for advanced features.
  • Video.js: Open-source player with plugins for playlists and customization.
  • Plyr: Lightweight, accessible player with playlist support.
  • Native LMS Tools: Many LMS have built-in video players; check if they support custom playlists.

For self-hosted needs, this custom solution offers full control. If scaling, consider integrating with a CMS or using a library like Video.js for more features.

Portfolio javascripthtml5-videoplaylistlms