Greasy Fork is available in English.
改变YouTuBe视频为竖屏播放
// ==UserScript==
// @name YouTuBeChangeScreen
// @namespace http://roastwind.com/
// @version 0.1.6
// @description 改变YouTuBe视频为竖屏播放
// @include http://www.youtube.com/*
// @include https://www.youtube.com/*
// @require https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
// @exclude http://www.youtube.com/embed/*
// @exclude https://www.youtube.com/embed/*
// @match http://www.youtube.com/*
// @match https://www.youtube.com/*
// @match http://localhost:8083/*
// @match http://s.ytimg.com/yts/jsbin/html5player*
// @match https://s.ytimg.com/yts/jsbin/html5player*
// @match http://manifest.googlevideo.com/*
// @match https://manifest.googlevideo.com/*
// @match http://*.googlevideo.com/videoplayback*
// @match https://*.googlevideo.com/videoplayback*
// @match http://*.youtube.com/videoplayback*
// @match https://*.youtube.com/videoplayback*
// @copyright 2018+, Find
// @author RoastWind
// @icon http://icons.iconarchive.com/icons/dtafalonso/android-l/256/Youtube-icon.png
// ==/UserScript==
document.onreadystatechange = function () {
// console.log(document.readyState)
switch(document.readyState){
// ready
case 'interactive':
// init()
break;
// load
case 'complete':
break;
}
}
var ready = function(callback) {
var href = window.location.href
var isYoutubePlay = /^https?:\/\/www\.youtube.com\/watch\?/.test(href)
if (!isYoutubePlay) return
var timer = setInterval(function() {
var player = document.querySelector('#player-container')
var container = document.querySelector('.ytd-video-primary-info-renderer')
if (player && container) {
clearInterval(timer)
callback && callback()
}
}, 100)
}
ready(function() {
init()
})
var getVideoVerticalHeight = function() {
var innerHeight = document.documentElement.clientHeight;
var headerHeight = document.querySelector('#masthead-container').clientHeight || 0;
var vedieoPaddingTop = 24;
var verticalHeight = innerHeight - headerHeight - vedieoPaddingTop;
return verticalHeight;
}
var updateVideoInfoStatus = function(opacity) {
var domIds = ['title yt-formatted-string', 'top-row', 'bottom-row']
domIds.forEach(function(domId) {
var dom = document.querySelector('#' + domId)
dom.style.opacity = opacity
})
}
var updateButtonPosition = function(isVertical) {
var videoTitle = document.querySelector('#title yt-formatted-string')
var titleWidth = videoTitle.offsetWidth
var button = getButton()
button.style.marginLeft = isVertical ? '0' : `${buttonMarginLeft}px`
button.style.position = isVertical ? 'absolute' : 'initial'
if (isVertical) {
button.style.left = `-${videoMarginLeft}px`
button.style.zIndex = 3000
} else {
delete button.style.left
delete button.style.zIndex
}
}
var getButton = function() {
return document.querySelector('#'+btnId)
}
var changeVideo = function() {
// header
var container = document.querySelector('#masthead-container').offsetHeight
// var container = document.querySelector('.style-scope ytd-masthead')
var topHeight = container.offsetHeight
// video container
var playerContainer = document.querySelector('#player-container')
var player = document.querySelector('#ytd-player')
var video = player.querySelector('video')
var changeScreenBtn = getButton()
// video.addEventListener('play', function () {
// console.log('play')
// })
// var newTop = (videoBaseWidth - videoBaseHeight) / 2
// 减去顶部的高度
// videoBaseWidth = videoBaseWidth - topHeight
// 减去工具栏的高度(没有标签页)
// videoBaseWidth = videoBaseWidth - 70
// var screenHeight = document.documentElement.clientHeight
// if (videoBaseWidth > screenHeight - topHeight) {
// videoBaseWidth = screenHeight - topHeight
// }
isVertical = !isVertical
updateVideoInfoStatus(isVertical ? 0 : 1)
updateButtonPosition(isVertical)
if (isVertical) {
var videoBaseHeight = video.offsetHeight
var videoBaseWidth = video.offsetWidth
var verticalHeight = getVideoVerticalHeight()
globalVideoBaseHeight = videoBaseHeight
globalVideoBaseWidth = videoBaseWidth
video.style.width = videoBaseWidth + 'px'
video.style.height = verticalHeight + 'px'
video.style.top = '0px'
video.style.transform = 'rotate(90deg)'
player.style.height = verticalHeight + 'px'
playerContainer.style.height = verticalHeight + 'px'
playerContainer.style.maxHeight = 'none'
changeScreenBtn.innerText = baseBtnResetText
}
else {
video.style.width = globalVideoBaseWidth + 'px'
video.style.height = globalVideoBaseHeight + 'px'
video.style.transform = 'rotate(0deg)'
player.style.height = globalVideoBaseHeight + 'px'
playerContainer.style.height = globalVideoBaseHeight + 'px'
playerContainer.style.maxHeight = 'max-height: calc(100vh - 169px);'
changeScreenBtn.innerText = baseBtnText
}
}
var isInitReady = false // 需要等待youtube加载完毕
var waitTime = 2e3
var isVertical = false
var globalVideoBaseHeight = 400 // 视频原本高度
var globalVideoBaseWidth = 400 // 视频原本宽度
var buttonMarginLeft = 24
var videoMarginLeft = 24
var btnId = 'you-tu-be-change-screen'
var baseBtnText = '切换竖屏'
var baseBtnResetText = '切换横屏'
var initButton = function() {
var container = document.querySelector('ytd-watch-metadata')
var h1 = container.querySelector('h1')
var title = h1.querySelector('yt-formatted-string')
// h1.style.position = 'relative'
var button = document.createElement('button')
button.innerText = baseBtnText
button.style.color = 'gray'
button.addEventListener('click', function() {
if (isInitReady) {
changeVideo()
}
else {
alert('please wait for the video ready')
}
})
title.after(button)
// button.style.position = 'absolute'
button.style.marginLeft = buttonMarginLeft + 'px'
button.setAttribute('id', btnId)
// button.style.marginTop = '-60px'
setTimeout(() => {
isInitReady = true
button.style.color = 'black'
}, waitTime)
}
var init = function() {
initButton()
}