如何使用带有本地文件的 HTML5 嵌入视频

Posted 2023-03-13

技术标签:

【中文标题】如何使用带有本地文件的 HTML5 嵌入视频【英文标题】：How to Embed Video using HTML5 with local file 【发布时间】：2013-09-11 07:38:41 【问题描述】：

我正在尝试使用带有本地 mp4 文件的 html5 嵌入视频。

我本地机器上的文件。

当我调试时，我不断收到无效的文件路径或不支持的视频类型。

我错过了什么？如果我插入一个指向 mp4 的 http 链接，我可以让它工作。但是当我插入本地文件时它不会

    <link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet" />
    <script src="http://vjs.zencdn.net/4.1/video.js">
        videojs("example_video_1", , function()
        );
    </script>
    <video id="example_video_1" class="video-js vjs-default-skin"  >
        <source src="file:///C:/Users/rpimentel/Desktop/converts/demo1.mp4" type='video/mp4' />
    </video>

【问题讨论】：

文档：developer.mozilla.org/en/docs/Web/HTML/Element/video 【参考方案1】：

HTML5 仅通过具有视频标签即可工作。确保将视频源直接包含在视频标签中，例如：

<video id="example_video_1" class="video-js vjs-default-skin"   src="file:///C:/Users/rpimentel/Desktop/converts/demo1.mp4" type='video/mp4' />
</video>

关于视频源路径。视频必须位于应用程序目录中的某个位置才能播放。因此，当您的应用程序被称为 video_homepage 时，请在其中放置一个包含视频的文件夹。在本例中，来源是：

<video src= video_homepage/videos/demo1.mp4></video>

这应该可以让视频在 Safari 和 IE（用于 mp4）中运行。对于 Firefox 和 Chrome，您必须先将视频转换为 .webm（免费的 webm 视频转换器是一款免费且不错的转换器）

只有在使用外部 .js 视频播放器（插件）时才需要视频 id 和类等。要在 HTML5 中播放视频，您只需要视频标签和 src。而已。

【讨论】：

这适用于您建议的小模组。这是播放它的最终结果<video src="../Video/demo1.mp4" controls autoplay /> file:/// 和单个正斜杠是我所需要的。谢谢！【参考方案2】：

看到你的源地址<source src="file:///C:/Users/rpimentel/Desktop/converts/demo1.mp4" type='video/mp4' />我知道你使用的是windows系统。我遇到了同样的问题，但在 Linux 中，特别是在 Ubuntu 中，我通过在 webpage_home_directory 中创建 Symlinks 来修复它

user1@ubuntu-pc:/opt/lampp/htdocs/video$ sudo ln -s /home/user1/Downloads/video /opt/lampp/htdocs/video/vid

然后相应地更改了源地址。

<div class="container">
    <video src="./vid/vid1001.mkv"   controls></video>
</div>

视频播放正常。这节省了我的空间，否则我将不必要地复制webpage_home_dir中的整个视频目录。

【讨论】：

这个问题有点奇怪，因为在 Windows 下，解决方案是在 src 中使用 file:///，在 Linux 下，除了使用符号链接之外别无他法。我想知道在这种情况下，Linux 下是否会忽略“file:///”前导码，这可能明显违反了 Linux 和 Windows 中 HTML 代码的一般行为。他们应该以同样的方式行事，不是吗？【参考方案3】：

简单回答：不允许加载本地资源。

如果 HTML 页面由服务器的 HTTP 提供服务，则您无法通过使用 file:// 协议在 src 属性中指定它们来访问任何本地文件，因为这意味着您可以访问用户计算机上的任何文件用户不知道这会带来巨大的安全风险。

虽然这可能会有所帮助：

Play local (hard-drive) video file with HTML5 video tag?

祝你好运。

【讨论】：

【参考方案4】：

如果您安装了 Chrome，另一种选择是使用：

Web Server for Chrome

它允许您在可通过本地网络访问的专用服务器上提供本地文件夹的内容。只需使用该应用程序指向您电脑上的一个文件夹，瞧……它的内容可通过使用 url 获得（默认情况下：http://127.0.0.1:8887/[filepath]）。

【讨论】：

【参考方案5】：