Jquery 动态添加视频文件_Jquery_Html

Jquery 动态添加视频文件

jquery html

Jquery 动态添加视频文件,jquery,html,Jquery,Html,我正在尝试动态添加一个视频文件以供播放 <html> <head> <title></title> <script src='./jquery/jquery-1.11.2.min.js'></script> </head> <body> <input type='file' accept='video/*' id='videofile' /

我正在尝试动态添加一个视频文件以供播放

<html>
    <head> <title></title>
        <script src='./jquery/jquery-1.11.2.min.js'></script>
    </head>
    <body>
        <input type='file' accept='video/*' id='videofile' />
        <video controls id='match'> 

        </video>

        <button id='fire'>Click me</button>

        <script type="text/javascript">
            $(document).ready(function() {
                $('#fire').click(function(event){
                    //alert($('#videofile')[0].files[0].name);
                    $('#match').append("<source src='" + $('#videofile')[0].files[0].name + "' type='video/mp4'>" );
                });
            });
        </script>
    </body>
</html>


点击我
$（文档）.ready（函数（）{
$（'#fire'）。单击（函数（事件）{
//警报（$（'#videofile'）[0]。文件[0]。名称）；
$（“#匹配”）。追加（“”）；
});
});

但我不确定正确的过程，因为我只有文件名，但没有完整的路径。我怎样才能做到这一点呢？

查看这篇文章：

试试这个：

HTML

<input type="file" accept='video/*' onchange="playVideo(this)" />
<video id="match" controls></video>

请参阅

我用Chrome上Wikimedia commons的视频样本进行了测试。下载这些文件并自己测试：

（20.6.MB）
（86.3 MB）

根据视频的大小，您可能会发现我在下面给出的答案很有帮助。我已经用大小高达13.3 Mb的视频测试了这种方法。：）@enhzflep我想不上传直接从硬盘播放是的，我意识到了这一点。试试我发布的解决方案——它不需要服务器，也不需要任何上传——它完全在客户端工作。

function playVideo(obj) {
  var myvideo = document.getElementById('match');
  var reader = new FileReader();
  reader.onload = (function(video) {
     return function(e) {
       video.src = e.target.result;
     };
  })(myvideo);
  reader.addEventListener('load', function() {
    myvideo.play()
  });
  reader.readAsDataURL(obj.files[0]);
}