2

I have an issue, that i cannot resolve for a two weeks. I use jQuery ui Widgets to render bootstrap carousels. In those carousels i render high quality video. And if there is a lot video elements on the page video in header stops loading and throws onAbort event. My play function looks like

play: function() {            
        var widget = this;
        var videoElement = widget._getVideoElement();
         if(!widget.options.isMobile.iOS){
        videoElement.attr('autoplay', 'true');
        widget._getVideoElementNative().play();
        widget._setPlayIcon('stop');
        widget.options.isPlaying = true;

        if (!widget.options.canPlay) {
            widget._getLoadingIcon().show();
        } else {
            widget._getPosterElement().hide();
         }
        }
        else{ //videoplay for iOS devices
             widget._getVideoElementNative().currentTime = 0.1;
    if(widget._getVideoElementNative().readyState !== 4){
        widget._getVideoElementNative().addEventListener('canplaythrough', onCanPlayVideo, false);
        widget._getVideoElementNative().addEventListener('load', onCanPlayVideo, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch.
        setTimeout(function(){
        widget._getVideoElementNative().pause(); //block play so it buffers before playing
    }, 1); //it needs to be after a delay otherwise it doesn't work properly.
   }
   else
   {
       widget._getVideoElementNative().play();
   }
  }

},

     onCanPlayVideo: function(){
widget._getVideoElementNative().removeEventListener('canplaythrough', onCanPlay, false);
widget._getVideoElementNative().removeEventListener('load', onCanPlay, false);
//video is ready
widget._getPosterElement().hide();
widget._getVideoElementNative().play();

},

Speedyjet
  • 51
  • 4

1 Answers1

0

i solved the problem with dynamically injecting video element with jQuery. Now when the page is loading there is no videoelements, but when user click 'play' i create particular element and set it to play. Following this answer

Community
  • 1
  • 1
Speedyjet
  • 51
  • 4