Simple Web Media Player for 4chan and other imageboards.
The default HTML5 media player is obnoxiously ugly on legacy imageboards so this was written to be an easily modifiable script to run media files in browser while keeping a more oldschool look to fit with the rest of the site.
There is a basic media player class that can be installed on any website, but I've also written a userscript so that this can be easily implemented on any site running Wakaba/TinyIB/Vichan/LynxChan/jschan to inject the script and replace the default media player. It will also work on pretty much any site that has direct links to video or audio files though some sites for various design/event reasons may need custom implementations.
It is likely there will be CSS bugs with other engines. Only tested with Firefox, Tor(?), Vivaldi and Safari, bug reports welcome.
To open the settings menu right click on the window titlebar or the controls. Video right click functionality is preserved.
Comes preinstalled with 4 styles of the default MPC inspired theme. MPC Light, MPC Dark, Kurisumasu, and WIN_XP. Also included a more modern-like theme, Modernity.
Many sites have different vibes they want to give off so are on a per-domain basis so you can best pick the theme that suits each site.
You can also override some defaults such as disabling autoplay, disabling loop, or even allowing to run multiple players at once. By default if you open a media file while one is playing the old player will be replaced.
Keybinds while media is focused: [Space] = Play/Pause, [F] = Fullscreen Toggle, [X] = Close Window, [M] = Toggle Mute, [Esc] = Exit Fullscreen (Browser Default), [Left] = Seek Backward, [Right] = Seek Forward.
You may also doubleclick the video player to toggle fullscreen or doubleclick the window titlebar to toggle maximized mode (cover browser). If enabled you may use scrollwheel to change volume.
If you have a userscript manager like greasemonkey/tampermonkey/violentmonkey you may install script. If you would like to read the full code there is a non-minified version here.
Note that the Youtube player does not load in Greasemonkey 4, use Violentmonkey.
Repository: Github
Full Download: -
Add swmp.js to your page.
Create and place a video anywhere on any site by doing minor modifications to:
// Create a new element and define type (audio/video) and url (internal or external)
var newembed = new swmp({
url: "example.mp3",
});
// You can also add a custom event on buttons such as unhiding a thumbnail used to open the player
newembed.windowClose.addEventListener('click', () => {
// Custom close event
// Alternatively delete the button with .remove() or hide the entire titlebar.
});
// Put new element inside defined element.
document.getElementById("example").appendChild(newembed.container); // Define where to place video with id, class, or whatever method you prefer.
You can also create playlists of local or external media files:
var newembed = new swmp({
url: "example3.webm",
playlist: ["example3.webm", "example2.webm", "https://youtu.be/x2iKC0C32-g", "example.mp3"],
});
If you want to make videos manually instead of using the built in link filename detection make sure to assign the manually created player an ID if you want to make the multi configuration work. The built in link click scanner will assign any video created with an ID of the href from that file.
The script automatically checks if the file extension supplied is audio/video and gives appropriate MIME type.
By setting 'windowed' to false on player creation the constructor will create an inline player. Otherwise you can drag and move the window wherever you want or close the player. You may also override some defaults.
Some sites may need additional changes done to the script. The script is configured to only activate on certain sites, but you may open the file and replace the existing site regex with a catch all regex found right below the script's website configuration.
Demo - Try before installing.
