Greasy Fork

Greasy Fork is available in English.

YouTuBeChangeScreen

改变YouTuBe视频为竖屏播放

当前为 2019-07-15 提交的版本，查看 最新版本。

// ==UserScript==
// @name         YouTuBeChangeScreen
// @namespace    http://roastwind.com/
// @version      0.1
// @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 changeVideo = function() {
    // header
    var container = document.querySelector('.style-scope ytd-masthead')
    var topHeight = container.offsetHeight
    // video container
    var player = document.querySelector('#player-container')
    var video = player.querySelector('video')
    // video.addEventListener('play', function () {
       // console.log('play')
    // })
    var videoBaseHeight = video.offsetHeight
    var videoBaseWidth = video.offsetWidth
    // 减去顶部的高度
    videoBaseWidth = videoBaseWidth - topHeight
    // 减去工具栏的高度(没有标签页)
    videoBaseWidth = videoBaseWidth - 70
    var screenHeight = document.documentElement.clientHeight
    if (videoBaseWidth > screenHeight - topHeight) {
        videoBaseWidth = screenHeight - topHeight
    }
    // video.style.width = videoBaseHeight + 'px'
    video.style.height = videoBaseWidth + 'px'
    video.style.marginTop = topHeight + 'px'
    video.style.transform = 'rotate(90deg)'
    player.style.height = videoBaseWidth + 'px'
    console.log('player: ', player, videoBaseWidth)
}

var initButton = function() {
    var container = document.querySelector('#info-contents')
    var h1 = container.querySelector('h1')
    var title = h1.querySelector('yt-formatted-string')
    // h1.style.position = 'relative'
    console.log(container)
    var button = document.createElement('button')
    button.innerText = '切换竖屏'
    button.addEventListener('click', function() {
        changeVideo()
    })
    title.after(button)
    // button.style.position = 'absolute'
    button.style.marginLeft = '30px'
    // button.style.marginTop = '-60px'
}

var init = function() {
    initButton()
}