Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

README.md

player.html

One file drop-in video player web app for using MP4 video files served using basic directory listing.

player.html in action player.html on all of your devices

Usage

player.html is designed to be a drop-in video player that does not require any configuration or other files.

To use it, copy the ./src/player.html file into a folder that is served over HTTP using the web server's folder listing functionality. player.html basically uses the folder listing as an API for enumerating the files and folders. It should work with almost any web server, but it has only been tested against NGINX, Apache, and IIS.

Supported features

  • Only 1 file with zero external dependencies
  • SVG images are inlined
  • May be installed as a PWA (Progressive Web App) app. Dynamically generated inline data URI manifest file.
  • Playback of MP4, M4V, MOV, MKV, WEBM, and OGG files using the browser video engine
  • Support for loading SRT and VTT subtitles
  • Shareable URL that will load player.html in the same folder location, and video position
  • Custom video playback controls (fullscreen, play, pause, mute, etc)
  • Progress bar with timestamp preview thumbnail on hover
  • Video thumbnail generation, with concurrency configuration (default 1)*
  • Thumbnail caching using localStorage
  • Social media metadata (og:\*, twitter:\*)
  • Video file metadata (bitrate, resolution, etc)
  • Keyboard shortcuts (press ? to see the list)
  • Paste and Play: just do CTRL+V to play the video URL that you currently have in the clipboard
  • Support for playing videos directly from onedrive OneDrive and gdrive Google Drive. You must supply the appropriate keys in the app.options.cloud AND register your app with Microsoft and/or Google. Instructions are in the code. player.html also must be served over HTTPS for the Microsoft and Google auth flows to work. Remix this Glitch to easily check it out over HTTPS with your own API keys.

* Be careful with concurrency. Increasing the setting above 1 does make it generate thumbnails much faster. But it is very easy for HTTP requests for generating thumbnails to saturate a connection enough that the main video gets starved for bandwidth. Especially if you browse into a folder with many dozens of videos in it.

Supported Web Servers

License

© 2020 Paul Ellis

About

One file drop-in video player web app for using video files served using basic directory listing

Resources

License

Languages

You can’t perform that action at this time.