Próbuję zbudować odtwarzacz wideo, który działa wszędzie. do tej pory chciałbym:
<video>
<source src="video.mp4"></source>
<source src="video.ogv"></source>
<object data="flowplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="flowplayer.swf" />
<param name="flashvars" value='config={"clip":"video.mp4"}' />
</object>
</video>
(jak widać na kilku stronach, na przykład wideo dla wszystkich ), tak dobrze.
ale teraz chcę też jakąś listę odtwarzania / menu wraz z odtwarzaczem wideo, z którego mogę wybierać inne filmy. powinny one zostać natychmiast otwarte w moim odtwarzaczu. więc będę musiał „dynamicznie zmieniać źródło wideo” (jak widać na dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - sekcja „Spójrzmy na inny film ”) za pomocą javascript. zapomnijmy na razie o części flashplayera (a tym samym IE), spróbuję się tym zająć później.
więc mój JS do zmiany <source>
tagów powinien wyglądać mniej więcej tak:
<script>
function loadAnotherVideo() {
var video = document.getElementsByTagName('video')[0];
var sources = video.getElementsByTagName('source');
sources[0].src = 'video2.mp4';
sources[1].src = 'video2.ogv';
video.load();
}
</script>
Problem polega na tym, że to nie działa we wszystkich przeglądarkach. a mianowicie firefox = O jest fajna strona, na której możesz obserwować problem, który mam: http://www.w3.org/2010/05/video/mediaevents.html
gdy tylko uruchomię metodę load () (pamiętaj, że w przeglądarce Firefox) odtwarzacz wideo umiera.
teraz dowiedziałem się, że kiedy nie używam wielu <source>
tagów, a zamiast tego tylko jeden atrybut src w <video>
tagu, całość DZIAŁA w przeglądarce Firefox.
więc planuję po prostu użyć tego atrybutu src i określić odpowiedni plik za pomocą funkcji canPlayType () .
czy robię to źle, czy też komplikuję sprawę?
źródło
<source>
tagami. to przypuszczam, że byłoby łatwiejOdpowiedzi:
Nienawidziłem tych wszystkich odpowiedzi, ponieważ były zbyt krótkie lub opierały się na innych ramach.
Oto "jeden" waniliowy sposób JS na to, działający w Chrome, prosimy o przetestowanie w innych przeglądarkach:
http://jsfiddle.net/mattdlockyer/5eCEu/2/
HTML:
JS:
źródło
Modernizr działał na mnie jak urok.
Zrobiłem to, że nie użyłem
<source>
. W jakiś sposób to spieprzyło sprawę, ponieważ wideo działało tylko przy pierwszym wywołaniu load (). Zamiast tego użyłem atrybutu source wewnątrz tagu wideo -><video src="blabla.webm" />
i użyłem Modernizr, aby określić, jaki format obsługuje przeglądarka.Mam nadzieję, że to ci pomoże :)
Jeśli nie chcesz korzystać z Modernizr , zawsze możesz użyć CanPlayType () .
źródło
Twój oryginalny plan brzmi dla mnie dobrze. Prawdopodobnie znajdziesz więcej dziwactw przeglądarki zajmujących się dynamicznym zarządzaniem
<source>
elementami, jak wskazano tutaj w uwadze specyfikacji W3:http://dev.w3.org/html5/spec/Overview.html#the-source-element
źródło
Rozwiązałem to za pomocą tej prostej metody
źródło
Zamiast pobierać ten sam odtwarzacz wideo do ładowania nowych plików, dlaczego nie usunąć całego
<video>
elementu i nie odtworzyć go. Większość przeglądarek załaduje go automatycznie, jeśli src są poprawne.Przykład (używając Prototype ):
źródło
Po prostu umieść element DIV i zaktualizuj zawartość ...
źródło
Zgodnie ze specyfikacją
Więc to, co próbujesz zrobić, najwyraźniej nie powinno działać.
źródło
Yaur: Chociaż to, co skopiowałeś i wkleiłeś, jest dobrą radą, nie oznacza to, że nie można elegancko zmienić elementu źródłowego elementu wideo HTML5, nawet w IE9 (lub IE8 jeśli o to chodzi). (To rozwiązanie NIE obejmuje wymiana całego elementu wideo, ponieważ jest to zła praktyka kodowania).
Kompletne rozwiązanie do zmiany / przełączania filmów w tagach wideo HTML5 za pomocą javascript można znaleźć tutaj i jest testowane we wszystkich przeglądarkach HTML5 (Firefox, Chrome, Safari, IE9 itp.).
Jeśli to pomoże lub masz problemy, daj mi znać.
źródło
Przychodzę z tym, aby dynamicznie zmieniać źródło wideo. Zdarzenie „canplay” czasami nie uruchamia się w przeglądarce Firefox, więc dodałem „loadmetadata”. Wstrzymuję również poprzedni film, jeśli jest jeden ...
źródło
canplay
anicanplaythrough
ilodedmetadata
musi zostać dodany (i usunięty później) do obsługi wideo :-(To jest moje rozwiązanie:
źródło
Używanie
<source />
tagów okazało się dla mnie trudne szczególnie w Chrome 14.0.835.202, chociaż działało dobrze dla mnie w FireFox. (Może to oznaczać mój brak wiedzy, ale i tak pomyślałem, że alternatywne rozwiązanie może być przydatne). Skończyło się więc na użyciu<video />
tagu i ustawieniu atrybutu src bezpośrednio w tagu wideo.canPlayVideo('<mime type>')
Funkcja została wykorzystana do określenia, czy przeglądarka specyficzny mógł odtworzyć film wejściowego. Poniższe działa w FireFox i Chrome.Nawiasem mówiąc, zarówno FireFox, jak i Chrome odtwarzają format „ogg”, chociaż Chrome zaleca „webm”. Sprawdzam, czy przeglądarka obsługuje "ogg" jako pierwsza tylko dlatego, że inne posty wspominały, że FireFox preferuje źródło ogg jako pierwsze (tj
<source src="..." type="video/ogg"/>
.). Ale nie testowałem (i bardzo wątpię), czy kolejność w kodzie ma jakiekolwiek znaczenie podczas ustawiania „src” w tagu wideo.HTML
JavaScript
źródło
Badam to od dłuższego czasu i próbuję zrobić to samo, więc mam nadzieję, że pomoże to komuś innemu. Używałem crossbrowsertesting.com i testowałem to dosłownie w prawie każdej przeglądarce znanej człowiekowi. Rozwiązanie, które obecnie posiadam, działa w przeglądarce Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8.
Dynamicznie zmieniające się źródła
Dynamiczna zmiana wideo jest bardzo trudna, a jeśli chcesz zastosować rezerwę Flash, musisz usunąć wideo z DOM / strony i dodać je ponownie, aby Flash zaktualizował się, ponieważ Flash nie rozpozna dynamicznych aktualizacji zmiennych Flash. Jeśli zamierzasz używać JavaScript do dynamicznej zmiany, całkowicie usunąłbym wszystkie
<source>
elementy i po prostu użyłemcanPlayType
do ustawieniasrc
w JavaScript ibreak
lubreturn
po pierwszym obsługiwanym typie wideo i nie zapomnij dynamicznie aktualizować flasha var mp4. Ponadto niektóre przeglądarki nie zarejestrują zmiany źródła, dopóki nie zadzwoniszvideo.load()
. Uważam, że problem z.load()
Tobą można rozwiązać, dzwoniąc po raz pierwszyvideo.pause()
. Usunięcie i dodanie elementów wideo może spowolnić przeglądarkę, ponieważ nadal buforuje usunięte wideo, ale istnieje obejście .Obsługa wielu przeglądarek
Jeśli chodzi o faktyczną część dla różnych przeglądarek, dotarłem również do Video For Everybody . Wypróbowałem już wtyczkę MediaelementJS Wordpress, która, jak się okazało, powodowała znacznie więcej problemów niż rozwiązała. Podejrzewam, że problemy były spowodowane wtyczką Wordpress, a nie biblioteką. Próbuję znaleźć coś, co działa bez JavaScript, jeśli to możliwe. Do tej pory wymyśliłem ten zwykły HTML:
Ważne uwagi :
<source>
ponieważ Mac OS Firefox kończy próbę odtworzenia wideo, jeśli napotka MP4 jako pierwszy<source>
.video/ogg
, a nievideo/ogv
.iphone.mp4
Plik jest dla iPhone 4+ który będzie tylko odtwarzać filmy, które są MPEG-4 H.264 Baseline 3 z wideo i dźwiękiem AAC. Najlepszym transkoderem, jaki znalazłem dla tego formatu, jest hamulec ręczny, użycie ustawień wstępnych iPhone'a i iPoda Touch będzie działać na iPhonie 4+, ale aby iPhone 3GS działał, musisz użyć ustawienia wstępnego iPoda, które ma znacznie niższą rozdzielczość, które dodałem jakovideo.iphone3g.mp4
.media
atrybutu w<source>
elementach, aby kierować reklamy na urządzenia mobilne z zapytaniami o media, ale obecnie starsze urządzenia Apple i Android nie obsługują go wystarczająco dobrze.Edycja :
źródło
Mam podobną aplikację internetową i wcale nie mam takiego problemu. Robię coś takiego:
wtedy kiedy chcę zmienić źródła, mam funkcję, która robi coś takiego:
Robię to, aby użytkownik mógł przejść przez listę odtwarzania, ale możesz sprawdzić userAgent, a następnie załadować w ten sposób odpowiedni plik. Próbowałem używać wielu tagów źródłowych, tak jak sugerowali wszyscy w internecie, ale okazało się, że manipulowanie atrybutem src pojedynczego tagu źródłowego jest znacznie czystsze i znacznie bardziej niezawodne. Powyższy kod został napisany z pamięci, więc mogłem przeoczyć niektóre szczegóły hte, ale ogólna idea polega na dynamicznej zmianie atrybutu src tagu źródłowego za pomocą javascript, jeśli jest to konieczne.
źródło
Spróbuj przenieść źródło OGG na górę. Zauważyłem, że Firefox czasami jest zdezorientowany i zatrzymuje gracza, gdy ten, w który chce grać, OGG, nie jest pierwszy.
Warte spróbowania.
źródło
Inny sposób, w jaki możesz to zrobić w Jquery.
HTML
Jquery
źródło
Korzystanie z JavaScript i jQuery:
źródło