使用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;类型 - 或者 - 用海报属性中定义的jpeg替换视频？仅使用CSS而不触及html文档。

Answer 1

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

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

Answer 2

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

上面的代码会隐藏视频在打印页面。