Używam Swipeview (http://cubiq.org/wipipeview), aby utworzyć swibusowalny pokaz slajdów na urządzeniach dotykowych ekranu dotykowego. Jest to wystarczająco proste z obrazami, ale chcę również dołączyć wideo Vimeo w pokazie slajdów. Niestety, ponieważ Iframe przechwytuje twoje wejście do przesuwania dla siebie (wierzę, że to co dzieje się przynajmniej), po przyjeździe do slajdu odtwarzacza wideo nie możesz już odsuwać się od niego, chyba że dotkniesz paginacji. To nie jest dopuszczalne.

Moim rozwiązaniem było ukrycie wideo gdzieś na stronie (za pomocą wyświetlacza: Brak; lub wysokość: 0; lub bez względu na to, co działa) i użyj obrazu w pokazie slajdów za pomocą zdarzenia kliknięcia, które wyzwala wideo do gry. Nawet jeśli wideo jest ukryte, gdy gra, powinna być na pełnym ekranie i zagraj (przynajmniej na iPhone'a).

Ta technika działa dobrze, gdy przetestuję go w przeglądarce na pulpicie, ale dziwnie zachowuje się na iPhone. W celach testowych wideo jest wyświetlane pod pokazem slajdów. Jeśli załaduję stronę i dotknięź na slajdzie, nic nie robi. Jeśli jednak gram wideo, dotykając rzeczywistego odtwarzacza wideo, gdy wideo zostało zamknięte, mogę odtwarzać wideo ponownie, stukając slajd. Zasadniczo, gdy wideo jest odtwarzane za pomocą odtwarzacza, mogę odtwarzać wideo za pośrednictwem API, ale nie bez użycia odtwarzacza raz pierwszy.

Oto mój kod:

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

Zdecydowałem się poprzez testowanie, że gracz Problem wydaje się całkowicie leżeć w połączeniu player.api('play'). Każda pomoc lub alternatywna metoda osiągnięcia tego została doceniona.

6
Ryan Giglio 9 grudzień 2013, 21:23

3 odpowiedzi

Najlepsza odpowiedź

Po zbadaniu tego dalszego i znalezienia dwóch innych pytań stackoverflow z tym samym problemem (odtwarzacze wideo JS API i iPhone'a i Odtwarzacze wideo z API JS i iPhones )

Teoretyzacja: Apple nie pozwala na automatyczne odtwarzanie filmów w mobilnym Safari. Być może to ograniczenie jest narzucane na końcu Apple, aby zapobiec korzystaniu z API do autoodtwarzania wideo z JavaScript.

9
Community 23 maj 2017, 12:33

Safari Zdalna konsola wyświetli błąd na konsoli - Error: The viewer must initiate playback first.

Jeśli szukasz filmu, zanim zagrasz, wideo nie uruchomi się (tylko ios; inne platformy wydają się OK).

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

Więc musisz zrobić coś takiego:

if ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
    player.addEvent('play', function(id) {
        player.api("seekTo", 10);
    });
} else {
    player.api("seekTo", 10);
}
1
frumbert 15 czerwiec 2015, 03:47

Niektóre przeglądarki zabroniło wyzwalać "gry" przez JS na początku. Musi istnieć prawdziwa interakcja użytkownika, aby odtworzyć wideo.

Jeśli jednak chcesz umieścić wideo Vimeo w suwaku, co możesz zrobić, to:

  1. Zastosuj obraz za pomocą "Play button" na górze wideo
  2. Ustaw "Krycie: 0" do iframe i udostępnij dokładnie rozmiar i pozycję "Przycisk Play" (Iframe musi być "cofnijfullScreen")
  3. Po pierwszym uruchomieniu użytkownika odtwarza wideo. Zrób iframe do normalnego rozmiaru, który chcesz i pozwolić Vimeo Player.js.

W takim przypadku użytkownik musi kliknąć "przycisk odtwarzania", aby uruchomić wideo

0
jilykate 8 czerwiec 2017, 07:54