フルサイズのh.264ビデオを埋め込む方法とウェブページに応答する方法

Question

ビデオはh.264コーデックで、私のウェブページで全画面で自動再生されます。今私は、任意のデバイス上で応答性のアニメーションを取得することとCSSラッパー内のSWFとHTML5 Swiffyでは、コンテナを使用していティル：

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> 

同じ事I私のビデオと関係があります。 私を助けることができますか？

Answer 1

編集：Askerとの議論の中で、ビデオ自体に境界があることが示されました。このアプローチは、ビデオを切り抜いてキャンバスに描画します。これは、質問者の動画に基づいています。値は動画によって異なる場合があります。

HTML：：（this tutorialに基づく）

<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