Ausgabe mit Video unter BootStrap Spielen Modal

Question

Ich habe zwei Fragen in Bezug auf meinen Code

1. Wenn ich zum ersten Mal auf Video Buton klicken sie sagt, 403 (in der Geige) Verboten und in meiner Anwendung seines dislaying „seine verschobene oder gelöscht“

1. ist es möglich, einen Lader zu zeigen, vor der Wiedergabe eines Videos, wie seine lange dauern würde, ein Video mein Code

Dies ist zu zeigen,

$(document).on('click', '.clickhere', function(event) 
{ 
var videoSRC = $(this).attr('data-theVideo'); 
$('.frameclass').attr('src', videoSRC); 
$('#videoModal').modal('show'); 
}); 
    $('#videoModal').on('hide.bs.modal', function() 
{ 
     $('.frameclass').attr('src', ''); 
}); 

Könnten Sie bitte lassen Sie mich wissen, hw, das zu beheben.

http://jsfiddle.net/hLxauuaz/126/

Answer 1

$(document).on('click', '.clickhere', function(event) { 
 
    videoSRC = $(this).attr('data-theVideo'); 
 
    vid = document.getElementById("video"); 
 
    vid.src = videoSRC; 
 
    vid.load(); 
 
    vid.oncanplay = function() { 
 
    $('#videoProgress').hide(); 
 
    }; 
 
    $('#videoProgress').show(); 
 
    $('#videoModal').modal('show'); 
 
}); 
 
$('#videoModal').on('hide.bs.modal', function() { 
 
    vid.src = ''; 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<table border="1" cellpadding="5" id="videolisttable" cellspacing="2" class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th width="10%">Name</th> 
 
     <th width="8%">File</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="portlettr" data-videoname="video4" id="tagnames34" data-stuff="" data-id="34"> 
 
     <td>video4</td> 
 
     <td><a href="#" class="btn btn-default clickhere" data-toggle="modal" data-thevideo="https://api-files.sproutvideo.com/file/1c9ad9b71919e2c994/f3f680b44620be02/720.mp4">Video</a> 
 
     </td> 
 
    </tr> 
 

 
    <tr class="portlettr" data-videoname="video2" id="tagnames32" data-stuff="" data-id="32"> 
 
     <td>video2</td> 
 
     <td><a href="#" class="btn btn-default clickhere" data-toggle="modal" data-thevideo="https://api-files.sproutvideo.com/file/a09ad9b71919e2c228/91dd99df707480e5/240.mp4">Video</a> 
 
     </td> 
 
    </tr> 
 
    <tr class="portlettr" data-videoname="video1" id="tagnames30" data-stuff="" data-id="30"> 
 
     <td>video1</td> 
 
     <td><a href="#" class="btn btn-default clickhere" data-toggle="modal" data-thevideo="https://api-files.sproutvideo.com/file/e89ad9b71919e5cf60/46a1774aa09db957/240.mp4">Video</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="videoModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <!-- 16:9 aspect ratio --> 
 
     <div id="videoProgress" class="progress"> 
 
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"> 
 
      <h1>Please wait while loading...</h1> 
 
      </div> 
 
     </div> 
 
     <div class="embed-responsive embed-responsive-16by9"> 
 
      <video id="video" controls autoplay style="width:100%; height:100%" class="embed-responsive-item frameclass" src=""></video> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>