9

我正在尝试使用带有本地 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>
4

5 回答 5

11

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。而已。

于 2013-09-07T08:57:38.410 回答
1

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

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中的整个视频目录。

于 2020-05-11T12:09:53.253 回答
0

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

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

虽然这可能会有所帮助：

播放带有 HTML5 视频标签的本地（硬盘驱动器）视频文件？

祝你好运。

于 2016-05-05T23:33:43.643 回答
0

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

Chrome 的网络服务器

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

于 2020-03-14T22:31:12.483 回答
-2

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

  1. 你在本地工作
  2. 我们不知道视频文件的位置

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

于 2013-09-07T07:14:20.533 回答