Search code examples
jqueryjquery-uihtml5-videojplayer

HTML5-Video in animated jQuery-Dialog pauses on animation end

We play videos with jPlayer (non-Flash-version) in a jQuery dialog. They're set to autoplay, which works, but if the dialog is animated, i.e. has a show-effect, it'll pause. Does anyone know why or how to circumvent that?

Used libraries:

jQuery 1.10.1
jQuery UI 1.11.14

Tested in Firefox 40 and Chrome 44 on Windows 7

The following show effects pause the video:

  • blind, drop, fold, bounce, clip, puff, scale, shake, size, slide

These work ok:

  • slideDown, highlight, pulsate

"explode" doesn't pause the video, but during the animation the video isn't visible

<div id="dialog" title="Basic dialog">
  <p>Inner Video does not play automatically (because jPlayer is missing), but if started manually while the dialog is animated, it'll pause when the animation is finished.</p>
  <video id="inner" autoplay controls src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"></video>
</div>

<p>Outer Video plays automatically without problems</p>
<video id="outer" autoplay controls src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"></video>

$( "#dialog" ).dialog({
  width: 680,
  height: 540,
  show: {
    effect: "drop",
    duration: 10000
  }
});

jsfiddle: http://jsfiddle.net/LePhil/uk9gpLne/1/

Solution

  • I'm quite sure I've found the cause: jQueryUI wraps the dialog in a wrapper while animating it and after it's done animating, it moves the ui-dialog-element out of the wrapper. This pauses the video. Workarounds would be to

    a) call play again after the animation is done

    b) only start the video after the animation is done (so no native autoplay)

    c) do the animation yourself so that it doesn't get wrapped, e.g. by using .animate( left: 100 ) instead of show:{ left: 100 } in the dialog's constructor.