[ M ] mini moviola ( si applica a tutti i siti che contengono dei video)

[Mil-F.]

ok forse il titolo è un po pretenzioso, ma non sapevo come chiamarlo,
questo script è parte di uno  più complesso che mi è servito per un progetto su cui ho lavorato in cui dovevo prendere dei Time stamp molto precisi.
Ho notato però che, almeno la base, potrebbe essere utile anche con i vari video online;
ma cosa fa di preciso?  Aggiunge un div con dei bottoni ""avanzati""  rispetto agli abituali
[spoiler][/spoiler]

e naturalmente potete spostarlo e metterlo dove volete

 [spoiler][/spoiler]
lo so,  sono un po bastardella 

spiegazione dei bottoni

i gialli saltano avanti e indietro di n secondi
i secondi li indicate nel rispettivo  campo numerico (giallo)
idem per gli altri due, gli arancioni saltano in minuti, e gli azzurrini fanno step  in decimi di secondo, di solito per questi è inutile scendere sotto lo 0.3,  ma dipende dal frame rate dei video
il campo verdolino imposta la velocità di riproduzione
- per spostarlo clickateci sopra e premete control
c'è anche una skin più scura che personalmente preferisco

ma potete ovviamente cambiare il css a vostro piacimento

per installarlo visto che ci sono due skin è leggermente diverso dal solito
passo 1 inserite la prima parte

Codice: [Seleziona]

// ==UserScript==
// @name mini moviola
// @namespace Violentmonkey Scripts
// @description if page contain a video add a advanced play env
// @version     0.0.1
// @match *://*/*
// @include *
// @exclude *nome_sito.org/*
// @grant none
// @noframes
// @run-at document-idle
// ==/UserScript==

console.log('%cStarting mini moviola','color:red;font-size:15px:')
setTimeout(staRting,500)

 "use strict";

adesso dipende da cosa volete fare scegliere una skin, o metterle entrambe e decidere dopo

passo 2 a skin colorata

Codice: [Seleziona]

const selStyle ='#extra{ display: block; position: absolute; top: 10px; left: 10px; box-sizing: border-box; background: #130333cf !important; color: black; border: 6px outset black; box-shadow: 17px 15px 23px 13px #15080885; z-index:1000;} \
#m_div_1, #m_div_2, #m_div_3, #m_div_4{ display: block; position: relative; width: 144px; height: 41px; background: grey; box-sizing: border-box;} #m_div_3{border-top: ridge 3px;} #jum_1, #jum_2, #jum_3, #jum_4{ display: inline-block; position: relative; width: 22%; height: 30px; margin: 5px 0 0px 3px; border: 2px outset black; box-sizing: border-box; font-size: 19px; line-height: 13px;}#jum_1, #jum_2{ padding: 6px 0px 0px 7px;} #jum_3, #jum_4{ padding: 6px 0px 0px 4px;} #jum_1, #jum_2, #jum_in_1{ background: yellow;} #jum_3, #jum_4, #jum_in_2{ background: coral;} #jum_in_1, #jum_in_2{ display: inline-block; position: relative; width: 44%; height: 30px; color: black; box-sizing: border-box; padding: 0px 0px 0px 17px;} #jum_in_1{ margin: 2px 5px 0px 7px;} #step_1, #step_2{ display: inline-block; position: relative; width: 30%; height: 28px; margin: 7px 0 0px 18px; padding: 3px 3px 1px 10px; border: 2px outset black; box-sizing: border-box; font-size: 30px; line-height: 13px;} #step_1, #step_2, #sped_in_2{ background: #5daab7;} #sped_in_1, #sped_in_2{ display: inline-block; position: relative; width: 45%; height: 30px; margin: 2px 0px 0 4px; color: black; box-sizing: border-box; padding: 0px 0px 0px 6px;} #sped_in_1{ background: #51d887;} #jum_1, #jum_2,#jum_3, #jum_4,#step_1, #step_2{ cursor: pointer;} #extra,#m_div_1,#m_div_2,#m_div_3,#m_div_4,#jum_1,#jum_2,#jum_3,#jum_4,#step_1,#step_2{-webkit-user-select: none;-moz-user-select: none;}'
passo 2 b skin scura

