Wie man h.264-Videos in voller Breite und responsiv auf der Webseite einbettet - WordPress, HTML5, Video, Responsive-Design, Vollbild

Ich habe ein video in h.264 Codec und möchte, dass es auf meiner Webseite in voller Breite automatisch abgespielt wird. Bis jetzt verwende ich einen HTML5-Swiffy-Container mit einer SWF-Datei und einem CSS-Wrapper, um auf allen Geräten eine ansprechende Animation zu erhalten:

CSS

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

HTML

<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src="/images/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 mache ich gerne mit meinem Video. Können Sie mir helfen?

Antworten:

0 für die Antwort № 1

Bearbeiten: Während des Gesprächs mit dem Fragesteller zeigte sich, dass das Video selbst einen Rand 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 unterschiedlich sein. Denken Sie auch daran, den Code zu bearbeiten, wenn Sie die Größe des Quellvideos ä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 dieses 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 keinen gerenderten Rand 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

---