☰

Youtube Repeat button

Youtube動画プレイヤーにリピートボタンをつける(html5プレイヤーのみ動作)

目前為 2015-11-16 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Youtube Repeat button
  3. // @namespace    
  4. // @version      0.1.2
  5. // @description  Youtube動画プレイヤーにリピートボタンをつける(html5プレイヤーのみ動作)
  6. // @author       Nobby
  7. // @match        https://www.youtube.com/watch*
  8. // @grant        GM_setValue
  9. // @grant        GM_getValue
  10. // ==/UserScript==
  11.  
  12. (function(){
  13.     var player = document.getElementById('movie_player');
  14.     var video = document.querySelector('video');
  15.     var repeat = GM_getValue('rpt',false);
  16.     var control = document.getElementsByClassName('ytp-chrome-controls')[0];
  17.     var yrb = document.createElement('button');
  18.     var title = 'リピート';
  19.     yrb.setAttribute('class', 'ytp-button ytp-repeat-button');
  20.     yrb.setAttribute('style', 'float:right;');
  21.  
  22.     var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  23.     svg.setAttribute('width', '100%');
  24.     svg.setAttribute('height', '100%');
  25.     svg.setAttribute('viewBox', '-128 -128 768 768');
  26.     svg.setAttribute('version', '1.1');
  27.     svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
  28.     svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  29.  
  30.     var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
  31.  
  32.     var from = 'M363 363v0h0v0h0v0l0-0 0-0v0h0zM149 149v0h0v0h0v0l0 0-0 0v0h0zM469 256l-85 85v-64H64v-42h320v-64l85 85z';
  33.     var to = 'M363 363v-86h42v128H149v64l-85-85 85-85v64h214zM149 149v86h-42V107h256V43l85 85-85 85v-64H149zM256 256l-0 0v-0H256v-0h0v-0l0 0z';
  34.  
  35.     if(repeat){
  36.         from = [to, to = from][0];
  37.         video.setAttribute('loop', '');
  38.         title = 'リピート解除';
  39.     }
  40.     yrb.setAttribute('title', title);
  41.  
  42.     var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  43.     path.setAttribute('id', 'ytp-repeat');
  44.     path.setAttribute('d', from);
  45.  
  46.     var animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
  47.     animate.setAttribute('attributeType', 'XML');
  48.     animate.setAttribute('attributeName', 'd');
  49.     animate.setAttribute('fill', 'freeze');
  50.     animate.setAttribute('dur', '0.2s');
  51.     animate.setAttribute('keySplines', '.4 0 1 1');
  52.     animate.setAttribute('repeatCount', '1');
  53.     animate.setAttribute('begin', 'indefinite');
  54.  
  55.     var use1 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
  56.     use1.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#ytp-repeat');
  57.     use1.setAttribute('class', 'ytp-svg-shadow');
  58.  
  59.     var use2 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
  60.     use2.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#ytp-repeat');
  61.     use2.setAttribute('class', 'ytp-svg-fill');
  62.  
  63.     path.appendChild(animate);
  64.     defs.appendChild(path);
  65.     svg.appendChild(defs);
  66.     svg.appendChild(use1);
  67.     svg.appendChild(use2);
  68.     yrb.appendChild(svg);
  69.  
  70.     control.appendChild(yrb);
  71.  
  72.     var tooltext = document.getElementsByClassName('ytp-tooltip-text')[0];
  73.     var tooltip = tooltext.parentNode.parentNode;
  74.     
  75.     var delay = null;
  76.     
  77.     yrb.addEventListener('mouseover', function(){
  78.         yrb.removeAttribute('title');
  79.         tooltip.setAttribute('aria-hidden', 'true');
  80.         tooltip.setAttribute('class', 'ytp-tooltip ytp-bottom');
  81.         delay = setTimeout(function() { 
  82.             tooltip.style.display = '';
  83.             tooltext.textContent = title;
  84.             var parentRect = player.getBoundingClientRect();
  85.             var childRect = yrb.getBoundingClientRect();
  86.             var tipRect = tooltip.getBoundingClientRect();
  87.             var x_left = childRect.left - parentRect.left + (childRect.width - tipRect.width)/2;
  88.             tooltip.setAttribute('style', 'left:'+x_left+'px');
  89.             tooltip.removeAttribute('aria-hidden');
  90.         }, 500);
  91.     }, false);
  92.     
  93.     yrb.addEventListener('mouseleave', function(){
  94.         clearTimeout(delay);
  95.         tooltip.style.display = 'none';
  96.         tooltip.setAttribute('aria-hidden', 'true');
  97.         yrb.setAttribute('title', title);
  98.     }, false);
  99.         
  100.     yrb.addEventListener('click', function(){ 
  101.         if(repeat){
  102.             video.removeAttribute('loop');
  103.             title = 'リピート';
  104.         }else{
  105.             video.setAttribute('loop', '');
  106.             title = 'リピート解除';
  107.         }
  108.         repeat = !repeat;
  109.         tooltext.textContent = title;
  110.         var parentRect = player.getBoundingClientRect();
  111.         var childRect = yrb.getBoundingClientRect();
  112.         var tipRect = tooltip.getBoundingClientRect();
  113.         var x_left = childRect.left - parentRect.left + (childRect.width - tipRect.width)/2;
  114.         tooltip.setAttribute('style', 'left:'+x_left+'px');
  115.         setTimeout(function() { 
  116.             animate.setAttribute('from', from);
  117.             animate.setAttribute('to', to);
  118.             animate.beginElement();
  119.             path.setAttribute('d', from);
  120.             from = [to, to = from][0];
  121.         }, 50);
  122.     }, false);
  123.     
  124.     window.onbeforeunload = function(){
  125.         GM_setValue('rpt',repeat);
  126.     };
  127. })();