jQuery 如何使用带有本地文件的 HTML5 嵌入视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18670728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Embed Video using HTML5 with local file
提问by Murda Ralph
I'm trying to embed a video using html5 with a local mp4 file.
我正在尝试使用带有本地 mp4 文件的 html5 嵌入视频。
file on my local machine.
文件在我的本地机器上。
when i debug i keep getting invalid file path or unsupported video type.
当我调试时，我不断收到无效的文件路径或不受支持的视频类型。
What am i missing? I can get this to work if i plug in a http link to a mp4. But when i plug in a local file it doesn't
我错过了什么？如果我将 http 链接插入到 mp4，我可以让它工作。但是当我插入本地文件时它没有
<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>
回答by Hobby99
HTML5 works just by having the video tags. Make sure to include the video source directly in the video tag like:
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>
Concerning the video src-path. The video must be somewhere inside your application directory in order to play. So when your application is called video_homepage then put a folder in it with videos. In this example case the source is:
关于视频 src-path。视频必须位于应用程序目录中的某个位置才能播放。因此，当您的应用程序被称为 video_homepage 时，请在其中放置一个包含视频的文件夹。在这个例子中，源是：
<video src= video_homepage/videos/demo1.mp4></video>
That already should make the video run in Safari and IE (for mp4). For Firefox and Chrome you must convert the video first to .webm (free webm video converter is a free and good converter)
这已经应该使视频在 Safari 和 IE 中运行（对于 mp4）。对于 Firefox 和 Chrome，您必须先将视频转换为 .webm（免费的 webm 视频转换器是一个免费且良好的转换器）
video id and class etc. is only needed when you use an external .js video player (plug in). for playing videos in HTML5 you only need the video tags and src. thats it.
仅当您使用外部 .js 视频播放器（插件）时才需要视频 ID 和类等。要在 HTML5 中播放视频，您只需要视频标签和 src。就是这样。
回答by Doggo
We can't debug your page because
我们无法调试您的页面，因为
- You are working locally
- We don't know where the video file is located at
- 你在本地工作
- 我们不知道视频文件在哪里
My advice would be: drop your video file to browser, copy the address from location bar and paste it to src attribute of your source tag.
我的建议是：将您的视频文件拖放到浏览器，从位置栏中复制地址并将其粘贴到源标签的 src 属性中。
回答by Aashish Negi
Simple answer: Not allowed to load local resource.
简单回答：不允许加载本地资源。
If the HTML page is served by HTTP from a server, you can't access any local files by specifying them in a src attribute with the file:// protocol as that would mean you could access any file on the users computer without the user knowing which would be a huge security risk.
如果 HTML 页面由来自服务器的 HTTP 提供服务，则无法通过使用 file:// 协议在 src 属性中指定它们来访问任何本地文件，因为这意味着您可以在没有用户的情况下访问用户计算机上的任何文件知道这将是一个巨大的安全风险。
though this might help:
虽然这可能会有所帮助：
Play local (hard-drive) video file with HTML5 video tag?
Good luck.
祝你好运。
回答by Benoit Tassin
If you have Chrome installed, another option is to use:
如果您安装了 Chrome，另一种选择是使用：
It allows you to serve the content of a local folder on a private server accessible through local network. Just use the app to point to a folder on your pc and voilà...it's content is available by using url (by default: http://127.0.0.1:8887/[filepath]).
它允许您在可通过本地网络访问的私人服务器上提供本地文件夹的内容。只需使用该应用程序指向您电脑上的一个文件夹，瞧……它的内容可通过使用 url 获得（默认情况下：http: //127.0.0.1: 8887/[filepath]）。
回答by Benison Besra
Seeing you source address <source src="file:///C:/Users/rpimentel/Desktop/converts/demo1.mp4" type='video/mp4' />I get that you are using windows system.
I had the same issue but in Linux specifically in Ubuntu, I fixed it by creating a Symlinksin the webpage_home_directory like
看到你的源地址，<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
Then changed the source address accordingly.
然后相应地更改了源地址。
<div class="container">
<video src="./vid/vid1001.mkv" width="600" height="350" controls></video>
</div>
And the video played normally. This saved me space or else I would be copying the whole video directory in the webpage_home_dir un-necessarily.
并且视频播放正常。这为我节省了空间，否则我将不必要地复制 webpage_home_dir 中的整个视频目录。
