Как вставлять h.264 видео полную ширину и реагировать на веб-странице

Question

У меня есть видео в коде h.264 и вы хотите, чтобы он был автоматически загружен на полную ширину на моей веб-странице. Тиль Теперь я использую html5 Swiffy контейнер с SWF в нем и CSS обертку, чтобы получить ответную анимацию на любых устройствах:

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> 

То же самое я как сделать с моим видео. Вы можете мне помочь?

Answer 1

Редактировать: Во время обсуждения с аськой оно показало, что у самого видео есть граница. Этот подход обрезает видео и рисует его на холсте. Это основано на видеообъектива - значения могут отличаться для разных видео. Кроме того, имейте в виду, чтобы изменить код, если вы измените размер источника видео:

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 (на основе 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/

---

Это работает, если видео не имеет вынесенное границу:

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