Jak zrobić obraz ładujący podczas ładowania wideo HTML5?

Question

, ponieważ odtwarzacz wideo wymaga czasu, aby załadować wideo MP4. czy obsługa HTML5 może odtwarzać logo "ładujące" podczas ładowania wideo?

ponieważ moje aplikacje ASP.NET to strona mobilna, to trzeba użytkownika kliknij na wideo, aby odtworzyć film (Android, iPhone nie obsługują autoodtwarzanie). więc nie mogę zrobić "załadunku" logo jako plakatu, w przeciwnym razie użytkownik będzie mylić o tym. Chcę wyświetlać ładowanie logo, gdy użytkownik kliknie przycisk odtwarzania na iPadzie.

dzięki

Joe

Answer 1

Użyj plakat tag id

<video controls="controls" poster="/IMG_LOCATION/IMAGENAME"> 

Więcej informacji można znaleźć http://www.w3schools.com/html5/att_video_poster.asp

Answer 2

Można chyba zrobić z JavaScript tworząc nakładkę obrazu z animowany "ładujący się" plik gif, który wyświetla się tylko podczas wczytywania filmu i nie jest gotowy do odtwarzania.

Musisz napisać JavaScript, aby połączyć się z Media API w celu wykrycia, kiedy wideo jest gotowe do odtwarzania itd. (Aby ponownie ukryć obraz), ale powinno być możliwe.

Answer 3

Zajęło mi zbyt długo, aby dowiedzieć się, jak to zrobić, ale mam zamiar podzielić się tym tutaj, ponieważ WRESZCIE znalazłem sposób! Co jest niedorzeczne, gdy się nad tym zastanowić, ponieważ ładowanie jest czymś, co muszą zrobić wszystkie filmy. Można by pomyśleć, że wzięliby to pod uwagę przy tworzeniu standardu wideo HTML5.

Moja oryginalna teoria, że ​​pomyślałem, że powinienem pracowali (ale nie) był to

1. Dodaj do załadunku bg obrazu wideo podczas ładowania poprzez js i css
2. Usuń gdy gotowy do gry

Proste, prawda? Problem polegał na tym, że nie mogłem uzyskać obrazu tła wyświetlanego po ustawieniu elementów źródłowych lub ustawiono atrybut video.src. Ostatnim uderzeniem geniuszu/szczęścia było odkrycie (poprzez eksperymenty), że obraz tła nie zniknie, jeśli plakat zostanie ustawiony na coś. Używam fałszywego obrazu z plakatu, ale wyobrażam sobie, że będzie on działał równie dobrze z przezroczystym obrazem 1x1 (ale po co martwić się o inny obraz). To sprawia, że ​​jest to prawdopodobnie hack, ale działa i nie muszę dodawać dodatkowego znacznika do mojego kodu, co oznacza, że ​​będzie on działał we wszystkich moich projektach przy użyciu wideo html5. (Klasa loading stosowane do wideo z JS)

HTML

<video controls="" poster="data:image/gif,AAAA"> 
    <source src="yourvid.mp4" 
</video> 

CSS

video.loading { 
    background: black url(/images/loader.gif) center center no-repeat; 
} 

JS

$('#video_id').on('loadstart', function (event) { 
    $(this).addClass('loading'); 
    }); 
    $('#video_id').on('canplay', function (event) { 
    $(this).removeClass('loading'); 
    $(this).attr('poster', ''); 
    }); 

Działa to doskonale dla mnie, ale tylko przetestowane w Chrome i Safari na prochowiec. Daj mi znać, jeśli ktoś znajdzie błędy lub ulepszenia!

Answer 4

także proste rozwiązanie, aby dodać zdjęcie preloader podczas wczytywania wideo: HTML:

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png"> 

plakat jest przejrzysty obraz 1px.

CSS:

video { 
    background-image: url(images/preload_30x30.gif); 
    background-repeat: no-repeat; 
    background-size: 30px 30px; 
    background-position: center; 
    } 

Answer 5

Moje rozwiązanie było dodać następujący wnętrza window.fbAsyncInit = function():

var finished_rendering = function() { 
    var el = document.querySelector('div#loading_msg'); 
    el.style.display="none"; 
} 

FB.Event.subscribe('xfbml.render', finished_rendering); 

Znaleziono: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12