На iPhone функция Vimeo Javascript API .play() не работает до тех пор, пока не будет воспроизведено видео

Question

Я использую SwipeView (http://cubiq.org/swipeview), чтобы создать слайд-шоу с сенсорным экраном. Это достаточно просто с изображениями, но я хочу включить видео Vimeo в слайд-шоу. К сожалению, поскольку iFrame захватывает ваш сабвуфер для себя (я считаю, что это то, что происходит по крайней мере), как только вы достигнете слайда видеоплеера, вы больше не сможете отмахнуться от него, если не нажмете на разбиение на страницы. Это неприемлемо.

Мое решение заключалось в том, чтобы скрыть видео где-то на странице (с использованием дисплея: нет или высота: 0 или что-то работает) и использовать изображение в слайд-шоу с событием клика, которое запускает воспроизведение видео. Даже если видео скрыто, когда он воспроизводится, он должен работать в полноэкранном режиме и воспроизводить (по крайней мере, на iPhone).

Этот метод работает отлично, когда я тестирую его на своем рабочем столе браузера, но он ведет себя странно на iPhone. В целях тестирования видео отображается под слайд-шоу. Если я загружаю страницу и нажимаю на слайд, она ничего не делает. Однако, если я воспроизвожу видео, нажав на фактический видеопроигрыватель, как только видео было закрыто, я снова смогу воспроизвести видео, нажав на слайд. В принципе, как только видео воспроизводится через плеер, я могу воспроизводить видео через API, но не без использования проигрывателя вначале.

Вот мой код:

// Append the "hidden" video player to the page 
$('.slider-container').append("<div class='mobile-video-slide'><iframe id='slideshow-player' src='//player.vimeo.com/video/81295681?title=0&byline=0&portrait=0&color=8bd4ee&api=1&player_id=slideshow-player' width='500' height='281' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"); 

// Get the player object 
var iframe = $('#slideshow-player')[0], 
    player = $f(iframe); 

// When the video is ready 
player.addEvent('ready', function() { 
    // Add the click event to the slide 
    $('#play-video').on('click', function() { 
     // Play the video 
     player.api('play'); 

     // Don't jump the page 
     return false; 
    }); 
}); 

я определил через тестирование, что player.ready событие работает должным образом, и это событие нажмите на изображение в исправному. Проблема, похоже, целиком лежит в вызове player.api('play'). Любая помощь или альтернативный метод достижения этой цели будут оценены.

Answer 1

После изучения этого дальше и найти две другие вопросы StackOverflow с той же проблемой (video players with js API and iPhones и video players with js API and iPhones), а также тот факт, что это такое же поведение происходит на официальной API детской площадке Vimeo, это кажется, что либо это либо особенность дизайна или ошибка с API.

Теоретизация. Apple не позволяет автоматически запускать видео в мобильном Safari. Возможно, это ограничение наложено на конец Apple, чтобы вы не использовали API для автоматического воспроизведения видео с помощью Javascript.

Answer 2

Safari дистанционный пульт покажет ошибку на консоли - Error: The viewer must initiate playback first.

Если вы ищете видео, прежде чем он играл, видео не запускается (IOS только, другие платформы, кажется, нормально).

player.addEvent('ready', function() { 
    player.api("seekTo", 10); 
}); 

Так что вам нужно сделать что-то вроде:

if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) { 
    player.addEvent('play', function(id) { 
     player.api("seekTo", 10); 
    }); 
} else { 
    player.api("seekTo", 10); 
} 

Answer 3

Некоторые браузера запрещают, чтобы вызвать «играть» с помощью JS в начале. Для воспроизведения видео должно быть реальное взаимодействие с пользователем.

Однако, если вы хотите поставить Vimeo видео в ползуне, что вы можете сделать, это:

1. нанести изображение с «кнопку воспроизведения» на верхней части видео
2. набор «непрозрачности: 0 "в iframe и сделать его точно размером & положение« кнопки воспроизведения »(iframe должно быть« allowfullscreen »)
3. после того, как пользователь впервые запускает воспроизведение видео.Сделайте iframe нормальным размером, который вы хотите, и пусть vimeo player.js возьмет под свой контроль.

В этом случае пользователь должен нажать на кнопку «Play», чтобы вызвать выставлению