Question

我想在网页上打开本地mp4电影并在那里播放没有上传到任何地方，没有别的。
我使用自己的按钮，下面的解决方法适用于Safari 7.1.3就好了。

<label for="fileToOpen">
 <button type="file"  id="loadMedia" class="loadMediabutton button">Load Movie</button>
</label>
<input type="File" name="loadMedia" id="fileToOpen" style="display:none">

现在我的问题是，如果有人可以帮忙继续下去：

如何从<input>代码中检索影片的本地网址？
如何将网址传递给<video>代码src属性？
如何避免沙箱问题？

Answer 1

回答你的问题（为了清晰起见，我稍作改动）：

如何从文件输入中检索影片的本地网址？

例如，假设用户使用以下内容填充文件输入：
c:\Users\Username\My Documents\file.ext
在现代浏览器上（除了具有宽松安全设置的IE，其中仅用于受信任的专用Intranet）您可以不获取实际的本地路径 （c:\Users\Username\My Documents\）因为这会带来明显的隐私问题（安全问题）相反，你会得到C:\fakepath\。获取文件名和扩展名（file.ext）没问题请参阅我的detailed up-to-date answer about this here。
如何将文件的URL传递给视频的src属性？

为了解决没有有效URL（在这种情况下使用file:///协议）设置为视频的源属性（或图像，音频等）的问题，现代浏览器具有{ {3}}。

可以将此视为一个小型本地私有（其他人无法访问）mini-webserver（包括XMLHttpRequest的状态代码），用于提供任何类型的二进制或数据。
这些URL永远不会比浏览器的会话更长寿（因此将它们存储在本地存储等中是没用的）或者可以在首次使用时自动撤销（使用createFor）或手动使用（revokeObjectURL）。

在这种情况下，简单的URL.createObjectURL(/*file-reference*/)将为浏览器的URL Store中的实际本地文件路径创建匿名URL，然后您可以像使用任何其他服务内容一样使用该URL。

请参阅以下示例，只是以帮助您入门：
```
window.URL = window.URL || window.webkitURL;  //fallback for older prefixed objects

document.getElementById('loadMedia').onclick=function(){
  document.getElementById('fileToOpen').click();
};

document.getElementById('fileToOpen').onchange=function(){
  if(this.files && this.files[0]){
    var vid = document.getElementById('vid');
    document.getElementById('vid_name').innerHTML=this.files[0].name;
    // revoke previous url
    vid.getAttribute('src') && URL.revokeObjectURL(vid.getAttribute('src'));
        // set new url
    vid.setAttribute('src', URL.createObjectURL(this.files[0]));
    vid.load();
  }
};
```
```
<label for="fileToOpen">
  <button type="file"  id="loadMedia" class="loadMediabutton button">Load Movie</button>
</label>
<input type="File" name="loadMedia" id="fileToOpen" style="display:none">
<span id="vid_name"></span>
<br>
<video id="vid" controls="controls"></video>
```
^{注意，安装了flashblocker之后，没有视频元素，直到用户激活它，就像使用flash一样。在用户“运行”被阻止的视频之前，无法获取视频元素并随后设置它的来源。 -元件。解决这个问题超出了我的答案范围。}
如何避免沙盒问题？

据我所知，您在处理沙盒文件系统时遇到了什么问题（因为您没有将本地文件复制到本地沙盒文件系统进行存储）？ URL存储链接到的本地文件（或内存中的BLOB）是只读的！
用户手动“共享”文件（通过选择/填充网页/应用程序上的文件输入）。从那时起，应用程序可以读取/上传/分析/分析文件（但不能更改/删除/覆盖/等）。

HTML＆＃34;文件＆＃34; / OpenFile对话框解决方法

1 个答案: