Видео HTML5 не может воспроизводиться в iPad после .appendTo или .detach

У меня возникает интересная проблема, когда мое видео не может воспроизводиться в iPad после .appendTo или .detach. Он представляет кнопку воспроизведения, но когда нажата кнопка воспроизведения, ничего не происходит.

Jsfiddle http://jsfiddle.net/LHTb5/1/

HTML

<video id="video1">
    <source id="mp4" src="https://s3.amazonaws.com/s3hub-1b3c58271cb3e0dfa49d60cae0ac8b86ade30aed6294bdb5fe682e2bf/HTML5/sintel_trailer-480.mp4" type="video/mp4"/>
</video>


<div id="new"></div>

Javascript

$(document).ready(function(){
   $("#video1").appendTo($("#new"));
});

Edit

О, люди, были некоторые путаницы в отношении того, что работает, а что нет. Позвольте мне сделать это очень легко.

http://jsfiddle.net/LHTb5/2/ < --- works

http://jsfiddle.net/ecbUP/ < ---- не работает

Не имеет ничего общего с html, тегами или автозапуском. Это просто мертвая простая вещь, которая заставляет iPad не играть. Мне просто интересно, почему, или как сделать .appendTo или .detach и заставить его работать.

Ответ 1

Кажется, что проблема связана с перемещением video tag. Восстановление всего тега видео - это решение, которое может работать (см. Скрипку)

$(document).ready(function(){
    var tt = $('<video/>', {
        id: 'video2',
        'autobuffer' : 'autobuffer',
        'controls'   : 'controls',
        'autoplay'   : 'autoplay',
        html         : $('<source />', {
            'src'    : 'http://media.w3.org/2010/05/sintel/trailer.mp4',
            'type'   : 'video/mp4'       
        })
    });
    $("#video1").remove();
    tt.appendTo($('#new'));
});

Я использовал жестко заданные значения для сборки нового тега видео, но вы можете использовать .attr() в теге видео и источнике, чтобы получить значения из тега.

Я знаю, что это не решение проблемы с appendTo().

Для полноты: протестировано на iPad2 - iOS4.3.3/iPod 5 - iOS6.0.1/iPod 5 - iOS 7

РЕДАКТИРОВАТЬ: обновлена ссылка на видео в скрипте и протестирована на iOS7

Ответ 2

Попробуйте следующее:

$(document).ready(function(){
    $("#video1").appendTo("#new");
    $('#video1').get(0).play();
});

Ответ 3

Автовоспроизведение не работает на iPad.

Можете ли вы автовоспроизвести HTML5-видео на iPad?

Если вы хотите воспроизвести видео, вы можете добавить его так (без < source):

<video controls src="https://s3.amazonaws.com/s3hub-1b3c58271cb3e0dfa49d60cae0ac8b86ade30aed6294bdb5fe682e2bf/HTML5/sintel_trailer-480.mp4"></video>

jsfiddle

В моем проекте я делаю так:

            ...
            initVideoPlayer: function(id) {

                var firstvideo='foo.mp4';
                this.embeddVideoPlayer(firstvideo);
            },

            embeddVideoPlayer: function(videoFile) {
                this.setupVideoPlayer(videoFile);
                this.appendVideoPlayer();
            },

            /** Setup Video-Player with Size 950px x 406px */
            setupVideoPlayer: function(videoFile) {
                this.videotag = document.createElement('video');
                this.videotag.src = videoFile;
                this.videotag.height = "406";
                this.videotag.width = "950";
                this.videotag.seekable = true;
            },

            /** Setup Video-Player to DOM,  */
            appendVideoPlayer: function() {
                var node = document.getElementById('new'); 
                this._removeChildNodes(node);
                node.appendChild(this.videotag);

            },
            _removeChildNodes: function(node) {
                while (node.hasChildNodes()) {
                    node.removeChild(node.lastChild);
                };
            },
            ....

каждый раз, когда я запускаю видео, мне нужно вызвать embeddVideoPlayer (videoFile).

Ответ 4

Я думаю, вы можете найти решение по этой ссылке: Как вставить фильм mp4 в свой html?

Кстати, я попробовал jsfiddle на моем iphone, кажется, что он несовместим. никаких элементов управления вообще.

@BenjaminPowers Вы пытались добавить controls="controls" в свой тег video?

Edit:

Я думаю, что я наконец получил решение, не могли бы вы подтвердить, что используете правильный тип doctit для html5, как показано ниже:

<!DOCTYPE html>
<html>

Вот код из W3Schools:

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4"/>
  <source src="movie.ogg" type="video/ogg"/>
  Your browser does not support the video tag.
</video>

</body>
</html>

Я попробовал ссылку ниже на моем iPhone, и она отлично работала, видео полностью просматривается, и вы будете использовать элементы управления IOS:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all