Question

我的代码有两个问题

1.当我第一次点击Video Buton时，它会说403 Forbidden（在小提琴中）和我的应用程序中它的推迟“它的移动或已删除“

播放视频之前是否可以显示加载器，因为它需要很长时间才能显示视频

这是我的代码

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

请你告诉我如何解决这个问题。

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>

在BootStrap模式下播放视频的问题

1 个答案: