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

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>

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

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

这已经可以使视频在 Safari 和 IE(对于 mp4)中运行。对于 Firefox 和 Chrome，您必须先将视频转换为 .webm(免费的 webm 视频转换器是一个免费且不错的转换器)

视频 ID 和类等仅在您使用外部 .js 视频播放器(插件)时才需要。要在 HTML5 中播放视频，您只需要视频标签和 src。就是这样。