Codice: [Seleziona]

const selStyle = ' #extra{ display: block; position: absolute; top: 10px; left: 10px; box-sizing: border-box; background: #130333cf !important; color: black; border: 6px outset black; box-shadow: 17px 15px 23px 13px #15080885; z-index: 1000;} \
#m_div_1, #m_div_2, #m_div_3, #m_div_4{ display: block; position: relative; width: 144px; height: 41px; background: #2a2b2d; box-sizing: border-box; } #m_div_3{border-top: ridge 3px;} #jum_1, #jum_2, #jum_3, #jum_4{ display: inline-block; position: relative; width: 22%; height: 30px; margin: 5px 0 0px 3px;  border: 2px outset black; box-sizing: border-box; font-size: 19px; line-height: 13px; }#jum_1, #jum_2{ padding: 6px 0px 0px 7px;} #jum_3, #jum_4{ padding: 6px 0px 0px 4px;} #jum_1, #jum_2,#jum_3, #jum_4,#step_1, #step_2{ background: #2f3035; color: green; cursor: pointer; } #jum_in_1, #jum_in_2, #sped_in_2{ background: #454040; color: green !important; border: inset gray 2px;} #jum_in_1, #jum_in_2{ display: inline-block; position: relative; width: 44%; height: 30px; color: black; box-sizing: border-box; padding: 0px 0px 0px 17px; } #jum_in_1{ margin: 2px 5px 0px 7px; } #jum_in_1, #jum_in_2,#sped_in_1, #sped_in_2{ font-size: 1.1em } #step_1, #step_2{ display: inline-block; position: relative; width: 30%; height: 28px; margin: 7px 0 0px 18px; padding: 3px 3px 1px 10px; border: 2px outset black; box-sizing: border-box; font-size: 30px; line-height: 13px; } #sped_in_1, #sped_in_2{ display: inline-block; position: relative; width: 45%; height: 30px; margin: 2px 0px 0 4px; color: black; box-sizing: border-box; padding: 0px 0px 0px 6px; } #sped_in_1{ background: #544f4f; border: inset gray 2px; color: #81d262; } #jum_1,#jum_3,#step_1{border-radius: 12px 0px 0px 12px; } #jum_2,#jum_4,#step_2{border-radius: 0px 12px 12px 0px; } #extra,#m_div_1,#m_div_2,#m_div_3,#m_div_4,#jum_1,#jum_2,#jum_3,#jum_4,#step_1,#step_2{-webkit-user-select: none;-moz-user-select: none;}'
  passo 2 c entrambe le skink

Codice: [Seleziona]

