JWplayer: Как я могу просмотреть видеофайл перед загрузкой с помощью JWplayer? - PullRequest
Новая
       37

JWplayer: Как я могу просмотреть видеофайл перед загрузкой с помощью JWplayer?

0 голосов
/ 17 мая 2019

Я использовал 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/. Есть ли лучшее решение для этой проблемы? Заранее спасибо.

...