2020/10/10 下午3:21:48
目前為
// ==UserScript==
// @name 所有网站启用画中画 OPEN PIP IN ALL SITE
// @namespace Violentmonkey Scripts
// @match <all_urls>
// @grant none
// @version 1.1
// @author lincong1987
// @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))
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址