[Userscript] Derpibooru WebM Volume Toggle (1.3.1)

Marker
My Little Pony - 1992 Edition
Wallet After Summer Sale -
Magnificent Metadata Maniac - #1 Assistant
Not a Llama - Happy April Fools Day!

Misanthrope
Derpibooru WebM Volume Toggle

A stopgap solution until Derpibooru implements the feature natively.

Shows a toggleable icon on the top left of all webms that contains an audio track.
On the image page the icon is hidden until you hover over the image.

Download from Github
Download from OpenUserJS

Requires Violentmonkey
Firefox users are required to install Laboratory by Mozilla and follow the instructions here.

version 1.3.0:
— Added option to auto mute videos when scrolled out of view.
version 1.2.2:
— Fix webm sometimes stuck in paused state
*version 1.2.0
— Added the option to always load full size video
version 1.1.0:
— Settings could now be found at Derpibooru's Content Settings page, under the new 'Userscript' tab. And should now carry across script updates.
— Added the option to disable browser's native video control
— Added the option to enable audio by default.


Marker
My Little Pony - 1992 Edition
Wallet After Summer Sale -
Magnificent Metadata Maniac - #1 Assistant
Not a Llama - Happy April Fools Day!

Misanthrope
version 1.0.14 update:

Added options to
— replace GIF preview with webm thumbnails
— pause webm videos when tab is in background
Both defaults to off, edit the source code to enable.
Marker
My Little Pony - 1992 Edition
Wallet After Summer Sale -
Magnificent Metadata Maniac - #1 Assistant
Not a Llama - Happy April Fools Day!

Misanthrope
I increase the font-size from 2em to 2.5em on the image page. you can test it out by adding font-size: 2.5em; to the CSS selector #image_target .volume-toggle-button.
Marker
My Little Pony - 1992 Edition
Wallet After Summer Sale -
Magnificent Metadata Maniac - #1 Assistant
Not a Llama - Happy April Fools Day!

Misanthrope
StSyaN
You mean stick it in that nicely commented section at the top? Sure I guess, but you'd ended up editing the source anyway, as those configs doesn't carry over across script updates.
stsyn
Best Artist - Providing quality, Derpibooru-exclusive artwork
Fine Arts - Two hundred uploads with a score of over a hundred (Safe/Suggestive)
Economist -
Cool Crow - "Caw!" An awesome tagger
The Power of Love - Given to a publicly verified artist with an image under their artist’s tag that has reached 1000 upvotes
Equality - In our state, we do not stand out.
Magnificent Metadata Maniac -
Birthday Cake - Celebrated MLP's 7th birthday
Perfect Pony Plot Provider - Uploader of 10+ images with 350 upvotes or more (Questionable/Explicit)
Artist -

Site Moderator
@Marker
>You mean stick it in that nicely commented section at the top?
Yeah

>…but you’d ended up editing the source anyway, as those configs doesn’t carry over across script updates.
I know, the only solution is localStorage. But if nothing will change on derpibooru, there should not be many script updates…
Marker
My Little Pony - 1992 Edition
Wallet After Summer Sale -
Magnificent Metadata Maniac - #1 Assistant
Not a Llama - Happy April Fools Day!

Misanthrope
Script updated to 1.0.15

StSyaN
>there should not be many script updates…
Oh you'd be surprised how many bugs I often find in my code after I publish it.
Marker
My Little Pony - 1992 Edition
Wallet After Summer Sale -
Magnificent Metadata Maniac - #1 Assistant
Not a Llama - Happy April Fools Day!

Misanthrope
So, apparently on Firefox the webm thumbnails aren't muted when they were inserted into the page, leading to a terrible cacophony on the gallery when displaying webms. Version 1.0.16 fixes this bug.

Also, I've been trying to solve the problem of Chrome occasionally seizing up when trying to load/play multiple webms simultaneously (48 in my case), this will affect you if you have SERVE_WEBM_THUMB or PAUSE_IN_BACKGROUND enabled. If you're one of those severely affected, -try the experimental version that I'm working on, it's still terribly buggy and leaks memory on rare occasions but hopefully makes the problem occur less frequently. It also contains enough logging to deforest the Amazon. Edit: Nevermind don't use the script the memory leak is bad.
Marker
My Little Pony - 1992 Edition
Wallet After Summer Sale -
Magnificent Metadata Maniac - #1 Assistant
Not a Llama - Happy April Fools Day!

Misanthrope
Update 1.1.0

— Settings could now be found at Derpibooru’s Content Settings page, under the new ’Userscript’ tab. And should now carry across script updates.
— Added the option to disable browser’s native video control
— Added the option to enable audio by default.
Marker
My Little Pony - 1992 Edition
Wallet After Summer Sale -
Magnificent Metadata Maniac - #1 Assistant
Not a Llama - Happy April Fools Day!

Misanthrope
Update 1.2.0

— New feature: Added setting to load full sized WebMs, disabled by default.

Why?
The scaled WebM videos on Derpibooru are encoded with an maximum average bitrate of around 1000 ~ 1500 kb/s. However this is not always enough for complex scenes, causing heavy blocking artifacts if 'scale large images' is enabled and the videos are scaled to your window size.
An example is this cinemagraph >>1711590: Compare the full size video with the scaled 'large' version and the distinction should be clear.
Marker
My Little Pony - 1992 Edition
Wallet After Summer Sale -
Magnificent Metadata Maniac - #1 Assistant
Not a Llama - Happy April Fools Day!

Misanthrope
Update 1.2.2
— Fix webms sometimes stuck in paused state when "Pause in background" or "Enable sound by default" are enabled.
Marker
My Little Pony - 1992 Edition
Wallet After Summer Sale -
Magnificent Metadata Maniac - #1 Assistant
Not a Llama - Happy April Fools Day!

Misanthrope
Version 1.3.1 — Fix for webms sometimes not playing when navigated with the browser's back/forward button. A really minor change, but if your webms starts fucking up you know who to blame.
Interested in advertising on Derpibooru? Click here for information!
Sky Railroad Shop

Derpibooru costs over $25 a day to operate - help support us financially!

Syntax quick reference: *bold* _italic_ [spoiler]hide text[/spoiler] @code@ +underline+ -strike- ^sup^ ~sub~