使用HTML5video标签播放本地(硬盘)video文件?
我想实现以下。
<video src="file:///Users/username/folder/video.webm"> </video>
目的是用户将能够从他/她的硬盘驱动器中select一个文件。
而不上传的原因当然是传输成本和存储配额。 没有理由保存文件。
可能吗?
可以播放本地video文件。
<input type="file" accept="video/*"/> <video controls autoplay></video>
当通过input
元素select文件时:
- “更改”事件被触发
- 从
input.files
FileList获取第一个File对象 - 制作一个指向File对象的对象URL
- 将对象URL设置为
video.src
属性 -
靠背,看:)
http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/
这只有在HTML文件也从本地用户的硬盘加载file
协议的情况下才有可能。
如果HTML页面由服务器通过HTTP提供服务,则无法通过使用file://
协议在src
属性中指定它们来访问任何本地文件,因为这意味着您可以在没有用户的情况下访问用户计算机上的任何文件知道这将是一个巨大的安全风险。
正如Dimitar Bonev所说,如果用户使用文件select器自己select文件,则可以访问文件。 如果没有这个步骤,所有浏览器都会被禁止。 因此,虽然他的回答对许多人来说可能是有用的,但它放松了原始问题中代码的要求。
前一阵子遇到这个问题。 由于安全设置(真的可以理解),网站无法访问本地PC上的video文件。唯一的办法是我可以解决这个问题,就是在本地PC上运行一个networking服务器(server2Go),所有对networking上的video文件的引用都是本地主机/ video.mp4
<div id="videoDiv"> <video id="video" src="http://127.0.0.1:4001/videos/<?php $videoFileName?>" width="70%" controls> </div> <!--End videoDiv-->
不是一个理想的解决scheme,但为我工作。