所有网站启用画中画 OPEN PIP IN ALL SITE

2020/10/10 下午3:21:48
当前为 2020-10-10 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        所有网站启用画中画 OPEN PIP IN ALL SITE
// @namespace   Violentmonkey Scripts
// @match       <all_urls>
// @grant       none
// @version     1.0
// @author      linocng1987
// @description 2020/10/10 下午3:21:48
// @require https://unpkg.com/[email protected]/dist/jquery.js
// @require https://unpkg.com/[email protected]/dist/vue.js
// ==/UserScript==
(function($){
  
  var appendToolbar = function($video){
    
     var width = $video.width();
    var position = $video.css("position");
    var parent_position = $video.parent().css("position");
    var parent_display = $video.parent().css("display");

        var $toolbar = $(`
          <div  class='us_pip_toolbar'>
            <button type='button' class="us_pip_toolbar__button">open pip</button>
          </div>
        `).data("video", $video);
        
        $video.after($toolbar);
    
    
    if(position === "absolute" || position === "fixed" || parent_position === "relative" || parent_display === "flex") {
      $toolbar.addClass("us_pip_toolbar__absolute");
    }else{
      $toolbar.width(width).addClass("us_pip_toolbar__static");
    }
        
        $toolbar.on("click", "button", function(){
          
           $video.get(0).requestPictureInPicture();
          
        })
  }
  
  
    var doFuck = function(){
      
        
       var $videos = $("video");



      $videos.each(function(){

        var $this = $(this)

        var isFucked = $this.data("isFucked");

        if(isFucked === true) {
          return
        } else {
          $this.data("isFucked", true);
          appendToolbar($this);
        }
        
       
        
      


      });
      
      
          
    setTimeout(function(){
      
      
      doFuck();
      
    }, 10 * 1000); 
      
    }

    
    doFuck();

  
  
  
  $("head").append(`<style>

      .us_pip_toolbar {
          
          opacity: 0.8;
          box-sizing: border-box;
      }

      .us_pip_toolbar__absolute {
        
          position: absolute;
          top: -28px;
          left: 0;
          z-index: 99999999;
      
      }
      .us_pip_toolbar__static {
          
          border: 1px solid #ccc;
          background: #dadada;
          padding: 4px;

        
      }
      


      .us_pip_toolbar .us_pip_toolbar__button {
          display: inline-block;
          padding: 0 16px;
          font-size: 14px;
          line-height: 32px;
          text-align: center;
          cursor: pointer;
          background: none;
          border: 1px solid;
          border-radius: 3px;
          color: #fff;
          background-color: #0084ff;
          border-color: #0084ff;
      }

    .body_us_pip_toolbar {

          position: fixed;
   bottom: 10px;
    left: 10px;
          z-index: 99999999;

      }

      .body_us_pip_toolbar .body_us_pip_item {
          height: 72px;
          width: 128px;
        background-size: cover;

margin-bottom: 8px;



      }
      <style>`)
  
  
  
  
  
          var $bodyToolbar = $(`
          <div  class='body_us_pip_toolbar' id='body_us_pip_toolbar'>
            
          </div>
        `);
        
  
  
  
 
  
  var init = function(){
    
     $("body").append($bodyToolbar);
  
    
    new Vue({
    
    el: '#body_us_pip_toolbar',
    
    template: `
    
      <div class='body_us_pip_toolbar' id='body_us_pip_toolbar'>

 

        <div v-for='(item, i) in list'  class='body_us_pip_item'  :style="getStyle(item)">
 
          <button type='button' class="us_pip_toolbar__button__open" @click='open($event, item, i)'>pip</button> 
        </div>
      </div>
    
    `,
    
    data(){
      
      return {
          list: []
        
      }
    },
    
    methods: {
      
    capture (video) {
            var canvas = document.createElement("canvas");
            canvas.width = video.videoWidth * 0.25;
            canvas.height = video.videoHeight * 0.25;
            canvas.getContext('2d')
                .drawImage(video, 0, 0, canvas.width, canvas.height);
            var src = "";
            try{src = canvas.toDataURL('image/png');}catch(e){console.log(e)}
            
            return src;
        },
      
      
      collect(){
        var me = this;

        clearTimeout(this.$timer );

        var $videos = $("video");



          $videos.each(function(){

            var $this = $(this);
            var vedio = $this.get(0);

            var fuckedId = $this.data("fuckedId");

            if(!fuckedId) {
             
              
              if(vedio.paused === false){
                 fuckedId = new Date().getTime();
 
              $this.data("fuckedId", fuckedId).attr("fuckfuckfuck", fuckedId);
                me.list.push({
                fuckedId: fuckedId,
                //src: me.capture(vedio)
              });
              }
              
            }






          });



       this.$timer =  setTimeout(()=>{


          this.collect();

        }, 5 * 1000); 

        
      },
      open(e, item, i){
        
       var videos =  document.getElementsByTagName("video");
        
        for(var i = 0; i<=videos.length -1; i++){
          
          if($(videos[i]).data("fuckedId") === item.fuckedId){
             try{videos[i].requestPictureInPicture();}catch(e){}
            break;
          }
          
        }
        
        
      
        
        
      },
      remove(e, item, i){},
      
      
      getStyle(item){
        
        var style = {};
        
        
        var src = this.capture($("video[fuckfuckfuck='"+item.fuckedId+"']").get(0))
        
        this.$nextTick(function(){
          
          item.src = src
          
        })
        
        if(src === ''){
          style.backgroundColor = "blue"
        }else{
          style.backgroundImage = `url(${src})`
        }
        
      
        return  style
        
      }
    },
    
    mounted(){
      
      this.$timer = 0;
        this.collect();
      
      $("body").on("scroll", function(){
        this.collect();
      })
      
    }
    
  })
    
  }
  
  
  setTimeout(function(){
    init()
  }, 1000)
  
 
  
  
 
  
  
})($.noConflict(true));