Question

我正在创建一个只需要本地运行的html网页（离线网站）。使用“输入文件标签”，用户选择并给出需要播放的视频文件路径。对于视频播放器，我使用的是html的视频标签。

我尝试使用以下代码执行此操作但视频未播放。请帮帮我。

注意：这是OFFLINE网站。

CODE：

<html>
<head>
<script>
        function func() {
            var videolink = document.getElementById('fileID');
            var player = document.getElementById('videoID');
            var mp4Vid = document.getElementById('sourceID');
            $(mp4Vid).attr('src',videolink);
            player.load();
            player.play(); 
        }
    </script>
</head>
<body>

<input type="file" id="fileID" />
<input type="button" onClick="func();"/>

<center>
<video id="videoID" width="320" height="240" controls autoplay>
  <source id="sourceID"  type="video/mp4">
</video>
</center>

</body>
</html>

Answer 1

尝试改变这个：

$(mp4Vid).attr('src',videolink);

：

$(mp4Vid).attr('src', '' + videolink).appendTo($('#sourceID'));

Answer 2

除现代浏览器外，您无法单独使用JavaScript。

问题

这是一种Web浏览器安全功能，可以阻止文件上传的完整路径。如果您尝试读取文件上载字段的值，您将收到以下内容：

$('input[type="file"]').val(); // "C:\fakepath\some_file.mp4"

即使在此假设中，我的桌面上存在该文件（例如~/Desktop/some_file.mp4）。

解决方法

在现代浏览器上，请参阅"In HTML5 how to show preview of image before upload?"，了解在文件输入上使用FileReader并使用其来源。否则，您可以使用已安装的Adobe Flash执行此操作。

无法在html上播放使用输入文件标签选择的视频（本地）

2 个答案:

问题

解决方法