啥?VS Code还能当视频播放器?三步让VS Code播放视频

1、安装如下插件

Preview on Web Server
啥?VS Code还能当视频播放器?三步让VS Code播放视频_第1张图片
如果不喜欢的话可以下载其它同类插件,要求具有html预览功能。

2、写一个html文件

啥?VS Code还能当视频播放器?三步让VS Code播放视频_第2张图片
短短十几行,大部分都是自动生成。
主要是那个video标签。
啥?VS Code还能当视频播放器?三步让VS Code播放视频_第3张图片
再加点样式。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
      
            background-color: #333;
            color: #fff;
            list-style: none;
            margin: 0;
            padding: 0;
            cursor: default;
            overflow: hidden;
        }

        video {
      
            width: 100%;
            height: 100%;
        }
    style>
head>

<body>
    <video id="video" type="video/mp4" controls="controls" preload="true" src="./视频.mp4" type="video/mp4">
    video>
body>

html>

3、播放

啥?VS Code还能当视频播放器?三步让VS Code播放视频_第4张图片
啥?VS Code还能当视频播放器?三步让VS Code播放视频_第5张图片
有一个问题,那就是在VS Code里保存任何文件这个预览窗口都会刷新,这样刚看了一半的视频又回到一开始,可以把插件设置成这样。
设置页面搜索@ext:yuichinukiyama.vscode-preview-server,将Preview Server:Sync取消掉。这样保存时预览不刷新了,然后把正在编写的项目用另外一个插件预览然后将那个插件设置为自动刷新。
啥?VS Code还能当视频播放器?三步让VS Code播放视频_第6张图片

你可能感兴趣的:(vscode,html)