html5 video not working in ipad

Question

This is my custom HTML5 Video player: my test link

<video id="vp2_html5_rightSidePlaylist_UB" width="688" height="387" preload="auto">  
          <div id="playlist" class="hideElement">
            <ul>
                <li class="xtitle">Lorem Ipsum Dolor</li>
                <li class="xdesc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam a sem tortor, eu gravida massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent feugiat tellus sit amet nisl varius quis blandit mi pretium. Cras non neque diam. Vestibulum elit nunc, tristique quis vulputate eu, lobortis eu neque. Donec mollis consequat arcu.</li>
                <li class="xthumb">videos/thumbs/t_a1.jpg</li>
                <li class="xpreview">videos/previews/prev_a1.jpg</li>
                <li class="xsources_mp4">http://video-js.zencoder.com/oceans-clip.mp4</li>
                <li class="xsources_ogv">videos/big_buck_bunny_trailer.ogv</li>
                <li class="xsources_webm">videos/big_buck_bunny_trailer.webm</li>
            </ul>

            <ul>
                <li class="xtitle">Fusce Suscipit Risus</li>
                <li class="xdesc">Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus. Vestibulum lobortis quam eu dui luctus molestie. Sed dictum urna at erat congue ultricies ac ut dui. Etiam orci purus, cursus et aliquet et, iaculis sed enim. Sed felis felis, tristique eu suscipit venenatis, accumsan a augue. Donec non enim neque, nec pretium leo. Cras dapibus, lectus in facilisis cursus, dolor justo dictum ligula, quis cursus elit est in felis. Donec tristique magna at tellus gravida luctus.</li>
                <li class="xthumb">videos/thumbs/t_b1.jpg</li>
                <li class="xpreview">videos/previews/prev_b1.jpg</li>
                <li class="xsources_mp4">videos/sintel_trailer.mp4</li>
                <li class="xsources_ogv">videos/sintel_trailer.ogv</li>
                <li class="xsources_webm">videos/sintel_trailer.webm</li>
            </ul>

            <ul>
                <li class="xtitle">Class Aptent Taciti</li>
                <li class="xdesc">Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend.</li>
                <li class="xthumb">videos/thumbs/t_a2.jpg</li>
                <li class="xpreview">videos/previews/prev_a2.jpg</li>
                <li class="xsources_mp4">videos/big_buck_bunny_trailer.mp4</li>
                <li class="xsources_ogv">videos/big_buck_bunny_trailer.ogv</li>
                <li class="xsources_webm">videos/big_buck_bunny_trailer.webm</li>
                <li class="xsources_mp4v">videos/big_buck_bunny_trailer.mp4v</li>
            </ul>

            <ul>
                <li class="xtitle">Maecenas Lacus Ante</li>
                <li class="xdesc">Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie aliquet ipsum.</li>
                <li class="xthumb">videos/thumbs/t_b2.jpg</li>
                <li class="xpreview">videos/previews/prev_b2.jpg</li>
                <li class="xsources_mp4">videos/sintel_trailer.mp4</li>
                <li class="xsources_ogv">videos/sintel_trailer.ogv</li>
                <li class="xsources_webm">videos/sintel_trailer.webm</li>
                <li class="xsources_mp4v">videos/sintel_trailer.mp4v</li> 
            </ul>

            <ul>
                <li class="xtitle">Lorem Ipsum Dolor</li>
                <li class="xdesc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit</li>
                <li class="xthumb">videos/thumbs/t_a3.jpg</li>
                <li class="xpreview">videos/previews/prev_a3.jpg</li>
                <li class="xsources_mp4">videos/big_buck_bunny_trailer.mp4</li>
                <li class="xsources_ogv">videos/big_buck_bunny_trailer.ogv</li>
                <li class="xsources_webm">videos/big_buck_bunny_trailer.webm</li>
                <li class="xsources_mp4v">videos/big_buck_bunny_trailer.mp4v</li>
            </ul>

            <ul>
                <li class="xtitle">Fusce Suscipit Risus</li>
                <li class="xdesc">Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus. Vestibulum lobortis quam eu dui luctus molestie. Sed dictum urna at erat congue ultricies ac ut dui. Etiam orci purus, cursus et aliquet et, iaculis sed enim. Sed felis felis, tristique eu suscipit venenatis, accumsan a augue. Donec non enim neque, nec pretium leo. Cras dapibus, lectus in facilisis cursus, dolor justo dictum ligula, quis cursus elit est in felis. Donec tristique magna at tellus gravida luctus.</li>
                <li class="xthumb">videos/thumbs/t_b3.jpg</li>
                <li class="xpreview">videos/previews/prev_b3.jpg</li>
                <li class="xsources_mp4">videos/sintel_trailer.mp4</li>
                <li class="xsources_ogv">videos/sintel_trailer.ogv</li>
                <li class="xsources_webm">videos/sintel_trailer.webm</li>
            </ul>

            <ul>
                <li class="xtitle">Class Aptent Taciti</li>
                <li class="xdesc">Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend.</li>
                <li class="xthumb">videos/thumbs/t_a4.jpg</li>
                <li class="xpreview">videos/previews/prev_a4.jpg</li>
                <li class="xsources_mp4">videos/big_buck_bunny_trailer.mp4</li>
                <li class="xsources_ogv">videos/big_buck_bunny_trailer.ogv</li>
                <li class="xsources_webm">videos/big_buck_bunny_trailer.webm</li>
                <li class="xsources_mp4v">videos/big_buck_bunny_trailer.mp4v</li>
            </ul>

            <ul>
                <li class="xtitle">Maecenas Lacus Ante</li>
                <li class="xdesc">Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie aliquet ipsum.</li>
                <li class="xthumb">videos/thumbs/t_b4.jpg</li>
                <li class="xpreview">videos/previews/prev_b4.jpg</li>
                <li class="xsources_mp4">videos/sintel_trailer.mp4</li>
                <li class="xsources_ogv">videos/sintel_trailer.ogv</li>
                <li class="xsources_webm">videos/sintel_trailer.webm</li>
                <li class="xsources_mp4v">videos/sintel_trailer.mp4v</li> 
            </ul>


          </div>

        </video>

It works fine in major desktop browsers and also in android too. But not working in ipad. I tried with few alert checks which was working fine. From that I couldn't predict what could be the problem.

The jQuery plugin link is here

(function($) {
$.fn.vp2_html5_rightSidePlaylist_Video = function(options) {
    //fullscreen vars
        var bodyOrigMargin;
        var bodyOrigOverflow;
        //video
        var videoIsFullScreen=false;
    var videoOrigWidth;
        var videoOrigHeight;
        var videoOrigPosition;
        var videoOrigLeft;
        var videoOrigTop;
        //border
        var videoBorderOrigPosition;
        //video container
    ---

Please help me out in fixing the problem.

Answer 1

Your HTML5 video will not work on Safari desktop either.

I believe you didn't provide an H.264 version of your video, which is the only format Safari supports.