Clip-path non funziona sui video

Question

Ho cercato di visualizzare un'immagine e al passaggio del mouse, un video avrebbe iniziato a sostituire l'immagine, ho usato Javascript per le funzioni di hover.

ho fatto questo "manifesto" utilizzando nel tag video come questo: `

<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> 

Tuttavia, vorrei il video di essere le stesse dimensioni dell'immagine. Il video è 1280 * 720 e l'immagine è 677-611. Ho cercato di usare clip-percorso per adattare il video, ma non funziona, ecco la mia CSS:

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

Ho cercato di applicare questo stile al .video, #videotest e la fonte, ancora non ha fatto lavorare come previsto

È impossibile utilizzare il percorso clip con video in HTML5? Se è così, come posso farlo, e se no, come posso farlo funzionare?

Mi spiegherò un po 'di più: Non voglio ridimensionare l'immagine, mantenendo le proporzioni o meno, vorrei solo tagliare, ad esempio, alcuni pixel a destra e sinistra, quindi l'immagine in poster ha esattamente le stesse dimensioni del video che lo sostituisce. Clip-path sembrava corrispondere a quello che stavo cercando, ma non riesco a farlo funzionare.

Grazie.

Answer 1

Bene Ecco il codice in HTML si aggiunge il tag video manifesto = "transparent.jpg" chiamarlo da sfondo css e precarico = "none" per rendere visibile il poster allora hai la certezza di aggiungi l'estensione del video che funziona con i browser nel tag di origine nel tag video tag Sfortunatamente non ho potuto estendere l'estensione che funziona con Safari, Potrebbe funzionare se aggiungi il video come un'estensione alla tua cartella sorgente ma non lo faccio mai prova

.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>