Question

I am trying to load a video with auto play in my iOS app, and then add an event which runs a function after the video has finished playing. My code looks like:

 $( "#videoPageA0" ).live( 'pageinit',function(event){
 var myPlayer = $("#videoA0").get(0);
 myPlayer.load();
 myPlayer.addEventListener("ended", $X.videoCallback);
 myPlayer.play();
 });

When the page loads, the video plays for a second or two and then freezes. this doesn’t cause my app to crash, as i can still use the buttons in the header, has anyone experienced a similar problem or know a solution? The code works perfect in the simulator, but fails on the device.

The following is my HTML code for the the video page:

<div data-role="page" id="videoPageA0" style="overflow:hidden;">    
        <div data-role="header" class="header">
            <img src="images/link1.jpg" alt="" title="" class="link1"/>
            <img src="images/link2.jpg" alt="" title="" class="link2" />
            <img src="images/link3.jpg" alt="" title="" class="link3" />
        </div>
        <div data-role="content">
            <video id="videoA0" width="320" height="428" webkit-playsinline preload="metadata">  
                <source src="videos/test1.mp4" type="video/mp4" /> 
            </video>
        </div>

I have tried mov and m4v files, but still cannot get it to work.
i am using Xcode 4.3.3, phone gap 1.8 and Jquery mobile 1.1.0

Answer 1

My solution to this was to create my own plugin using Obj-C and then call it using javascript as and when i need it. Job done!