add support block html autoplay

[KonoromiHimaries]

img


[jspenguin2017]

I definitely saw that, any idea on how to implement it?

[uBlock-user]

Chrome already has Autoplay Policy via chrome://flags

[KonoromiHimaries]

"Blocking auto-play in Chrome is not effective enough for me."

[NanoAi]

Sorry for taking up lots of space but... I made a quick script for stopping autoplaying videos but it can probably be enhanced and cleaned up allot. Also this is a userscript made in and for Tampermonkey not sure how well it will work else where and or what changes would need to be made.

```Javascript // ==UserScript== // @name Video Element Pause // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author LuaTenshi // @include *://* // @exclude /^https?://(www\.|)youtube\.com/.*$/ // @exclude /^https?://(www\.|)twitch\.tv/.*$/ // @exclude /^https?://(www\.|)googlevideo\.com/.*$/ // @exclude /^https?://(www\.|)vimeo\.com/.*$/ // @exclude /^https?://(www\.|)vid\.me/.*$/ // @exclude /^https?://(www\.|)dailymotion\.com/.*$/ // @exclude /^https?://(www\.|)veoh\.com/.*$/ // @exclude /^https?://(www\.|)netflix\.com/.*$/ // @exclude /^https?://(www\.|)liveleak\.com/.*$/ // @exclude /^https?://(www\.|)gelbooru\.com/.*$/ // @exclude /^https?://danbooru\.donmai\.us/.*$/ // @exclude /^https?://(www.|)kissanime\.com/.*$/ // @exclude /^https?://(www.|)kisscartoon\.me/.*$/ // @exclude /^https?://(www.|)kissanime\.to/.*$/ // @exclude /^https?://(www.|)kissasian\.com/.*$/ // @exclude /^https?://(www.|)kissmanga\.com/.*$/ // @exclude /^https?://(www.|)readcomiconline\.to/.*$/ // @exclude /^https?://(www.|)kissanime\.ru/.*$/ // @exclude /^https?://(www.|)kisscartoon\.se/.*$/ // @exclude /^https?://(www.|)kissasian\.ch/.*$/ // @exclude /^https?://(www.|)kimcartoon\.me/.*$/ // @grant none // @run-at document-idle // ==/UserScript== const SafeAutoPlay = true; // If this is enabled be sure to click in the middle of the video, as this works best. function pause(vid, state){ if( vid && vid.pause && vid.load ){ vid.pause(); vid.preload = state; vid.autoplay = null; vid.setAttribute('preload', state); vid.setAttribute('autostart', 'false'); vid.removeAttribute('autoplay'); vid.addEventListener('canplay', function(e){ e.preventDefault(); e.target.pause(); }, {once: true, capture: true}); } } function play(vid, x, y){ var box = vid.parentNode && vid.parentNode.getBoundingClientRect() || vid.getBoundingClientRect(); if( box && (x <= box.width && x >= box.x) && (y <= box.height && y >= box.y) ){ vid.setAttribute('autoplay', 'true'); vid.play(); vid.addEventListener('canplay', function(e){ e.target.play(); }, {once: true, capture: true}); console.log('SafeAutoPlay Started: \n\t', vid); } } function restore(vid, observer, event){ if ( !vid.____restored ){ console.log('RESTORING: ', vid); pause(vid, 'auto'); observer.disconnect(); vid.onplaying = vid.oldOnplaying; vid.oldOnplaying = null; vid.removeAttribute('autostart'); vid.____restored = true; if( event && SafeAutoPlay ){ play(vid, event.clientX, event.clientY); } } } (function() { 'use strict'; var vids = document.getElementsByTagName('video'); for ( var i = 0; i < vids.length; i++ ){ var vid = vids[i]; var obj = { oldOnplaying: vid.oldOnplaying, onplaying: vid.onplaying, preload: 'none' }; var obsettings = { attributes: true, attributeFilter: ['preload'], childList: false, characterData: false }; vid.oldOnplaying = obj.onplaying; vid.onplaying = function(){vid.pause();}; pause(vid, obj.preload); var observer = new MutationObserver(function(event){ observer.disconnect(); var target = event[event.length-1].target; pause(target || vid, obj.preload); observer.observe(vid, obsettings); }); observer.observe(vid, obsettings); setTimeout(function(){ window.addEventListener('click', function(event){restore(vid, observer, event);}, {once: true, capture: true}); },500); } })(); ``` This just force pauses videos as soon as they start playing and removes the "force pausing" when you click on the page thus (kinda) naturally allowing the video to play again. It also uses a MutationObserver to attempt to prevent the video from preloading or having other things change its preloading type. The regex excludes contain a whitelist of websites where I don't want to use this script.

