html5 Видео не воспроизводится на iPad

Question

У меня есть видео тег, который отлично работает в Safari, Chrome, но не на iPad/iPhone. Что я делаю не так?

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

JS код

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();
            }

        }

Answer 1

iOS печально известна своей чрезмерной суетой при воспроизведении видео. Вот несколько вещей, чтобы проверить:

1. Видео, закодированное с использованием базового профиля H.264 (другие профили не гарантированно воспроизводятся под iOS)
2. Видео файл обслуживается с соответствующим заголовком типа контента (binary/octet-stream не будет работать на iOS)
3. Если вы в конечном итоге с помощью <source type="foo" src="bar" /> теги в вашем <video />, убедитесь, что значение type Атрибут точно соответствует content-type заголовок, предоставляемый сервером - это регистр символов
4. Сервер, доставляющий видеофайл, должен поддерживать запросы диапазона байтов - в этом случае консоль разработчика iOS Safari должна отображать жалобы в этом направлении.

Это самые распространенные ошибки, с которыми я сталкивался (я работаю на онлайн-видео платформе) - надеюсь, ваша проблема будет так же проста, как выяснение того, какое требование вы пропускаете.