2

Hi All: I have a relatively simple page with an HTML5 video in a JQuery dialog div. I'm trying to use a button to simultaneously open the dialog and start the video playing, but everything I've tried won't play the video until I've clicked the button a second time.

I want the video to start playing as soon as the dialog is opened, without having to click a second "play" button.

    <head>
        <script type="text/javascript">
        $(function () {
                $("#vid").dialog({
                    autoOpen: false, show: {
                        effect: "blind",
                        duration: 1000
                    }, modal: false, height: 480, width: 640, dialogClass: "no-close"
                });
                $("#lnkVid").click(function () {
                    $("#vid").dialog("open");
                    startPlay();
                });

                function startPlay() {
                    var vid = document.getElementById('introVid');

                    if (vid.readyState===4) {
                        vid.play();
                    } else {
                        alert("not ready");
                    }                    
                }
        });
    </script>
</head>
<body>
<a href="#" id="lnkVid">Video</a>
            <div id="vid" >
                    <video width="640" height="480" id="introVid" controls>
        <source src="myvid.mp4" type="video/mp4"/>
        Your browser does not support the video tag.
    </video>

            </div>
</body>

WHen I click on the "linkVid" link, the modal opens and the video is at the starting point, but doesn't play. It's almost as if the play() command is pausing it.

If I click on the same link a second time, the video will play.

I've tried using combinations of play() and settimeout to delay the play command, and also tried using the ternary 

vid.paused() ? vid.play() : vid.pause();

but that doesn't work either...I presume because the video isn't "paused" when it first loads?

I'm not sure if the dialog itself is interfering with the "play" command?

Script47
  • 14,230
  • 4
  • 45
  • 66
dotnetnoob
  • 73
  • 8
  • Did you try to call the play function first and the dialog next? – lshettyl Aug 05 '15 at 17:57
  • iIs the problem that the animation on your dialog is still opening (player not loaded or visible) when you press play. Have you tried the complete event? – P6345uk Aug 05 '15 at 18:00
  • ishettyl: yes I tried reversing the order, but I get the same behavior. The video plays on the second click, but not the first. – dotnetnoob Aug 05 '15 at 19:43

2 Answers2

0

You could ensure the dialog is completed before loading the video as it may not be in the ready state.

 $("#vid").dialog({
         autoOpen: false, 
         show: {
                        effect: "blind",
                        duration: 1000,
                        complete: function() {
                              startPlay() 
                        }
        },
        modal: false,
        height: 480, 
        width: 640, 
       dialogClass: "no-close"
 });
P6345uk
  • 703
  • 10
  • 26
  • thanks P6345uk: I tried that, but when I put the "complete" into the "show' as you have it, "startPlay" does not seem to be called at all. I don't get an error while debugging in VS either. – dotnetnoob Aug 05 '15 at 19:46
  • could you put alert(vid.readyState); before if (vid.readyState===4) { to see what the status is and to verify if it is reaching that code – P6345uk Aug 05 '15 at 20:06
  • Hi P6345uk...the code does not seem to be getting hit. I also put the "complete" at the end of the dialog script itself (outside of the "show") and it still doesn't get triggered. BUT...I didn't mention that I was using jQuery 2.1.3 and I found this post that "complete" is not supported anymore: http://stackoverflow.com/questions/6923647/how-to-attach-callback-to-jquery-effect-on-dialog-show/18257205#18257205 – dotnetnoob Aug 06 '15 at 10:54
  • Hi @P6345uk...and using the example code on "open" does trigger the external event...thanks for pointing me in the right direction! – dotnetnoob Aug 06 '15 at 11:01
  • 1
    $("#vid").dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, modal: false, height: 480, width: 640, dialogClass: "no-close", open: function () { $(this).parent().promise().done(function () { setTimeout(startPlay(),2000); }); } }); – dotnetnoob Aug 06 '15 at 11:01
0

Add autoplay="autoplay" to video tag, set autoOpen: true for dialog.

If you do not want the dialog to appear automatically then open it pragmatically. Say on button click.

 $(document).on('pageinit',function(){

   $(button).on('click',function(){
   $.mobile.changePage('#yourdialogid', {
                transition: 'pop',
                changeHash: false,
                role: 'dialog'
            });
         });

 });
Vivek Ranjan
  • 1,432
  • 2
  • 15
  • 37