如何给vscode设置视频背景

1,425 阅读3分钟

一 前言

相信各位程序猿在日常的开发中早就受够了vscode自带的纯色背景。当然也有许多人早早就学会了修改背景图片这些,可以稍微满足一下大家想要欣赏自己的大老婆二老婆和诸位老婆的心情,而看到了动态壁纸的我萌生了一个大胆的想法。

现在基本上大家都是用过动态壁纸,但是作为壁纸,其实大部分时间我们并不会去盯着他看,因为我们要工作要打游戏,只是盯着壁纸看未免有些奇怪,所以,借此机会,本程序猿决定将动态壁纸移植到vscode上。成功实现工作娱乐两不误。

二 改造vscode

html文件

  • 文件位置

image.png

  • 修改文件 在下图标注的位置添加如下代码,widthheight属性可根据自身显示器手动调节。
<video id="video" src="./3.mp4" loop="loop" autoplay="autoplay" style="position: fixed;right: 0;bottom: 0;min-width: 100%;min-height: 100%;max-width: 1920px;z-index: -100"></video>

image.png

css文件

  • 文件位置

image.png

  • 修改文件 在css文件最底部添加如下代码,opacity属性可根据自身需求手动调节。
.monaco-workbench{opacity: 0.8 !important;}

image.png

实现视频声音播放

  • 原因 在完成了以上两个步骤之后,我们会发现视频已经成功的在我们的vscode上播放起来了,但是美中不足的是这个视频,它木有声音。于是经过本程序猿一顿查询之后,成功找到了解决的办法,原来是vscode自带的electron,缺少了一些文件。
  • 查看electron的版本 查看electron的版本 这个很简单,方法是打开vscode软件后,界面左上角的菜单栏上依次点击Help(帮助)About(关于),便会弹出下面的窗口

image.png

从上面这个图中便可以看到我的Electron的版本是17.2.0。

点击上面的链接进入到网页后,根据上一步查看到的版本号点击进入对应的下载界面,然后下载.zip文件。如我点击的下载链接是chromedriver-v17.2.0-win32-x64.zip。 下载后解压,可以发现里面会有一个ffmpeg.dll文件。

  • 替换ffmpeg.dll文件

找到自己vscode的安装目录,这个文件就在根目录下

image.png

然后把压缩包中的ffmpeg.dll文件替换到安装目录下即可。

三 结尾

最后我们就可以美吱吱的敲代码啦,不过还有一个美中不足就是,现在的视频链接只可以是我们本地的,如果使用了外链就会报错,这是因为vscode自己配置了内容安全策略,那么我们只需要小小的修改一下他的策略配置就可以了。在我们刚刚修改的那个html文件就可以看到他所配置的策略。删除掉红框内的配置我们就可以随意使用网上的视频啦。

image.png

最后再推荐一个动态壁纸软件吧,WallPaper你值得拥有。