Also I know the code is kinda bad no need to get worked up about it. <3

[jspenguin2017]

It's long, so I folded it, click the triangle to expand it. Since it's grant none, it will "just works", however, using the right tool for the job is probably better. Since it is a Tampermonkey script, why not use Tampermonkey?

[NanoAi]

@jspenguin2017 Thanks, I'm not very familiar with Markup, else I would have done that myself. Updated the code a bit.

Also I know it "just works" with Tampermonkey however this issue is about having an injectible script that will block autoplaying videos (at least that's how I interpreted the OP) on target sites and I thought that my userscript would help either you or any one else who's interested in contributing get started on making something. ^^;

[jspenguin2017]

I mean all script snippets are like "grant none", which means those Userscripts would work with Nano, just I think it makes more sense to use Tampermonkey or Violentmonkey for injecting Userscripts.

[NanoAi]

Ah okay, at least I contributed something.

Off Topic: Do you prefer Violentmonkey over Tampermonkey? I've been using Tamper forever but heard about Violent only recently.

[jspenguin2017]

I prefer wrapping my Userscripts in an extension. Both TM and VM have some race condition, I think TM has some hacks that make its scripts to inject faster, but real extensions are guaranteed to run on the real document-start. Doing so also makes them really lightweight. And I have access to powerful extension APIs such as management.

Why not try both out and see which one you like?

[NanoAi]

Your method actually sounds interesting but it sounds painful to have to rezip every time. Do you have a Discord server/account so that we can talk without hijacking this issue?

[jspenguin2017]

I don't have Discord. I haven't changed my extension in the past 3 months, if you find yourself changing it often then no, that's probably not going to work for you. Unless you don't mind putting all the code public, there isn't a cheap and easy way to automate the process.

[jspenguin2017]

@LuaTenshi Actually, you may not need to re-zip it every time, for one, you can have a build script to zip and push that automatically to Web Store, otherwise, if you are using Chromium, you can load developer mode extensions and it will stay. For Chrome on Windows and macOS, Google put in some extra "security" and it's a pain to use unpacked extensions.

Now back on topic: I don't see a reasonable way to block auto-play with script snippet. Google is putting that in Chrome soon, so I guess I'll flag this as wontfix.

[jspenguin2017]

Nano is available on Firefox too. Closing.

[elypter]

@LuaTenshi thats a cool userscript. you should put it on greasyfork

[NanoAi]

@elypter If I knew for sure that it would work on even the toughest of sites I'd put it on greasyfork but sadly I'm not sure on how to get it working on places like Twitch etc...

I know it's excluded but I removed it from the excludes to try things.

UPDATE: Do not use this script, it makes your browser freeze and your tab die on some sites. Not sure why. Also sometimes it just doesn't even work. ;w;

```Javascript // ==UserScript== // @name Video Element Pause // @namespace http://tampermonkey.net/ // @version 0.2 // @description try to take over the world! // @author LuaTenshi // @include *://* // @exclude /^https?://(www\.|)youtube\.com/.*$/ // @exclude /^https?://(www\.|)twitch\.tv/.*$/ // @exclude /^https?://(www\.|)googlevideo\.com/.*$/ // @exclude /^https?://(www\.|)vimeo\.com/.*$/ // @exclude /^https?://(www\.|)vid\.me/.*$/ // @exclude /^https?://(www\.|)dailymotion\.com/.*$/ // @exclude /^https?://(www\.|)veoh\.com/.*$/ // @exclude /^https?://(www\.|)netflix\.com/.*$/ // @exclude /^https?://(www\.|)liveleak\.com/.*$/ // @exclude /^https?://(www\.|)gelbooru\.com/.*$/ // @exclude /^https?://danbooru\.donmai\.us/.*$/ // @exclude /^https?://(www.|)kissanime\.com/.*$/ // @exclude /^https?://(www.|)kisscartoon\.me/.*$/ // @exclude /^https?://(www.|)kissanime\.to/.*$/ // @exclude /^https?://(www.|)kissasian\.com/.*$/ // @exclude /^https?://(www.|)kissmanga\.com/.*$/ // @exclude /^https?://(www.|)readcomiconline\.to/.*$/ // @exclude /^https?://(www.|)kissanime\.ru/.*$/ // @exclude /^https?://(www.|)kisscartoon\.se/.*$/ // @exclude /^https?://(www.|)kissasian\.ch/.*$/ // @exclude /^https?://(www.|)kimcartoon\.me/.*$/ // @grant unsafeWindow // @run-at document-start // ==/UserScript== const SafeAutoPlay = true; // If this is enabled be sure to click in the middle of the video, as this works best. function pause(vid, noevent, extend){ if( vid && vid.pause && vid.load ){ vid.pause(); vid.preload = 'none'; vid.autoplay = null; vid.setAttribute('preload', 'none'); vid.setAttribute('autostart', 'false'); vid.removeAttribute('autoplay'); if( noevent !== true ){ vid.addEventListener('canplay', function(e){ e.preventDefault(); pause(e.target, true); }, {once: true, capture: true}); } } } function play(vid, x, y){ var box = vid.parentNode && vid.parentNode.getBoundingClientRect() || vid.getBoundingClientRect(); if( box && (x <= box.width && x >= box.x) && (y <= box.height && y >= box.y) ){ vid.setAttribute('autoplay', 'true'); vid.play(); vid.addEventListener('canplay', function(e){ e.target.play(); }, {once: true, capture: true}); console.log('SafeAutoPlay Started: \n\t', vid); } } function restore(vid, observer, event){ if ( !vid.____restored ){ console.log('RESTORING: ', vid); pause(vid, 'auto'); observer.disconnect(); vid.onplaying = vid.oldOnplaying; vid.oldOnplaying = null; vid.removeAttribute('autostart'); vid.____restored = true; if( event && SafeAutoPlay ){ play(vid, event.clientX, event.clientY); } } } function init() { 'use strict'; var vids = document.getElementsByTagName('video'); for ( var i = 0; i < vids.length; i++ ){ var vid = vids[i]; var obsettings = { attributes: true, attributeFilter: ['preload'], childList: false, characterData: false }; vid.oldOnplaying = vid.onplaying; vid.onplaying = function(){vid.pause();}; pause(vid); var observer = new MutationObserver(function(event){ observer.disconnect(); var target = event[event.length-1].target; pause(target || vid); observer.observe(vid, obsettings); }); observer.observe(vid, obsettings); setTimeout(function(){ window.addEventListener('click', function(event){restore(vid, observer, event);}, {once: true, capture: true}); },500); } } document.addEventListener('DOMContentLoaded', init); document.addEventListener('DOMNodeInserted', function(e){ var el = e.target; if (el.nodeName == "VIDEO"){ console.log('Attempting to pause: \n\t',el); pause(el); } }, false); ```

[elypter]

its not perfect but i think it would still help people. for the 2 sites i was opening since installing it worked in both cases. those were tagesschau.de and hooktube.com (i dont mind autoplay on those sites but it worked as intended). if yu dont want to release it on greasyfork yet you can just put it on github too. i also have 2 userscripts on github that do not work perfectly. they are also easy to install if you have INSTALL USER SCRIPT

[grand-lotus-iroh]

So just to double-check, the best way to disable autoplay is using script or go into browser experimental features? gonna check out the script b/c i know the experimental feature is junk and doesn't work that well.. just test it out on cnet for example.

[KonoromiHimaries]

AutoPlay Disabled for HTML5 Videos + chrome autoplay policy https://greasyfork.org/pl/scripts/30974-autoplay-disabled-for-html5-videos-pause-on-switch-tab

example. https://eurosport.interia.pl/raporty/raport-pjongczang-2018/wideo/video,vId,2476144

[jspenguin2017]

It uses MutationObserver, where I question its reliability.

[jspenguin2017]

@hawkeye116477 That code quality is absolutely unacceptable.