Html 播放带有 HTML5 视频标签的本地（硬盘）视频文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8885701/
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
Play local (hard-drive) video file with HTML5 video tag?
提问by Chris
I want to achieve the following.
我想实现以下目标。
<video src="file:///Users/username/folder/video.webm">
</video>
The intent is that the user will be able to select a file from his/her hard drive.
目的是用户将能够从他/她的硬盘驱动器中选择一个文件。
And the reason for not uploading is of course transmission costs and storage quota. There will be no reason to save the file.
而不上传的原因当然是传输成本和存储配额。没有理由保存文件。
Is it possible?
是否可以？
回答by Dimitar Bonev
It is possible to play a local video file.
可以播放本地视频文件。
<input type="file" accept="video/*"/>
<video controls autoplay></video>
When a file is selected via the inputelement:
当通过input元素选择文件时：
- 'change' event is fired
- Get the first Fileobject from the
input.filesFileList - Make an object URLthat points to the File object
- Set the object URL to the
video.srcproperty Lean back and watch :)
- 'change' 事件被触发
- 从FileList 中获取第一个File对象
input.files - 创建一个指向 File 对象的对象 URL
- 将对象 URL 设置为
video.src属性 向后倾斜并观看:)
http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/
http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/
(function localFileVideoPlayer() {
'use strict'
var URL = window.URL || window.webkitURL
var displayMessage = function(message, isError) {
var element = document.querySelector('#message')
element.innerHTML = message
element.className = isError ? 'error' : 'info'
}
var playSelectedFile = function(event) {
var file = this.files[0]
var type = file.type
var videoNode = document.querySelector('video')
var canPlay = videoNode.canPlayType(type)
if (canPlay === '') canPlay = 'no'
var message = 'Can play type "' + type + '": ' + canPlay
var isError = canPlay === 'no'
displayMessage(message, isError)
if (isError) {
return
}
var fileURL = URL.createObjectURL(file)
videoNode.src = fileURL
}
var inputNode = document.querySelector('input')
inputNode.addEventListener('change', playSelectedFile, false)
})()video,
input {
display: block;
}
input {
width: 100%;
}
.info {
background-color: aqua;
}
.error {
background-color: red;
color: white;
}<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*" />
<video controls autoplay></video>回答by Holger Just
That will be possible only if the HTML file is also loaded with the fileprotocol from the local user's harddisk.
只有当 HTML 文件也加载file了本地用户硬盘中的协议时，这才有可能。
If the HTML page is served by HTTP from a server, you can't access any local files by specifying them in a srcattribute 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 提供，则您无法通过src使用file://协议在属性中指定它们来访问任何本地文件，因为这意味着您可以访问用户计算机上的任何文件，而用户不知道哪个是巨大的安全风险。
As Dimitar Bonev said, you canaccess a file if the user selects it using a file selector on their own. Without that step, it's forbidden by all browsers for good reasons. Thus, while his answer might prove useful for many people, it loosens the requirement from the code in the original question.
正如 Dimitar Bonev 所说，如果用户自己使用文件选择器选择文件，您就可以访问它。没有这一步，所有浏览器都有充分的理由禁止它。因此，虽然他的回答可能对许多人有用，但它放松了原始问题中代码的要求。
回答by jcoshea
Ran in to this problem a while ago. Website couldn't access video file on local PC due to security settings (understandable really) ONLY way I could get around it was to run a webserver on the local PC (server2Go) and all references to the video file from the web were to the localhost/video.mp4
不久前遇到了这个问题。由于安全设置，网站无法访问本地 PC 上的视频文件（真的可以理解）我唯一能解决的方法是在本地 PC (server2Go) 上运行网络服务器，并且所有从网络上对视频文件的引用都指向本地主机/视频.mp4
<div id="videoDiv">
<video id="video" src="http://127.0.0.1:4001/videos/<?php $videoFileName?>" width="70%" controls>
</div>
<!--End videoDiv-->
Not an ideal solution but worked for me.
不是理想的解决方案，但对我有用。
