HTML5 - Video

Links

https://www.html5rocks.com/de/tutorials/video/basics//
HTML5 - Video Snippets

Custom Controls

Hide Controls

//For Firefox we have to handle it in JavaScript 
var vids = $("video"); 
$.each(vids, function(){
       this.controls = false; 
}); 
//Loop though all Video tags and set Controls as false

$("video").click(function() {
  //console.log(this); 
  if (this.paused) {
    this.play();
  } else {
    this.pause();
  }
});

video::-webkit-media-controls {
  display: none;
}

/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->

<video width="800" autoplay controls="false">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

Helfer

fitvids.js von Chris Coyer responsive videos für YouTube etc. (braucht man heute evtl. nicht mehr)

Probleme beheben

Autoplay Policy

Oft hängen Probleme mit Sicherheitsfeatures bei den Browsern zusammen. Z.B. spielen Safari und Firefox nicht den Ton mit Autoplay ab.

https://stackoverflow.com/questions/50279454/video-autoplay-doesnt-work-without-hard-refresh

Klick oder mousedown events funktionieren - man kann bei der ersten Userinteraktion über mousedown das Video starten und sofort wieder pausieren. Danach läßt sich der Player auch mit anderen events interaktiv steuern. Evtl. funktioniert das auch wenn zuvor ein anderes Element gesteuert wurde.

Ton-Probleme

Autoplay spielt Ton in einigen Browsern nur mit Usererlaubnis (nicht default). Also entweder autoplay ohne Ton oder manuell starten.

Auch die Interaktion über einen custom event wird teilweise (z.B. Safari) als autoplay interpretiert.

Server liefert nicht den richtigen Mime Type

"httpd.conf" genügt es, diese Zeilen hinzuzufügen:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Safari mobile & Background Video

Apple ändert immer wieder die Autoplay Policy. Autoplay funktioniert Stand 2022 nur wenn - autoplay und playsinline Attribute aktiv - kein LowPower Mode (evtl. funktionieren Videos unter 3MB -> Testen) - Videogröße kann eine Rolle spielen (s.o.) - evtl. spielen noch andere Faktoren wie umgebende Divs etc. eine Rolle.