HTML HTML5 Video

[Teisi]

servus,

ich hab ein problem mit html5 video tag, und zwar möchte ich das das video automatisch startet <- funktioniert leider nur teilweise, wann und warum es dann funktioniert bzw. nicht ist mir nicht nachvollziehbar

zweites problem, der playbutton des control panels reagiert nicht auf touch...

ich hoffe ihr könnt mir helfen, danke schonmal...

<video class="vid" autoplay="autoplay" controls="controls" loop="loop" width="100%" height="100%">
	<!-- MP4 must be first for iPad! -->
	<source src="../movie/living_art_h264_k.mp4" type="video/mp4" /><!-- Safari / iOS video    -->
	<!-- <source src="../movie/living_art_h264_k.ogv" type='video/ogg codecs=theora, vorbis' /><!-- Firefox / Opera / Chrome10 -->
	<source src="../movie/living_art_h264_k.webm" type='video/webm; codecs=vp8,vorbis' />
	<!-- fallback to Flash: -->
	<object width="100%" height="100%" type="application/x-shockwave-flash" data="../movie/living_art_h264_k.mp4">
	       <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
	       <param name="movie" value="../movie/living_art_h264_k.mp4" />
	       <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=../movie/living_art_h264_k.mp4" />
	       <!-- fallback image. note the title field below, put the title of the video there -->
               <img src="../images/news/jubilaeumspreis_briefpapier_august.jpg" title="Jubiläumspreis auf Briefpapierdruck" alt="Jubiläumspreis auf Briefpapierdruck" />
        </object>
</video>

 

[Daaron]

Warum es spielt (oder nicht spielt) kannst du nur herausfinden, indem du dich in die JS-API einklinkst und die Events abhörst. Eigentlich sollte es immer spielen.
Was die Player Controls angeht: Die standardmäßigen HTML5-Playercontrols sind funktionell, aber von sehr fragwürdiger Optik und bieten quasi gar keine Gestaltungsmöglichkeiten. Schmeiß sie nach Möglichkeit in die Tonne und steuere den Player über JS.

 

[Teisi]

hmm, naja eigentlich möchte ich gar keine controls anzeigen, (is n 2 sekunden video ohne ton...) muss ich aber im moment weil das video ja in den browsern chrome, firefox, safarie IE11 nicht automatisch abgespielt wird.

einige zeit später...

jetzt hab ich es so gelöst (danke für den tipp mit der api):

<script type="text/javascript">var myVideo=document.getElementById("video1");myVideo.play();</script>

direkt nach dem video tag eingefügt. jetzt spielts auch "quasi" automatisch ab. warum die zusatz eigenschaft "autoplay" nicht geht, ist mir nach wie vor ein rätsel. da hat wohl wieder einer gepfuscht...



desweiteren verträgt sich anscheinend die api nicht so gut mit jquery, oder es hat ein problem damit in eine externe datei eingebunden zu werden. denn egal wo ichs in der externen js datei geschrieben habe, ging es nicht:
weder vor (passiert nix), noch danach (passiert nix), noch mitten drin (fehler: "play" ist keine function):

;(function($) {
    $(window).load(function() {
       ...
    });
})(jQuery);

 

[Speedy.]

Das Attribut "autoplay" funktioniert bei mir in allen genannten Browsern sehr zuverlässig. Warum es bei dir nicht geht, ist mir ein Rätsel. Funkt vielleicht ein Script dazwischen? Testweise könntest du alles JavaScript entfernen und schauen, ob das Video dann automatisch abgespielt wird.

jQuery hat meines Wissens nach noch keinen Support für die Video-API, dass sollte aber kein Problem sein, da du die Funktionen ja trotzdem aufrufen kannst. Ansonsten kannst du es ja mit reinem JavaScript versuchen und darauf achten, dass der DOM fertig geladen ist:

window.addEventListener('DOMContentLoaded', function() {
  document.getElementById("video").play();
}, false);

 

[WhiteShark]

Man kann das Element aber trotzdem mit jQuery selektieren, man muss dann eben das Element direkt ansprechen, etwa so

$('#video')[0].play();

Oder wenn man mehrere Videos hat und per Klasse selektieren will:

$('.video').each( function( index, element ) {
  element.play();
});

Warum autoplay nicht funktioniert ist eigentlich logisch. Autoplay ist ein boolean.
Daher entweder nur autoplay ohne Wert, oder auf true setzen:

<video autoplay>...</video>
<video autoplay="true">...</video>

 

[Daaron]

So logisch ist das mit dem Autoplay nicht. Der W3C-Validator (der muss es ja wissen) sagt mir z.B. nix böses zu autoplay="autoplay". Tatsächlich ist autoplay="true" falsch.

Line 7, Column 33: Bad value true for attribute autoplay on element video.
<video src="bla" autoplay="true"></video>

Auch die W3C-Definition ist da sehr eindeutig. http://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#boolean-attributes

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

 

[Teisi]

ich meine gelesen zu haben, das autoplay="autoplay" die "strict" variante von nur "autoplay" sein soll...
naja es funktioniert weder als autoplay noch als autoplay="autoplay"...

ich habs jetzt übrigends in nen carousel eingebaut, wenn es jetzt aus den sichtbaren elementen rausläuft und verschwunden ist, dabei wird die position im dom geändert, hört das video auf zu spielen. und ich muss extra wieder auf die play() function zurückgreifen... naja im moment hält sich die begeisterung für das element in grenzen.

 

[Daaron]

ich meine gelesen zu haben, das autoplay="autoplay" die "strict" variante von nur "autoplay" sein soll...

Korrekt. Ein hypothetisches XHTML5 würde autoplay="autoplay" benötigen. HTML5 selbst akzeptiert autoplay oder autoplay="autoplay". Evtl. geht sogar noch autoplay="", aber darauf würde ich nicht setzen. Definitiv FALSCH, egal wie man es dreht, wäre autoplay="true", autoplay="1",...

ich habs jetzt übrigends in nen carousel eingebaut, wenn es jetzt aus den sichtbaren elementen rausläuft und verschwunden ist, dabei wird die position im dom geändert, hört das video auf zu spielen. und ich muss extra wieder auf die play() function zurückgreifen... naja im moment hält sich die begeisterung für das element in grenzen.

Logisch. Wenn das Carousel den DOM manipuliert und das Element zerstört/neu erschafft, dann verliert es natürlicha uch seinen "Play"-Status. Hier müsste man ein Carousel nehmen, dass von audio/video-Elementen erst einmal den aktuellen Status kopiert (Spielt es? Wie laut? Welche Position im Track?) und die im neuen Element direkt einfügen.

 

[Teisi]

ja nur sollte ja theoretisch "autoplay" gehen, auch wenns neu erschaffen wird, oder nicht =?

 

[Daaron]

Da bei dir Autoplay allgemein buggt wird es wohl daran liegen. Wie wärs damit: Du machst mal einen jsFiddle fertig, bei dem wir uns die Autoplay-Geschichte angucken können. Evtl. machste noch n Button, der bei Click n neues <video autoplay> erzeugt.
Evtl. liegts ja nur an dir...

 

[WhiteShark]

Hast du vielleicht irgendwelche Browser Plugins drauf die den autostart verhindern?

 

[Teisi]

@Daaron
wenn ich dazu komme, mach ich das... kann ich aber nicht versprechen.

@WhiteShark
wäre zwar möglich auf meinem rechner daheim, da ich meine seiten aber grundsätzlich auf diversen endgeräten (smartphones, tablets, mac, pc... etc.) teste, scheidet das wohl aus...

 

[JP-M]

Funktioniert das Autoplay bei dir in allen Browsern nicht oder nur in einem bestimmten? Bei Chrome funktioniert die autoplay Option u.a. auch dann nicht wenn der Server, von dem das Video geladen werden soll, die Range Requests im HTTP Header nicht richtig verarbeitet / beantwortet.

 

[Teisi]

@JP-M
läuft weder im chrome noch im firefox, safari oder ie9-11...
wie gesagt sporadisch schon, als erst dachte ich es wäre ein cache fehler, das konnte ich aber explizit durch die verwendung verschiedener rechner, auf deren die seite noch nie aufgerufen wurde, ausschließen...
mit den par zeilen js direkt unter dem video tag läuft es jetzt überall so wie es soll...

wie gesagt wenn ich dazu komme, mach ich wie von Darron empfohlen ein projekt auf und poste es hier.... da es aber auch so jetzt läuft muss ich mich erst noch um ein par andere dinge kümmern.... trotzdem danke für eure antworten... vielleicht komme ich ja noch drauf...