const color_style ='#extra{ display: block; position: absolute; top: 10px; left: 10px; box-sizing: border-box; background: #130333cf !important; color: black; border: 6px outset black; box-shadow: 17px 15px 23px 13px #15080885; z-index:1000;} \
#m_div_1, #m_div_2, #m_div_3, #m_div_4{ display: block; position: relative; width: 144px; height: 41px; background: grey; box-sizing: border-box;} #m_div_3{border-top: ridge 3px;} #jum_1, #jum_2, #jum_3, #jum_4{ display: inline-block; position: relative; width: 22%; height: 30px; margin: 5px 0 0px 3px; border: 2px outset black; box-sizing: border-box; font-size: 19px; line-height: 13px;}#jum_1, #jum_2{ padding: 6px 0px 0px 7px;} #jum_3, #jum_4{ padding: 6px 0px 0px 4px;} #jum_1, #jum_2, #jum_in_1{ background: yellow;} #jum_3, #jum_4, #jum_in_2{ background: coral;} #jum_in_1, #jum_in_2{ display: inline-block; position: relative; width: 44%; height: 30px; color: black; box-sizing: border-box; padding: 0px 0px 0px 17px;} #jum_in_1{ margin: 2px 5px 0px 7px;} #step_1, #step_2{ display: inline-block; position: relative; width: 30%; height: 28px; margin: 7px 0 0px 18px; padding: 3px 3px 1px 10px; border: 2px outset black; box-sizing: border-box; font-size: 30px; line-height: 13px;} #step_1, #step_2, #sped_in_2{ background: #5daab7;} #sped_in_1, #sped_in_2{ display: inline-block; position: relative; width: 45%; height: 30px; margin: 2px 0px 0 4px; color: black; box-sizing: border-box; padding: 0px 0px 0px 6px;} #sped_in_1{ background: #51d887;} #jum_1, #jum_2,#jum_3, #jum_4,#step_1, #step_2{ cursor: pointer;} #extra,#m_div_1,#m_div_2,#m_div_3,#m_div_4,#jum_1,#jum_2,#jum_3,#jum_4,#step_1,#step_2{-webkit-user-select: none;-moz-user-select: none;}'
const darck_style = ' #extra{ display: block; position: absolute; top: 10px; left: 10px; box-sizing: border-box; background: #130333cf !important; color: black; border: 6px outset black; box-shadow: 17px 15px 23px 13px #15080885; z-index: 1000;} \
#m_div_1, #m_div_2, #m_div_3, #m_div_4{ display: block; position: relative; width: 144px; height: 41px; background: #2a2b2d; box-sizing: border-box; } #m_div_3{border-top: ridge 3px;} #jum_1, #jum_2, #jum_3, #jum_4{ display: inline-block; position: relative; width: 22%; height: 30px; margin: 5px 0 0px 3px;  border: 2px outset black; box-sizing: border-box; font-size: 19px; line-height: 13px; }#jum_1, #jum_2{ padding: 6px 0px 0px 7px;} #jum_3, #jum_4{ padding: 6px 0px 0px 4px;} #jum_1, #jum_2,#jum_3, #jum_4,#step_1, #step_2{ background: #2f3035; color: green; cursor: pointer; } #jum_in_1, #jum_in_2, #sped_in_2{ background: #454040; color: green !important; border: inset gray 2px;} #jum_in_1, #jum_in_2{ display: inline-block; position: relative; width: 44%; height: 30px; color: black; box-sizing: border-box; padding: 0px 0px 0px 17px; } #jum_in_1{ margin: 2px 5px 0px 7px; } #jum_in_1, #jum_in_2,#sped_in_1, #sped_in_2{ font-size: 1.1em } #step_1, #step_2{ display: inline-block; position: relative; width: 30%; height: 28px; margin: 7px 0 0px 18px; padding: 3px 3px 1px 10px; border: 2px outset black; box-sizing: border-box; font-size: 30px; line-height: 13px; } #sped_in_1, #sped_in_2{ display: inline-block; position: relative; width: 45%; height: 30px; margin: 2px 0px 0 4px; color: black; box-sizing: border-box; padding: 0px 0px 0px 6px; } #sped_in_1{ background: #544f4f; border: inset gray 2px; color: #81d262; } #jum_1,#jum_3,#step_1{border-radius: 12px 0px 0px 12px; } #jum_2,#jum_4,#step_2{border-radius: 0px 12px 12px 0px; } #extra,#m_div_1,#m_div_2,#m_div_3,#m_div_4,#jum_1,#jum_2,#jum_3,#jum_4,#step_1,#step_2{-webkit-user-select: none;-moz-user-select: none;}'

