HTML5 - Video

Links

https://www.html5rocks.com/de/tutorials/video/basics//

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 dafault). 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