h.264ビデオをフルサイズで埋め込み、ウェブページに反応させる方法 - wordpress、html5、video、responsive-design、fullscreen

私はhにビデオがあります。264コーデックで、自分のWebページに全幅で自動再生されるようにします。今でも私は、あらゆるデバイスでレスポンシブアニメーションを取得するために、その中にswfとcssラッパーを含むhtml5 swiffyコンテナを使用しています。

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>

私のビデオでも同じことが好きです。 手伝って頂けますか？

回答：

回答№1は0

編集する 質問者との話し合いの間に、ビデオ自体に境界があることが示されました。この方法でビデオを切り取り、それをキャンバスに描画します。これは質問者のビデオに基づいています - 値はビデオによって異なる場合があります。ソースビデオのサイズを変更した場合は、コードを編集することにも注意してください。

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（に基づいて このチュートリアル）：

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/

---

ビデオにレンダリングされた境界線がない場合、これは機能します。

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

---