Question

我在h.264编解码器中有一个视频，并希望它在我的网页上以全宽度自动播放。现在，我正在使用一个带有swf的html5 swiffy容器和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

如何在网页上嵌入h.264视频全宽和响应

1 个答案: