pseudosavant / player.html

One file drop-in media player web app for using video and audio files served using basic HTTP directory listing
MIT License
219 stars 40 forks source link

player.html

One file drop-in audio and video player web app for using media files served using basic HTTP directory listing.

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

Usage

player.html is designed to be a drop-in audio and 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

* 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.

** Animated thumbnails can consume a lot of data. The experience may degrade on slower network connections

Pre-rendered server-side thumbnails

player.html can use server-side thumbnails for any video that has one available. It will fall back to generating thumbnails in the browser otherwise. The server-side thumbnail files must follow the common filename convention of using the video file name, with the extension replaced with an image extension, in the same folder as the video. Note: The image files must be shown by your web server's directory browsing (may require mime-type adjustments on some servers) feature to show up in player.html.

Naming example:

How to pre-render thumbnails

The easiest way to create thumbnails from video files is on the command-line with ffmpeg. The following command will create a JPEG thumbnail (myVideo.jpg) from the video frame 5 seconds into myVideo.mp4: ffmpeg -i myVideo.mp4 -ss 00:00:05.000 -vframes 1 myVideo.jpg. Loop over folders of video files using your preferred shell (bash, cmd, powershell, etc) to process many videos.

Supported thumbnail image formats/extensions

Supported browsers

The latest version of these browsers is supported:

Supported web servers

The latest version of these web servers (others may work as well):

Other

License

© 2024 Paul Ellis