Question

我正在尝试使用带有本地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" width="640" height="264">
        <source src="file:///C:/Users/rpimentel/Desktop/converts/demo1.mp4" type='video/mp4' />
    </video>

Answer 1

HTML5只能使用视频标签。请务必将视频源直接包含在视频标记中，例如：

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

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

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

已经应该让视频在Safari和IE中运行（对于mp4）。对于Firefox和Chrome，您必须先将视频转换为.webm（免费的webm视频转换器是一个免费的好转换器）

仅当您使用外部.js视频播放器（插件）时才需要

视频ID和类等。要在HTML5中播放视频，您只需要视频标签和src。而已。

Answer 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" width="600" height="350" controls></video>
</div>

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

Answer 3

我们无法调试您的网页，因为

您在本地工作
我们不知道视频文件的位置

我的建议是：将您的视频文件丢弃到浏览器，从位置栏复制地址并将其粘贴到源标记的src属性。

Answer 4

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

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

虽然这可能会有所帮助：

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

祝你好运。

Answer 5

如果您安装了Chrome，则可以使用以下另一种方法：

Web Server for Chrome

它允许您在可通过本地网络访问的专用服务器上提供本地文件夹的内容。只需使用该应用程序指向您PC上的文件夹即可，...使用url（默认为http://127.0.0.1:8887/[filepath]）可以访问其内容。

如何使用HTML5将视频嵌入本地文件

5 个答案: