使用CSS将视频替换为静止图像

Question

我正在为包含视频文件的HTML5文档创建print-css文件。表格中的视频标签如下所示：

<td class="dataKeyframe">
  <video width="180" height="135" controls="controls" preload="none"
         poster="../images/sequenzbild001.jpg">
     <source type="video/mp4" src="../videos/mp4/E1.mp4"></source>
  </video>
</td>

使用Chrome打印会导致在视频海报顶部打印控件叠加层。

问题：
是否可以将控件设置为display:none; - 或 - 使用poster属性中定义的jpeg替换视频？仅使用CSS而不是触及html文档。

Answer 1

您想要改变的是元素的 Shadow DOM 。有一些浏览器生成的子树元素可以依赖浏览器显示所有这些控件，面板和按钮。这些不会在源代码中显示（至少不在chrome中），但您仍然可以使用它们。

@media print {
    video::-webkit-media-controls {
        display: none;
    }
}

Answer 2

//css
@media print {
  video{
 display:none;
}
}

以上代码将隐藏打印页面中的视频。