一、简单分析

以宽屏模式为基础的话，看着实现起来还是很简单的：

找到视频节点的标签
- 将其宽度设置为 100% 页面宽度
同样的找到顶部导航栏
- 背景颜色设置为黑色
- 字体、图标设置为白色

二、开整

先在浏览器开发者工具里通过调试，试着实现一下效果
✨中心思路就是：先把视屏调整到浏览器宽度（剧场模式核心），其它的小细节再慢慢调整。

啊嘶，这个标签嵌套搞得很难受，某一层需要去掉padding，另一层需要修改对其方式，还有一层需要同步高度，布局方式跟想的不太一样，有点错综，节点顺序、样式可能需要互换调整，调整之后出现的各种意想不到的bug…

三、最终效果

点击标题后可切换剧场模式、普通模式

代码：

// ==UserScript==
// @name         Bilibili 剧场播放
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Bilibili剧场模式
// @author       pxoxq
// @match        https://www.bilibili.com/video/**
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @require      https://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js
// ==/UserScript==
const playerHeigh = 750
const widePlayerStyles = `
.bpx-player-ctrl-wide{
width:0px;}
#wide-box::-webkit-scrollbar{
display:none;
}
#wide-box{
scrollbar-width:0;
}
#wide-box #bilibili-player{width: 100vw !important;
}
#wide-box #playerWrap{order: -1;height: ${playerHeigh}px;
}
#wide-box #bilibili-player{
height:${playerHeigh}px;
}
#wide-box .left-container.scroll-sticky{display: flex;flex-direction: column;
}
#wide-box div.right-container.is-in-large-ab{margin-top: ${playerHeigh}px;
}
#wide-box #danmukuBox{margin-top: 0;}
#wide-box div.video-container-v1{padding: 0;justify-content: left;
}
#wide-box .left-container.scroll-sticky>div:not(#playerWrap){margin-left:100px;
}
#wide-box #biliMainHeader .bili-header__bar{background-color: #000;
}
#wide-box #biliMainHeader .bili-header__bar a.default-entry{
color:white;}
#wide-box #biliMainHeader .bili-header__bar li svg{color: white}
#wide-box .mini-header .right-entry .right-entry__outside .right-entry-text{color:white}
`
function injectStyle(styleStr, nodeId='pxo'){$('head').append(`<style id="${nodeId}">${styleStr}</style>`)
}
function getRightBoxMarginTop(){return $('#danmukuBox').css('margin-top')
}
function genWidePlayerStyle(){const rightMarginTop = getRightBoxMarginTop()return widePlayerStyles.replace('@rightBoxMarginTop', rightMarginTop)
}
function wideModeInit(){injectStyle(widePlayerStyles)$('#viewbox_report').click(wideModeToggle)
}function wideModeToggle(){$('.bpx-player-ctrl-wide').click()const mainBox = 'body'const boxId = $(mainBox).attr('id')let newId = ''if(!boxId){newId = 'wide-box'}$(mainBox).attr('id', newId)
}
function _init(){wideModeInit()
}
(function() {'use strict';_init()
})();

油猴脚本-Bilibili剧场模式仿Youtube相关推荐

杂谈技术·油猴脚本的功能实现
投稿地址: https://www.bilibili.com/read/cv15714192 原文简介核心原理核心原理其实超级简单,简单说就是通过DOM技术找到网页上面的关键点,然后将网页上的页面 ...
我的第一个油猴脚本--微博超话自动签到
简介用户脚本是一段代码,它们能够优化您的网页浏览体验.安装之后,有些脚本能为网站添加新的功能,有些能使网站的界面更加易用,有些则能隐藏网站上烦人的部分内容.其中常见的有油猴插件.ChromeExt ...
tampermonkey油猴插件|tampermonkey油猴脚本
让你的电脑浏览器使用起来更加强大吗?那么可以试试tampermonkey油猴插件,这是专门为市面上主流常见的chrome谷歌浏览器.firefox火狐.360浏览器.Microsoft Edge.Op ...
[原创方法!] 如何实现全自动登录各大网站? Cookie格式、油猴脚本基础解决Github邮箱验证,持久登录,免验证码
之前电脑内存小, 谷歌浏览器又是内存怪物, 每次浏览器不用的时候总是习惯关掉. 这就导致了每次进入常用的网站就要重新登陆, 非常烦; 对! 就是即使浏览器保存了密码, 大部分网站仍然要输入一下验证码 ...
油猴脚本Tampermonkey的简介和安装使用，五分钟安装
什么是油猴脚本 Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器,它支持以下浏览器,Chrome,Microsoft Edge,Safari,Opera Next,Firef ...
chrome拓展以及油猴脚本推荐
可以下载chrome拓展的网站 --> 拓展迷拓展推荐用途 Tampermonkey 几乎万能 Adblock Plus 免费的广告拦截器 Infinitypro 新标签页 JSON Vie ...
基于谷歌油猴脚本观看视频
一.下载.安装chrome浏览器下载地址:https://download.csdn.net/download/Abel_Huang_/15436666 下载完成一路确认下去就安装好了二.下载油猴 ...
[油猴脚本开发指南]脚本ajax的跨域请求
转载自油猴中文网:bbs.tampermonkey.net.cn 李恒道QQ4548212 油猴中文网bbs.tampermonkey.net.cn TamperMonkey GreaseMonkey ...
【油猴脚本】生成纯元素CSS选择器（附开发笔记）
脚本介绍用途常见的CSS选择器: #gatsby-focus-wrapper > div > div > div.Box-nv15kw-0.Flex-arghxi-0.layou ...

油猴脚本-Bilibili剧场模式仿Youtube

文章目录

一、简单分析

二、开整

三、最终效果

油猴脚本-Bilibili剧场模式仿Youtube相关推荐

最新文章

热门文章