//  const selStyle =  color_style;
//  const selStyle =   darck_style;

 come potete notare le ultime 2 righe sono commentate dovete decommmentare ( togliere i // ) da quella che volete usare,
per cambiare skin basta spostare il commento

  passo 3 ultima parte

Codice: [Seleziona]

/** creat the element */
const ccr = function (e){
   return document.createElement(e)
}

const create_box = function(n,t,j,e){
  if (e =='e'){
    var i, y =  ccr('div');
    y.id='extra'
    document.body.append(y)}
  for(i=1; i<=n; i++){
    var  a   = ccr(t)
         a.id=j+[i];

    if(j=='m_div_')
      y.append(a)

    if(j=='jum_'){
      if(i==1){
        a.innerHTML='<';
        a.setAttribute('title','back 1 second');
      }
      if(i==2)
        a.innerHTML='>';
      if(i==3)
        a.innerHTML='&#8810;';
      if(i==4)
        a.innerHTML=' &#8811;';

      m_div_1.append(a)
    }

    if(j=='jum_in_'){
      a.type='number';
      a.min="1";
      a.value="1";
      a.step="1";
      m_div_2.append(a)
    }

    if(j=='step_'){  // || j=='jum_in_'){
     //  if(j=='jum_'){
      if(i==1)
        a.innerHTML=' « ';
      if(i==2)
        a.innerHTML=' » ';

      m_div_3.append(a)
    }

    if(j=='sped_in_'){
      a.type='number';
      a.min="0.01";
      a.value="1";
      a.step="0.01";
      m_div_4.append(a)
    }
  }
}

/** dragging function */
// global function
let isDragReady;
var Draggable = function (id) {
  let el = document.getElementById(id),
      isDragReady = false,
      dragoffset = {
         x: 0,
         y: 0
      };

  el.init = function () {
    // only for this DoM object
    el.style.position = "absolute";
    this.events();
  };

  // events for the element
      function mouD(e){
        console.log('key down')
        if(e.ctrlKey) {
          isDragReady = true;
        }
      }
      function mouU(e){
        console.log('keyup' +e.key +' - '+ e.Key)
        isDragReady = false;
      }
  el.events = function () {
    var self = this;
    _on(el, 'mousedown', function (e) {
      document.addEventListener('keydown',mouD,{once:true})
      document.addEventListener('keyup',mouU,{once:true})
           e.clientX + (document.documentElement.scrollLeft);
          e.clientY + (document.documentElement.scrollTop);
      dragoffset.x = e.pageX - el.offsetLeft;
      dragoffset.y = e.pageY - el.offsetTop;
    });

    _on(el, 'mouseup', function(){
      document.removeEventListener('keydown',mouD)
      document.removeEventListener('keyup',mouU)
    });
    _on(document, 'mouseup', function () {
      isDragReady = false;
    });
    _on(document, 'mousemove', function (e) {
      if (isDragReady) {
        e.clientX + (document.documentElement.scrollLeft);
       e.clientY + (document.documentElement.scrollTop);
        el.style.top = (e.pageY - dragoffset.y) + "px";
        el.style.left = (e.pageX - dragoffset.x) + "px";
      }
    });
  };
  // useless cross browser event Helper function
  var _on = function (el, event, fn) {
    document.attachEvent ? el.attachEvent('on' + event, fn) : el.addEventListener(event, fn, !0);
  };
  el.init();
}

/** manage the video */
 var   t_v_CT;
let cliCKed = function(){
  const the_vid = document.querySelectorAll('video')
  /** if there are more than one video could be an issue */
  if (the_vid.length > 1 )
  alert ('found ' + the_vid.length + 'video')

  the_vid[0].addEventListener('timeupdate',function(e){
     t_v_CT = the_vid[0].currentTime;
  })

  let vid_M_ext = document.querySelector('#extra'),
      spabt = vid_M_ext.querySelectorAll('span'),
      spaLl = spabt.length,
      in_pt = vid_M_ext.querySelectorAll('input'),
      inpLl = in_pt.length ;
  var i;
  for( i of spabt){
    i.addEventListener('mousedown',function(){
      var thid=this.id
      switch(thid){
        case 'jum_1' :
            the_vid[0].currentTime = (parseFloat(t_v_CT) - parseFloat(ntSj));
            this.style.borderStyle='inset';
        break
        case 'jum_2' :
            the_vid[0].currentTime = (parseFloat(t_v_CT) + parseFloat(ntSj));
            this.style.borderStyle='inset';
        break
        case 'jum_3' :
            the_vid[0].currentTime = (parseFloat(t_v_CT) - parseFloat(ntLj)*60);
            this.style.borderStyle='inset';
        break
        case 'jum_4':
            the_vid[0].currentTime = (parseFloat(t_v_CT) + parseFloat(ntLj)*60);
            this.style.borderStyle='inset';
        break
        case 'step_1' :
            the_vid[0].currentTime = (parseFloat(t_v_CT) - parseFloat(ntVSj)/10);
            this.style.borderStyle='inset';
        break
        case 'step_2':
            the_vid[0].currentTime = (parseFloat(t_v_CT) + parseFloat(ntVSj)/10);
            this.style.borderStyle='inset'
        break
      }
    })
    i.addEventListener('mouseup',function(){
       this.style.borderStyle='outset';
    })
  }

  for( i of in_pt){
    var iId = i.id
    switch(iId){
      case 'sped_in_1' :  /** change speed */
        i.addEventListener("change", function(){the_vid[0].playbackRate = this.value;});
        i.addEventListener("keyup",  function(){the_vid[0].playbackRate = this.value;});
      ;
      break
      case 'sped_in_2' :  /** set step jump  */
        var ntVSj = jum_in_1.value;
        i.addEventListener('change', function(){ntVSj=this.value;});
        i.addEventListener('keyup',  function(){ntVSj=this.value;});
        ;
      break
      case 'jum_in_1'  :  /** set time jump S */
        var ntSj = jum_in_1.value;
        i.addEventListener('change', function(){ntSj=this.value;});
        i.addEventListener('keyup',  function(){ntSj=this.value;});
        ;
      break
      case 'jum_in_2' : /** set time jump M */
        var ntLj = jum_in_1.value;
        i.addEventListener('change', function(){ntLj=this.value;});
        i.addEventListener('keyup',  function(){ntLj=this.value;});
        ;
      break
    }
  }
}
let count = 0;
function staRting(){
  /** if there aren't video do nothing */
  const thereare_vid = document.querySelectorAll('video')
  if(thereare_vid.length >= 1){
    console.log('%cvideo found','color:green;font-size:15px:')
    create_box(4,'div','m_div_','e');

    create_box(4,'span','jum_');
    create_box(2,'input','jum_in_');
    create_box(2,'span','step_');
    create_box(2,'input','sped_in_');

    /**  add style*/
    var y = ccr('style');
    y.innerHTML = selStyle;
    document.body.append(y)

      /**********************************************
      **   calling  draggable function             **
      **   here drag is DOM element Id value       **
      **********************************************/

      Draggable('extra');
      let draged = document.getElementById('extra');
          draged.style.cursor="inerit";

  cliCKed();
  }
  else{
    console.log('%cvideo not found','color:orange;font-size:15px:')
    if(count < 5)
      setTimeout(staRting,500)
    count++;
  }
}
a volte potrebbe essere non in primo piano, aumentate lo z-index nel css  z-index:1000;} \ dovrebbe essere alla riga 18, e 20 se avete messo entrambe gli script.
Se non basta segnalatelo qui, linkando il sito su cui avete problemi.
Se è un sito porno, a me non frega nulla e non giudico, però mandatemi il link per MP, magari ne scopro uno nuovo 

