播放带有HTML5视频标签的本地(硬盘)视频文件吗?


89

我要实现以下目标。

<video src="file:///Users/username/folder/video.webm">
</video>

目的是使用户能够从他/她的硬盘驱动器中选择文件。

不上传的原因当然是传输成本和存储配额。没有理由保存文件。

可能吗?


它绝对不适用于文件输入。它可能与HTML5 ondrop一起使用,但是我认为您不能利用它来上传文件。最好的选择是做一个Chrome扩展程序。
布赖恩·尼克

Answers:


241

可以播放本地视频文件。

<input type="file" accept="video/*"/>
<video controls autoplay></video>

通过input元素选择文件时:

  1. “更改”事件被触发
  2. FileList获取第一个File对象input.files
  3. 制作一个指向File对象的对象URL
  4. 将对象URL设置为video.src属性
  5. 靠后看:)

http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/


这适用于我在Mac上的Chrome浏览器中。不适用于野生动物园6.1
Patrick Cullen


出色的解决方案,它也适用于Windows版Chrome。
JT泰勒

有没有人做过适当的工作以调入和调出适当的视频块,以免浪费大量视频的浏览器内存?
埃里克·布洛赫

无法预览的.mov或.avi文件在这里提出这样的问题:stackoverflow.com/questions/32599806/...
mpsbhat

11

仅当HTML文件还file从本地用户的硬盘加载了协议时,这才有可能。

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

正如Dimitar Bonev所说,如果用户自己使用文件选择器选择文件,则可以访问文件。如果没有该步骤,出于所有原因,所有浏览器都将禁止使用它。因此,尽管他的答案可能对许多人都有用,但它使原始问题中的代码要求变得宽松。


Dimitrov Bonev的解决方案表明此解决方案不正确-您可以通过输入type = file访问本地文件。
JT泰勒

1
好吧,仅当您让用户首先选择文件时,他的解决方案才有效。您仍然无法在HTML源代码中命名文件的路径(如问题所述)并以这种方式访问​​它。因此,他的解决方案在技术上是另一个问题。
Holger Just 2014年

vlc Player也可以播放计算机上的任何文件,但是也存在安全风险。它可以将文件从我们的硬盘下载到他们的服务器,而无需我们通知他们是否愿意,不是吗?那么为什么没有安全隐患呢?在最坏的情况下,如果允许用户使用浏览器播放文件,则可以允许他们手动接受。因为在某些情况下用户是100%信任页面,因为用户是与Web创建者在同一公司工作的用户。
Darius.V,2015年

6

前一段时间遇到了这个问题。由于安全性设置(实际上是可以理解的),网站无法访问本地PC上的视频文件,唯一可以解决的方法是在本地PC(server2Go)上运行网络服务器,并且所有对网络上视频文件的引用都指向本地主机/video.mp4

<div id="videoDiv">
     <video id="video" src="http://127.0.0.1:4001/videos/<?php $videoFileName?>" width="70%" controls>
    </div>
<!--End videoDiv-->

不是理想的解决方案,但对我有用。


2
如果将文件复制到缓存位置并设置视频源的路径,它将播放。将文件复制到context.getExternalCacheDir()。getAbsolutePath()。为我工作。
德里克·韦德

也可以使用用户计算机中的任何Web服务器,如apache或
mongoose
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.