mvc网站开发 案例视频参考消息今天新闻

---

前言

新手上路,欢迎指导

需求分析

想要一个简约干净的界面,需要去除推荐栏和广告部分.
想要自由调节视频播放速率,需要在视频控制栏加一个输入框控制视频倍速

实施

观察页面起始渲染

因为要使用MutationObserver监控元素,所以需要确认页面开始渲染了哪些东西

• 打个断点:
  
• 刷新:

经观察(需要动手看结果)发现,页面基本框架已经渲染完成了,侧边的推荐和广告,顶部左侧的导航栏都有了.
缺少中间的搜索框,视频控件,底部评论

这里怎么清理全靠喜好:
左上导航栏不喜欢,留一个首页,
右侧广告和推荐都不喜欢,去除不要

编码

清理的基本思路就是找到不要的元素的类名或id,创建个样式直接display: none !important,有要保留的就父元素display: none再把个别要保留的部分换回原来的显示属性,不行就不要的一一display: none !important
插入搜索框拿到值改下video的playbackRate即可

1. 准备一个插入css的函数.

function addNewStyle(newStyle) {let styleElement = document.getElementById('mystyles');if (!styleElement) {styleElement = document.createElement('style');styleElement.type = 'text/css';styleElement.id = 'mystyles';document.getElementsByTagName('head')[0].appendChild(styleElement);}styleElement.appendChild(document.createTextNode(newStyle));
}

2. 预定义全局样式

const cssVars = {hide_force: 'display: none !important',hide: 'display: none',show_as_item: 'display: list-item'
};

3. 在window加载时加入逻辑监听body插入元素时去掉左上导航除图标首页以外的部分,就完成了.
   不太放心又加了个定时器来去除之前遇到的其他广告.
   评论区是一个单独的组件,封装在shadow DOM里,所以直接用定时器解决了.

//二次初始化页面
const observerInto = new MutationObserver(function () {const cssConfig = {hiddenList: {selectors: ['.ad-report', '.recommend-list-v1', '.slide-ad-exp'],props: cssVars.hide_force},headerCleanup: {selectors: ['#biliMainHeader .left-entry li'],props: cssVars.hide},headerRetain: {selectors: ['#biliMainHeader .left-entry li:first-child'],props: cssVars.show_as_item,}};addNewStyle(compileCSS(cssConfig))observerInto.disconnect()
})
observerInto.observe(document.body, {childList: true, subtree: true})
//去除其他广告
setTimeout(function () {const cssConfig = {hiddenAds: {selectors: ['.vcd', '.video-card-ad-small', '.activity-m-v1', '.act-end'],props: cssVars.hide_force}};addNewStyle(compileCSS(cssConfig));}, 2000);
//去除评论区notice公告
setTimeout(function () {const shadowHost = document.querySelector('bili-comments').shadowRoot.querySelector('bili-comments-header-renderer');// 获取 Shadow Rootconst shadowRoot = shadowHost.shadowRoot;// 如果 Shadow DOM 是开放的（open），可以直接访问if (shadowRoot) {// 在 Shadow DOM 中查找元素const noticeElement = shadowRoot.querySelector('#notice');console.log(noticeElement)if (noticeElement) {noticeElement.setAttribute('style', 'display: none !important');}} else {console.log('Shadow DOM 是封闭的（closed），无法访问');}
}, 6000);

4. 监听搜索框值的变化,改成喜欢的值(需要注意,点击搜索还是搜索原来的内容)

const observerSearchBar = new MutationObserver(function () {const input = document.querySelector('#nav-searchform input')if (input && input.placeholder && input.placeholder !== '好好学习,天天向上') {input.placeholder = '好好学习,天天向上'input.title = '好好学习,天天向上'}
})
const centerSearchContainer = document.querySelector('#biliMainHeader');
observerSearchBar.observe(centerSearchContainer, {subtree: true,attributes: true,attributeFilter: ['placeholder']
})

5. 监听视频控件渲染,插入自定义输入框

const playerContralBottom = document.querySelector(".bpx-player-control-bottom-right");
const observerContralBottom = new MutationObserver(function () {if (playerContralBottom.children.length >= 2) {const input = document.createElement('input');Object.assign(input, {type: 'text',maxLength: 4,placeholder: '✍️ 播放倍率',style: `
width: 72px;
height: 24px;
padding: 2px 0 2px 4px;
font-size: 12px;
font-weight: bold;
background: linear-gradient(45deg, #f3ec78, #af4261);
border: 1px solid #fff;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(175,66,97,0.3);
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
`});input.addEventListener('focus', () => {input.style.transform = 'scale(1.05)';input.style.boxShadow = '0 8px 25px rgba(175,66,97,0.4)';input.style.borderColor = '#ffd700';});input.addEventListener('blur', () => {input.style.transform = 'scale(1)';input.style.boxShadow = '0 4px 15px rgba(175,66,97,0.3)';input.style.borderColor = '#fff';});
//终止监听,避免插入监听死循环observerContralBottom.disconnect()playerContralBottom.insertBefore(input, playerContralBottom.children[1]);input.addEventListener('input', function () {// 输入警告效果if (this.value.length === 4) {this.style.background = 'linear-gradient(45deg, #af4261, #f3ec78)';setTimeout(() => {this.style.transform = 'translateX(5px)';setTimeout(() => {this.style.transform = 'translateX(-5px)'}, 50);}, 0);} else {this.style.transform = 'scale(1.05)';this.style.background = 'linear-gradient(45deg, #f3ec78, #af4261)';}});//核心逻辑在这里input.addEventListener('keydown', function (event) {if (event.key === 'Enter') {//console.log('你按下了回车键，当前输入的值是:', this.value);const regex = /\d+(\.\d+)?/if (!regex.test(this.value)) {alert("输入值非法");this.value = ''return;}const video = document.querySelector("video");let rate = parseFloat(this.value).toFixed(2);rate = rate < 0.1 ? (() => {alert("不能低于0.1倍速!已调整为0.1")return 0.1})() : rate > 16 ? (() => {alert("不能高于16倍速!已调整为16")return 16})() : ratevideo.playbackRate = ratethis.value = ''}});}
})
observerContralBottom.observe(playerContralBottom, {childList: true, subtree: true})

效果展示

总结

主要就用到MutationObserver和定时器,以及video.playbackRate

输入框那一大段基本是deepseek生成的,加了些样式和动画.

{childList: true, subtree: true,attributes: true, attributeFilter: ['placeholder']}
用到了四个选项

• 监听自身或子节点插入
• 监听整个子树
• 监听属性变化
• 要监听的属性值(默认不加全监听)