a volte puo sembrare che dopo un salto piuttoso lungo il video non parta , non è una bug, dipende dal fatto che siete saltati ad una parte del video non ancora scaricata e da come il sito invia il video e da come è gestito il buffer del video 

BUG :
non vuol saperne di funzionare con chromium e suppongo nemmeno funzioni con chrome.
A volte premendo control  schizza sulla  posizione del mouse, ma forse l'ho gia risolta
 


come al solito per problemi  o suggerimenti fatemi sapere postando qui
ciao e buon divertimento 
 

[Mil-F.]

gia che c'ero ho fatto un altra skin



se lo trascinate a destra nella pagine diventa quadrato

Codice: [Seleziona]

const glassY = '#extra { display: block; position: absolute; top: 10px; left: 10px; box-sizing: initial; background: #130333cc !important; color: black; border: 6px outset #00000054; box-shadow: 3px 4px 12px 2px #1D08087A; z-index: 111000; background: #2f303530 !important; padding: 9px 0px 0px 0px; } #m_div_1, #m_div_2, #m_div_3, #m_div_4 { display: inline-block; position: relative; width: 151px; height: 42px; box-sizing: content-box; } #m_div_3 { width: 135px; } #jum_1, #jum_2, #jum_3, #jum_4 { display: inline-block; position: relative; width: 23%; height: 30px; margin: 5px 0 0px 3px; border: 2px outset black; box-sizing: border-box; font-size: 19px; line-height: 13px; } #jum_1, #jum_2 { padding: 7px 0px 0px 11px; line-height: 10px; } #jum_3, #jum_4 { padding: 6px 0px 0px 6px; } #jum_1, #jum_2, #jum_3, #jum_4, #step_1, #step_2 { background: #2f3035; color: green; cursor: pointer; margin: 2px 1px 0px 3px; } #jum_in_1, #jum_in_2, #sped_in_2 { background: #454040; color: green !important; border: inset gray 2px; } #jum_in_1, #jum_in_2 { display: inline-block; position: relative; width: 41%; height: 30px; color: black; box-sizing: border-box; padding: 0px 0px 0px 10px; } #jum_in_1 { margin: 4px 6px 0px 5px; } #jum_in_1, #jum_in_2, #sped_in_1, #sped_in_2 { font-size: 1.1em; /*! margin: 3px 1px -2px 3px; */ } #step_1, #step_2 { display: inline-block; position: relative; width: 32%; height: 30px; margin: 0px 0 0px 18px; padding: 4px 0px 2px 12px; border: 2px outset black; box-sizing: border-box; font-size: 30px; line-height: 11px; } #sped_in_1, #sped_in_2 { display: inline-block; position: relative; width: 45%; height: 30px; color: black; box-sizing: border-box; padding: 0px 0px 0px 6px; } #sped_in_1 { background: #544f4f; border: inset gray 2px; color: #81d262; margin: 0px -121px 0px 57px; } #jum_1, #jum_3, #step_1 { border-radius: 12px 0px 0px 12px; } #jum_2, #jum_4, #step_2 { border-radius: 0px 12px 12px 0px; } #extra, #m_div_1, #m_div_2, #m_div_3, #m_div_4, #jum_1, #jum_2, #jum_3, #jum_4, #step_1, #step_2 { -webkit-user-select: none; -moz-user-select: none; margin: 0px -1px 0 3px; } #m_div_4 { width: 120px; } #m_div_2 { width: 120px; } #step_1 { margin: 0 19px 0 2px;}'

