JWplayer：在使用JWplayer上传之前，如何预览视频文件？

Question

我正在使用JWPlayer在我的网站上播放视频。在前端播放视频效果很好。在我的后端，我想先预览视频，然后再使用JWplayer上传。

我的用于上传和预览视频的示例代码如下所示。

$(document).ready(function () {

  var playerInstance = jwplayer('jwvideo');
  playerInstance.setup({
    file: "https://player.vimeo.com/external/135492851.hd.mp4?s=a61836463fbde188aaa1e24e6bfeeb39&profile_id=113",
    autostart: false,
    startparam: "starttime",
  });          
  
  playerInstance.on('ready', function() {
    $('#actualvideo video').attr('id','video_preview');
  });
        
  $(document).on("change", "#video", function(evt) {
    var $source = $('#video_preview');
    $source[0].src = URL.createObjectURL(this.files[0]);
  });      
  
});

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://content.jwplatform.com/libraries/DbXZPMBQ.js"></script>
<div id="jwvideo">This text will be replaced with a jwplayer.</div>
<div class="container" style="margin-top: 20px;">
  <div class="row">
    <div class="col-lg-12 col-sm-12 col-12">
      <h4>Upload & preview Video</h4>
      <span class="file-input btn btn-primary btn-file">
        Upload Video<input type="file" class="upload"  id="video" name="video" accept="video/*">
      </span>
    </div>
  </div>
</div>

我的代码无法正常运行。请检查此https://jsfiddle.net/sujan_shrestha/1q8fd5pt/。是否有针对此问题的最佳解决方案？预先感谢。