html5 Video not playing in iPad

I have a video tag, which working fine in Safari, Chrome but not on iPad/iPhone. Whats I am doing wrong.

<a onclick="showVideoPlayer('http://www.mywebsite.com/videos/a video file.m4v')" id="video1" href="#">Play video</a>

js code

function showVideoPlayer(videoSrc, showDownloadLink){
            alert(videoSrc);
            if(!videoSrc)
                return;

            $('div#overlay').show();
            var $videoPlaceHolder = $('div#video-placeholder');
            $videoPlaceHolder.show();

            var $video = $videoPlaceHolder.find('video');

            var winWidth = $(window).width() - 80;
            var winHeight = $(window).height() - 120;

            $video.attr开发者_开发知识库('src', videoSrc);
            $video.attr('width', winWidth + 'px');
            $video.attr('height', winHeight + 'px');
            $videoPlaceHolder.append($video);
            if(showDownloadLink){
                $('#video-placeholder .down').show();
            }

        }

iOS is notorious for being extra-fussy about playing back videos. Here's a few things to check for:

1. Video encoded using H.264 Baseline Profile (other profiles are not guaranteed to play under iOS)
2. Video file being served with an appropriate content-type header (binary/octet-stream will not work on iOS)
3. If you end up using <source type="foo" src="bar" /> tags within your <video />, ensure that the value of the type attribute matches exactly the content-type header supplied by the server - this is case-sensitive.
4. The server delivering the video file must support byte range requests - iOS Safari's developer console should show complaints along these lines if this is the problem.

Those are the most common errors I've come across (I work at an online video platform) - hopefully, your problem will be as simple as finding out which requirement you're missing.