本地通过HTML打开电脑上任意位置的文件

最新推荐文章于 2025-04-18 10:21:54 发布

shenpanzhimao

最新推荐文章于 2025-04-18 10:21:54 发布

阅读量2.3w

点赞数 5

文章标签： HTML

本文链接：https://blog.csdn.net/shenpanzhimao/article/details/79132119

版权

0x00 背景

电脑里面保存的视频太多，想要自己做一个网页界面来加载不同位置的视频。思路很简单，随便打开一个文本文件，

用最简单的网页框架来写，加一个HTML的src就可以了。但是似乎加载的视频一般来说在代码所在文件的子目录下，

问题是我不想把全部视频复制到代码所在文件目录下，于是问题就变成了如何通过HTML语法来回到上层目录甚至

改变盘符实现任意位置的访问。

环境：window10 , 猎豹浏览器V6.5

0x01 回到上层目录

下面来看一个简单的例子，比如我在D盘下下写了一个最简单的加载视频的HTML文件findVideo.html，路径为

D:\HTML\Video\findVideo.html

假设现在我的视频在HTML目录下，路径为D:\HTML\video.mp4这就需要返回上一层目录

HTML返回上册目录，只需要加上"..\"就可以了。src默认目录为D:\HTML\Video，

所以将src的值设为"..\video.mp4"就可以访问D:\HTML\video.mp4，视频也就可以播放了。

代码为

<html>
        <video controls src="..\video.mp4" width="720" height="480">
        </video>
    </html>

0x02 访问其他盘符的资源

现在可以回到上一目录了，但无论怎么向上一层返回，最后只能返回到当前盘符，而不能到其他盘符，这个怎么解决呢？

其实还有另一种表示的方法，那就是加上file:///的前缀，再加上相应的盘符和路径，经过测试的确可以访问。

假设我的视频文件现在在E盘，路径为E:\test\video.mp4通过返回上一层目录的方法行不通，但是改变src的路径表示方

式就可以了。

代码为

<html>
        <video controls src="file:///E:\test\video.mp4" width="720" height="480">
        </video>
    </html>

需要注意的是file:可以是斜杠也可以是反斜杠，反斜杠一般是文件系统的表示方式，斜杠一般是在网页URL的表现方式

一般浏览器都会自动进行处理

0x03 小结

这样，通过简单的语法就可以访问本地的任意文件了。

需要注意的是，这样只在本地环境下测试行得通。具体如果有一个申请了服务器，服务器的根目录为../WWW

我想如果有合适的安全策略，是不能通过以上两种方式来访问本地文件的（否则会造成信息泄露）

回到我之前的目的，接下来我就可以设计网页的界面，在网页上来个性定制我自己的本地视频播放器了。^_^