[HTML5] Video speelt niet af op Win Safari5 en mogelijk iPad

[Anoniem: 352206]

Mijn video's via HTML5 spelen op nagenoeg alle browsers op Windows, Ubuntu en Anrdoid af, maar onder Safari wil het maar niet lukken. De bedoeling is dat de video's op de iPad e.d. ook afspeelbaar zijn, maar die heb ik geen, dus is het lastig testen. Dat het niet op Win Safari werkt geeft mij het idee dat het ook niet op de iPad werkt.

Ik gebruik nu de volgende code. Het is een beetje aangevuld (volgens mij met formaten die niet eens ondersteund worden), maar dat is puur in een zoektocht geweest naar een alternatief.

HTML:

<video width="450" height="450" autoplay loop  onended="this.play()">
<source src="video/homefin.mp4" type="video/mp4" />
<source src="video/homefiniphone.mp4" type="video/mp4" />
<source src="video/homefin.m4v" type="video/mv4" />
<source src="video/homefin.webm" type="video/webm" />
<source src="video/homefin.ogv" type="video/ogv" />
<source src="video/homefin.ogg" type="video/ogg" />
 <object width="550" height="400" id="flash_fallback_1" class="vjs-flash-fallback">
<param name="movie" value="video/home.swf">
<embed src="video/home.swf" width="400" height="400">
</embed>
</object>
</video>

Na uren klooien met omzetten van filmpjes kreeg ik het idee dat het gewoon simpelweg niet mogelijk is. Dus ben ik gaan zoeken naar alternatieven. Deze bleken echter ook geen een van allen te werken. Ik heb als volgt geprobeerd:

- Youtube HTML5
- VideoJS
- JWplayer Pro
- SublimeVideo
- Projekktor
- FlareVideo
- Kaltura
- Etc.

Waar gaat het mis? Ligt het aan Windows? Als dat zo is, dan hoort Safari toch ook gewoon HTML5 video ondersteunen?

Dan nog een vraag die er los van staat. Bovenin zie je een hoop formaten oa m4v, ogv. Worden deze op bovenstaande manier ondersteund, of kan ik ze beter allemaal weglaten?

edit:

Net op een iPad kunnen testen. Het werkt, maar iOS blokkeert autoplay. Dat betekent dus dat animeren als ontwerp van een site gewoon niet meer mogelijk is. Ik heb gezocht naar workarounds, maar die werken niet meer op iOS4 en 5.

[ Voor 6% gewijzigd door BtM909 op 24-10-2011 11:25 ]

[Anoniem: 352206]

Klein schopje voor een soortgelijke, maar aanvullende vraag.

Op Firefox (en Android) werkt bovenstaande lokaal prima. Kijk ik het echter online, dan werkt het niet meer. Ik heb het op verschillende servers geprobeerd (Apache en Win), maar de video wordt niet getoond. Wel kan (bij FF) met de rechtermuisknop gekozen worden om de video (Webm) af te spelen. Maar dat gebeurd dus niet. Ik weet het na zo lang puzzelen niet meer.

[funkwurm]

Klein dingetje dat ik in je code zie:

code:

<source src="video/homefin.m4v" type="video/mv4" />

Moet waarschijnlijk beide m4v zijn denk ik? Geen mv4?

Als je zegt dat het lokaal werkt, dan bedoel je dat het werkt op je eigen apache server localhost? Ik heb eens gehad dat het hem zat in de hoofdletter-ongevoeligheid van Windows versus *nix.

Als het bestand homefin.MP4 heet en in je code staat homefin.mp4, dan kan een Windows installatie van Apache het bestand wel vinden omdat Windows in bestandsnamen niet (volledig) hoofdlettergevoelig is.

Upload je het echter naar een server die een *nix variant draait zoals Linux, dan kan de Apache die daar op draait het bestand niet vinden omdat *nix wel hoofdlettergevoelig is.

[Anoniem: 352206]

Bedankt funkwurm.

Hoofdletters is het helaas niet. MV4 was oplettend van je, maar bracht ook geen oplossing.

Als ik het HTML-bestand lokaal (windows XP) open, dan doe ik dat met de rechtermuisknop (Open with -> Firefox 7.01). Op de server ga ik simpelweg met Firefox naar de desbetreffende URL. Ik heb al verschillende servers geprobeerd, dus er wordt niet per ongeluk ergens iets geblokkeerd ofzo.

De WEBM is omgezet met diverse programma's oa Miro.

[Flowmo]

MediaElementJS al geprobeerd? Cross-browser HTML5 video met fallbacks naar Flash of WMP.

[TERW_DAN]

Anoniem: 352206 schreef op donderdag 20 oktober 2011 @ 12:20:
Dat het niet op Win Safari werkt geeft mij het idee dat het ook niet op de iPad werkt.

Nope, dat is in elk geval niet zo. Ik heb ook wel eens dit soort dingetjes voor ipads gemaakt, en dat werkte wel op een ios device, maar niet in Safari. Vreemd genoeg werkte het weer wel in Google Chrome. Dus die houd ik eerder aan als ik niet direct een iosdevice bij de hand heb dan Safari for Windows.

[Bosmonster]

Ik zou me sowieso niet zo druk maken om Safari voor Windows... Dat is een extreme edge-case met zo weinig gebruikers dat het niet boeiend is.

Safari voor Mac is een heel ander verhaal, maar dat geldt ook voor de video-support.

[sypie]

HTML5 video voor de iPad/iPod/iPhone vereist dat video voor deze apparaten als eerste genoemd worden in je rijtje met video-formaten.

Bron: de coce onder kopje 2.

[ Voor 10% gewijzigd door sypie op 28-01-2012 22:25 . Reden: Verduidelijkt. ]

[Aloys]

Ik gebruik de volgende code, wat lijkt te werken in vrijwel alle browsers (alleen een aantal gebruikt dus flash, maar het scheelt in bestanden exporteren).

HTML:

<video class="video-js" width="862" height="485" controls poster="video.jpg">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

<object id="flash_fallback_1" class="vjs-flash-fallback" width="852" height="485" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["video.jpg", {"url":"video.mp4","autoPlay":false,"autoBuffering":false}]}' />
<img src="video.jpg" width="862" height="485" alt="Poster Image" title="No video playback capabilities." />
</object>

Overigens moet je er wel op letten dat je een encoding gebruikt voor de mp4 die zowel op windows als osx werkt (bijvoorbeeld h264 met laac audio).

(Volgens mij zie ik nu dat mijn code de video-tag wel opent maar niet sluit? )

Edit: Deze code werkt dus ook op de iPhone / iPad.

[SvMp]

Anoniem: 352206 schreef op donderdag 20 oktober 2011 @ 12:20:

edit:

Net op een iPad kunnen testen. Het werkt, maar iOS blokkeert autoplay. Dat betekent dus dat animeren als ontwerp van een site gewoon niet meer mogelijk is. Ik heb gezocht naar workarounds, maar die werken niet meer op iOS4 en 5.

Als uitsluitend het attribuut "autoplay" wordt geblokkeerd, kun je bij het laden mbv. Javascript de video starten.