One file drop-in audio and video player web app for using media files served using basic HTTP directory listing.
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.
SVG images
are inlinedMP4
, M4V
, MOV
, MKV
, WEBM
, OGG
, MP3
, WAV
, AAC
, M4A
files using the browser media engineSRT
and VTT
subtitle filesplayer.html
in the same folder location, and media positionlocalStorage
, check cache size, clear cacheog:\*
, twitter:\*
)?
to see the list)CTRL+V
to play the media URL that you currently have in the clipboardapp.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.
** Animated thumbnails can consume a lot of data. The experience may degrade on slower network connections
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
.
myMedia.mp4
myMedia.jpg
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.
The latest version of these browsers is supported:
The latest version of these web servers (others may work as well):
autoindex
on)mod_autoindex
)Directory Browsing
)player.html
uses folder.api to consume HTTP directory listings like an APIplayer.html
uses video-thumbnail.js to render thumbnails from video file URLs© 2024 Paul Ellis