simple vanilla js video playlist
Switch branches/tags
Nothing to show
Clone or download
Kristi Witts
Kristi Witts update version
Latest commit 6d4d6ca Oct 28, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
subtitles Add subtitles support Oct 28, 2015
LICENSE Initial commit Jun 23, 2015
README.md update version Oct 28, 2015
index.html Add link to github repo Jul 21, 2015
js-playlist.css Create js-playlist.css Jun 23, 2015
js-playlist.js Update js-playlist.js Jun 23, 2015

README.md

js-playlist

Version: 1.2.0, Last updated: 10/28/2015

A simple video playlist using HTML5 and vanilla JS. For a full how-to on how to build this, go to the full tutorial.

How to Use

HTML

<div id="player">
   <video controls="controls" width="640" height="360" preload="auto" autoplay>
      <source src="video1.mp4" type="video/mp4" />
      <source src="video1.webm" type="video/webm" />
      <source src="video1.ogv" type="video/ogg" />
      <!--optional line for subtitles-->
      <track src="video/video1.srt" kind="subtitle" srclang="en-US" label="English" />
   </video>
   <div id="playlist">
      <h1>Videos</h1>
      <a href="video1.mp4">Video 1</a>
      <a href="video2.mp4">Video 2</a>
      <a href="video2.mp4">Video 3</a>
   </div>
</div>

Javascript

<script type="text/javascript" src="path/to/js-playlist.js"></script>
<!--optional file for subtitles-->
<script type="text/javascript" src="path/to/videosub.js"></script>

Including Subtitles

Oct 28, 2015 - I was recently asked about subtitles. I added a couple of lines to the playlist js file and it is included in the folder "subtitles". It requires the use of a plugin called VideoSub by thomassturm. All you need to do is use js-playlist-sub.js instead of the original js-playlist.js and add two lines to your HTML file.

Add this to the bottom of the video source list (inside the tags)

<track src="video/video1.srt" kind="subtitle" srclang="en-US" label="English" />

Add the plugin:

<script type="text/javascript" src="path/to/videosub.js"></script>

Visit https://github.com/thomassturm/VideoSub for the plugin js file.

Release History

  • Oct 28 2015 - Added support for subtitles using plugin: VideoSub by thomassturm.
  • Jun 23 2015 - Initial commit.

##License Licensed under the MIT license. The plugin VideoSub is licensed under MIT - ©thomassturm.