chr*_*ris 80 video html5 offline html5-video
我想实现以下目标.
<video src="file:///Users/username/folder/video.webm">
</video>
目的是用户将能够从他/她的硬盘驱动器中选择文件.
不上传的原因当然是传输成本和存储配额.没有理由保存文件.
可能吗？
Dim*_*nev 222
可以播放本地视频文件.
<input type="file" accept="video/*"/>
<video controls autoplay></video>
通过input元素选择文件时:
http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/
只有当HTML文件也加载file了本地用户的硬盘协议时,才有可能实现这一点.
如果HTML页面是由服务器的HTTP提供的,则您无法通过在src具有file://协议的属性中指定它们来访问任何本地文件,因为这意味着您可以访问用户计算机上的任何文件而用户不知道哪个文件是巨大的安全风险.
正如Dimitar Bonev所说,如果用户使用自己的文件选择器选择文件,则可以访问该文件.没有这一步,所有浏览器都禁止它,原因很充分.因此,尽管他的回答可能对许多人有用,但它会放松原始问题中代码的要求.
不久前就遇到了这个问题.由于安全设置,网站无法访问本地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-->
不是一个理想的解决方案,但为我工作.
我试图尽可能简化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 it now works.
<p>Firefox Lubuntu 18.03
<p>Simplified: `http://jsfiddle.net/dsbonev/cCCZ2/` `/sf/users/48391591/`
</body>
</html>
| 归档时间： |
|
| 查看次数： |
115250 次 |
| 最近记录： |