Clip-Pfad funktioniert nicht auf Videos

Question

Ich habe versucht, ein Bild anzuzeigen und auf den Mauszeiger, ein Video würde beginnen, das Bild zu ersetzen, habe ich Javascript für die Hover-Funktionen verwendet.

Ich habe dies mit „Poster“ in der Video-Tag wie folgt aus: `

<div class="video"> 

    <video id="videotest" poster="images/img.jpg"> 
     <source src="images/bkg.mp4" type="video/mp4"></source> 
     Can't use videos here. 
    </video> 

</div> 

Allerdings würde ich das Video wie die gleiche Größe wie das Bild zu sein. Das Video ist 1280 * 720 und das Bild ist 677-611. Ich habe versucht, Clip-Pfad zu verwenden, um das Video anzupassen, aber es funktioniert nicht, hier meine CSS ist:

.video { 
    text-align:center; 
    margin:0 auto; 
    height:auto; 
    clip-path:inset(0 978px 611px 301px); 
    -webkit-clip-path:inset(0 978px 611px 301px); 
} 

Ich habe versucht, diese Art der Anwendung .video, #videotest und Quelle, hat es immer noch nicht funktionieren wie erwartet.

Ist es unmöglich Clip-Pfad mit Videos in HTML5 zu verwenden? Wenn ja, wie kann ich es tun, und wenn nicht, wie kann ich es zum Laufen bringen?

Ich werde mich ein wenig mehr erklären: Ich möchte nicht, dass das Bild die Größe ändert, behalten Proportionen oder nicht, ich möchte nur zum Beispiel einige Pixel links und rechts abgeschnitten, so das Bild im Poster ist genau so groß wie das Video, das es ersetzt. Der Clip-Pfad schien dem zu entsprechen, wonach ich suchte, aber ich kann es nicht zum Laufen bringen.

Danke.

Answer 1

Well Hier ist der Code in HTML Sie Plakat = „transparent.jpg“ im Video-Tag hinzuzufügen Hintergrund von CSS zu rufen und Vorspannung = „none“ das Plakat sichtbar zu machen, dann Sie sicher machen Video hinzufügen Erweiterung, die mit den Browsern in funktioniert Quelle Tag innerhalb der Video Tag Leider konnte ich nicht Erweiterung, die mit safari funktioniert Finger, Es könnte funktioniert, wenn Sie das Video als eine Erweiterung zu Ihrem Quellordner hinzufügen, aber ich nie versuchen

.video { 
 
     background:transparent url('http://dev.powered-by-haiku.co.uk/jw-html-config/posters/big-buck-bunny-preview.jpg') no-repeat; 
 
\t background-size: 677px 611px; 
 
\t text-align:center; 
 
\t margin: 0 auto; 
 
\t width: 677px; 
 
     height:611px; 
 
} 
 

 
video { 
 
      width: 677px; 
 
      height:611px; 
 
      object-fit:inherit; 
 
    \t }

 \t <div class="video"> 
 
    \t  <video controls="true" id="videotest" poster="transparent.jpg" preload="none"> 
 
    \t   <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"/> 
 
    \t \t  <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" /> 
 
    \t \t  <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" /> 
 
    \t  </video> 
 
    \t </div>