Question

我想实现以下目标。

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

意图是用户可以从他/她的硬盘中选择一个文件。

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

有可能吗？

Answer 1

可以播放本地视频文件。

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

通过input元素选择文件时：

'更改'事件被解雇
从input.files File

FileList

制作一个指向文件对象的object URL
将对象网址设置为video.src属性
向后倾斜并注意：）

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

Answer 2

只有当HTML文件也加载了本地用户硬盘的file协议时，才有可能。

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

正如Dimitar Bonev所说，如果用户使用自己的文件选择器选择文件，可以访问文件。没有这一步，所有浏览器都禁止它，原因很充分。因此，尽管他的回答可能对许多人有用，但它会放弃原始问题中代码的要求。

Answer 3

前一段时间遇到这个问题。由于安全设置，网站无法访问本地PC上的视频文件（真的可以理解）我唯一可以绕过它的方法是在本地PC（server2Go）上运行一个网络服务器，所有对网络视频文件的引用都是对localhost / video.mp4

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

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

Answer 4

我尽量简化Dimitar Bonev的回答。

<html>
<head>
<title>HTML5 local video file player example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>HTML5 local video file player example</h1>
<input type="file" accept="video/*"><br>
<video controls></video>
<script type="text/javascript">
 (function localFileVideoPlayer() {
   'use strict'
   var playSelectedFile = function(event) {
   var file = this.files[0]
   var URL = window.URL || window.webkitURL 
   var fileURL = URL.createObjectURL(file)
   var videoNode = document.querySelector('video')
   videoNode.src = fileURL
   }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
 })()
</script>
<p>I hereby signed confess solemnly that I have no idea what this code does. But thanks to God and Dimitar Bonev that it works. 
<p>Firefox Lubuntu 18.03
<p>Simplified: `http://jsfiddle.net/dsbonev/cCCZ2/` `https://stackoverflow.com/users/691308/dimitar-bonev`
</body>
</html>

使用HTML5视频标记播放本地（硬盘）视频文件？

4 个答案: