Usuwanie czarnego flesza obciążenia na wideo HTML5

Tworzyłem stronę internetową do gry online, w którą gram. W nagłówku mam film HTML5, który odtwarza się bardzo krótko (1 sekundę). W Internet Explorerze nie ma problemu, jednak w Chrome podczas ładowania wideo jest bardzo krótki czarny ekran. Czy istnieje sposób, w jaki mogę usunąć tę lampę błyskową, lub, w przypadku jej braku, uczynić ją białą, aby pasowała do tła? Możesz zobaczyć co mam na myśli tutaj http://testingfortagpro.meximas.com/. Jeśli spróbujesz go w IE i Chrome, zobaczysz różnicę w sposobie wczytywania wideo. Czy istnieje jakiś lepszy sposób na wdrożenie tego? Próbowałem używać animowanego GIF-a, jednak jakość znacznie się zmniejszyła.Usuwanie czarnego flesza obciążenia na wideo HTML5

Dzięki!

Źródło

2014-10-06 Tom

http://stackoverflow.com/questions/19974902/change-background-color-of-html5-video-element –

Sekcja plakat z tego blog post wskazuje, co następuje: „Jeśli nie zostanie określony obraz plakat przeglądarka może wyświetlić tylko czarną skrzynkę Napełnianie wymiarów elementu”

Więc nie wydaje się rozwiązać ten problem poprzez proste dodanie tła-kolor biały do elementu video ... ale można dodać prosty biały plakat obraz tak:

<video width="320" height="240" autoplay="" poster="http://dummyimage.com/320x240/ffffff/fff" > 
 
    <source src="http://testingfortagpro.meximas.com/movie2.mp4" type="video/mp4"> 
 
</video>

Źródło

2014-10-06 19:53:58 TimHayes

Przesłałem zmiany, ale nadal wydaje się, jak było wcześniej:/ – Tom

Czy spróbuj odświeżyć pamięć podręczną przeglądarki? Sprawdził się doskonale w chromie w przykładowym kodzie. – TimHayes

To działa dobrze dla pierwszego obciążenia, ale jeśli odświeżysz stronę lub klikniesz na inne linki, czarne pole powróci. – Tom

można użyć przezroczystej gif plakatu:

poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

Ale to nie wystarczy, aby wyeliminować miganie w Firefoksie. Skończyło się na tym, że ukryłem wideo do momentu jego odtworzenia:

<video autoplay style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility='visible';},100);">

Dostosuj limit czasu według własnego uznania. Gdy nie korzystałem z autoodtwarzania, musiałem go zwiększyć do 400 ms.

Źródło

2016-01-18 14:13:14 user

To nie działa. Miga na czarno, a następnie ukrywa wideo przez określony czas, co przynosi efekt przeciwny do zamierzonego. –

@Darryl: jakiej przeglądarki i systemu operacyjnego używasz? Możesz spróbować usunąć autoodtwarzanie i uruchomić wideo ręcznie. – user

To działo się dla mnie w Firefoksie na Maca. Wideo, które mam, powinno się odtwarzać po wczytaniu strony. Tego właśnie chce mój klient. –

Miałem ten sam problem i naprawiłem go, ukrywając element wideo za pomocą ekranu CSS: brak do momentu, aż element wideo zasygnalizował, że zakończył ładowanie poprzez zdarzenie onLoadedData, i w odpowiedzi na to zdarzenie ustawiłem display: block.

Pozbyłem się czarnego błysku.

Źródło

2016-06-24 11:43:57

Umieszczenie w atrybucie plakatu w tagu wideo nie powstrzymało czarnego pola przed miganiem, gdy użytkownik odświeży stronę, jednak użyłem funkcji ukrywania w przypadku zdarzenia "beforeunload", a teraz czarny błysk zniknął.

$(window).on('beforeunload', function() { 
    $("video").hide(); 
});

Źródło

2016-08-02 14:44:10

Spróbuj wstrzymać wideo. Nie ukrywa ich, po prostu zatrzymuje się. Wygląda gładko. Pomógł mi: $ (window) .on ('beforeunload', function() { $ ("wideo"). Each (function() { $ (this) .get (0) .pause(); }); }); ' –

Miałem ten sam migający problem w Firefoksie, nawet z ustawionym atrybutem plakatu. Naprawiłem to, dodając obraz tła do tagu wideo, który odpowiadał pierwszej klatce mojego wideo.

Źródło

2016-08-03 11:45:27 user3350623

$ (okno) .on ("beforeunload", function() {$ ("wideo"). Hide();});

Spowoduje to ukrycie elementu wideo tuż przed wyładowaniem okna i załadowanie następnego dokumentu.

Źródło

2016-12-30 15:40:01 user990967

Usuwanie czarnego flesza obciążenia na wideo HTML5

Odpowiedz

Powiązane problemy