Question

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

<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>

但我不确定正确的程序，因为我只有文件名而不是完整的路径。我怎么能做到这一点？

Answer 1

查看此文章：Reading files in JavaScript using the File APIs。

试试这个：

<强> HTML

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

<强> JS

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]);
}

查看 Example 。

我使用Chrome中维基媒体公共广告的示例视频对其进行了测试。下载这些文件并自行测试：

Video 1（20.6.MB）
Video 2（86.3 MB）

动态添加视频文件

1 个答案: