Monday, 26 August 2013

Video.js in Modal - Too much recursion error

Video.js in Modal - Too much recursion error

Im using video.js and bootstrap 3 modal plugins to play a video in a modal
window.
My problem is when I try to pause/stop the video using the video.js api on
modal hide event I receive a too much recursion error from jQuery.
The Error
too much recursion
...1&s?1:2&s?3:4&s?2:0),e}},special:{load:{noBubble:!0},focus:{trigger:function(){i...
This is the problematic part of my script.
videojs("example_video_1").ready(function(){
var myPlayer = this;
myPlayer.pause();
});
HTML
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="960" height="399"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4"
type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm"
type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv"
type='video/ogg' />
</video>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
jQuery
<script>
$(document).ready(function(){
var myPlayer = videojs("example_video_1");
$('.modal').on('show.bs.modal', function () {
$('.modal').css('visibility','hidden');
console.log('show');
})
$('.modal').on('shown.bs.modal', function () {
CalcHeight();
$('.modal').css('visibility','visible');
})
$('.modal').on('hide.bs.modal', function () {
videojs("example_video_1").ready(function(){
var myPlayer = this;
myPlayer.pause();
});
})
function CalcHeight(){
var modalHeight = $('.modal-dialog').height();
var newModalHeight = modalHeight / 2;
$('.modal').css('top','50%');
$('.modal').css('margin-top', -newModalHeight);
});
</script>

No comments:

Post a Comment