问题自举下播放视频莫代尔

Question

我对于这两个问题我的代码

1.当我在视频布顿点击它说403禁止（在小提琴），并在我的应用程序的dislaying第一次“它的移动或 删除”

是否可以播放视频，因为它的花很长时间在显示视频

之前表现出装载机这是我的代码

$(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', ''); 
}); 

请你让我知道hw来解决这个问题。

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>