[Leonida29]

ok.... ma non c'era bisogno che ti mostrassi così persuasiva!!!!

[Giuseppe]

ok.... ma non c'era bisogno che ti mostrassi così persuasiva!!!!

[Mil-F.]

ogni venditore di auto sa che se ci mette vicino un paio di quelle ne vende almeno il triplo 
comunque è già il terzo che metto e tutto quello che notate e avete da commentare sono le tette????   
nemmeno su quello dedicato al forum avete detto nulla 
vabbbé tanto lo sapevo che andava così, però farebbe piacere qualche riscontro, non che non abbia visto i grazie  (grazie :) ), ma qualche commento.... non fa male
  :* :* :*

[Leonida29]

carissima, come ti dissi per me è tutto geroglifico incomprensibile, considerato che non posso smanettare più di tanto dato il mio lavoro. La cosa un pò mi dispiace perchè vorrei poter avere al capacità e la possibilità di contribuire maggiormente. 

Però se pubblichi certe cose ha la mia attenzione. 

[Mil-F.]

sisi lo so con certe cose " (.)(.) " si attira sempre l'attenzione
 

[Mil-F.]

come mi è stato fatto notare è piuttosto invadente  e non sempre lo desideriamo, quindi ho aggiunto delle hotKey per visualizzarlo e nasconderlo.
la hotKey è "control + alt + z ".
Il modo più comodo per usarla è tenere premuto control - alt e usare la z per alternare la visualizzazione.
Questo il codice da inserire

Codice: [Seleziona]

   
      /**********************************************
      **        hide display  extra buttons        **
      **********************************************/

      document.body.addEventListener('keydown',function (e){
        if(e.ctrlKey && e.altKey && e.key=='z')
          draged.style.display=='block' ? draged.style.display='none' : draged.style.display='block'
          })
   
va inserito verso la fine subito dopo ' draged.style.cursor="inerit"; ' e prima di '  cliCKed(); '

naturalmente potete usare anche shiftKey (le altre key meglio evitarle) e le lettere che volete, sostituendoli all'interno dell'if
se preferite che inizialmente sia nascosto dovete solo modificare " block " con  " none "
all'inizio del css in " const = nome dello stile ' #extra{ display: block;  "
più o meno verso la riga 252 dipende da quanti style sono stati inseriti
 
ciao