Wie h.264 Video in voller Breite und reaktionsschnell auf Webseite einbetten

Question

Ich habe ein Video in h.264 Codec und möchte es in voller Breite auf meiner Webseite automatisch angezeigt werden. Bis jetzt habe ich mit einem swf in einen html5 Swiffy Container verwenden und CSS-Wrapper eine ansprechende Animation auf allen Geräte zu bekommen:

CSS

.wrapper { 
max-height: initial !important; 
    margin 0 !important; 
} 

HTML

<div class="wrapper"> 
<div class="h_iframe"> 
     <img class="ratio" src="http://www.geronimo-film.de/wp-content/uploads/Imagefilm-Köln.jpg"/> 
     <iframe src="http://www.geronimo-film.de/wp-content/flash/geronimo.html"></iframe> 
    </div> 
     </div> 

Das gleiche, was ich gerne mit meinem Video machen. Können Sie mir helfen?

Answer 1

Edit: Während der Diskussion mit dem Fragesteller zeigte sich, dass das Video selbst eine Grenze hat. Bei diesem Ansatz wird das Video zugeschnitten und auf eine Leinwand gezeichnet. Dies basiert auf dem Video des Fragestellers - Werte können für verschiedene Videos abweichen. Denken Sie auch daran, den Code zu bearbeiten, wenn Sie die Quellvideogröße ändern:

HTML:

<video controls autoplay loop id="video"> 
    <source src="http://www.geronimo-film.de/wp-content/flash/animation.mp4" type="video/mp4"> 
    <p>Your browser does not support H.264/MP4.</p> 
</video> 

<div class="wrapper"> 
    <canvas id="cropCvs" width="1800" height="700></canvas> 
</div> 

JS (basierend auf this tutorial):

function loop() { 
    var video = document.getElementById('video'); 
    ctx.drawImage(video, 10, 195, 1800, 700, 0, 0, 1800, 700); 
    setTimeout(loop, 1000/30); 
} 
var canvas = document.getElementById('cropCvs'); 
var ctx = canvas.getContext('2d'); 
loop(); 

CSS:

.wrapper { 
    margin 0 !important; 
} 

video { 
    display: none; 
} 

#cropCvs { 
    width: 100%; 
    display: block; 
} 

https://jsfiddle.net/w6g9ofkc/

---

Dies funktioniert, wenn das Video nicht wiedergegeben Grenze hat:

HTML:

<div class="wrapper"> 
    <video controls autoplay loop> 
    <source src="your_video_path.mp4" type="video/mp4"> 
    <p>Your browser does not support H.264/MP4.</p> 
    </video> 
</div> 

CSS

.wrapper { 
    margin 0 !important; 
} 

video{ 
    width: 100%; 
    object-fit: fill; /*can also be contain depending on the input data*/ 
} 

https://jsfiddle.net/xo7c2w9t/3