Sto utilizzando un tag video HTML5 nel mio sito web. Quel video sta giocando perfettamente con tutti i browser, ma in IE9 mostra un bordo nero (estensione nera). È come quello in genere che i lettori video mostreranno un'estensione di colore nero su entrambi i lati quando la dimensione del lettore è maggiore della dimensione del video.Il video HTML5 in IE9 mostra un bordo nero su entrambi i lati
Ho riscontrato questo problema in precedenza, in genere il problema si trova all'interno del video stesso. Quando codifichi il tuo video prova a far corrispondere le impostazioni il più vicino possibile a ciò che userai nel tuo tag. Non dovrebbe essere un ostacolo per te, dopo aver ispezionato il video un po 'più vicino dovresti vedere una discrepanza.
Questa è la soluzione che usiamo.
Per i video, viene visualizzato HTML5 per impostazione predefinita con supporto nella memoria CDN. Abbiamo anche ripiegato per Flash e poi ricadono per non-flash. Quindi prima controlla HTML5, poi fallisce il flash e poi non contiene contenuti per il supporto non flash che indica un messaggio sull'utente per l'aggiornamento della macchina Fred Flintstones, ma offriamo anche un'alternativa in modo che possano uscire da BedRock!
<style type="text/css">
.videobox{position:relative;width:300px;500px}
#video_box_id_css, .video_box_class{border:0px !important}
/* BACKGROUND SHOULD BE PAGE BACKGROUND */
.left{position:absolute;width:3px;height:500px;left:1px;z-index:10;background:#fff}
.right{position:absolute;width:3px;height:500px;right:1px;z-index:10;background:#fff}
</style>
<div class="videobox">
<video id="video_box_id_css" class="video_box_class" autoplay loop width="300" height="500">
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_VP8.webm" type='video/webm'/>
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_libtheora.ogv" type='video/ogg'/>
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_x264.mp4" type='video/mp4'/>
<!--
ALTERNATIVE CONTENT LIKE SWF
VIDEOS FOR NON HTML5 BROWSER
//-->
</video>
<div class="left"></div>
<div class="right"></div>
</div>
Il nostro codice è al di sopra (rimosso il flash quindi è più leggibile). Una cosa da notare è aggiungere una colonna div left e right che supera i bordi del video nero. È possibile modificare questi e anche aggiungere un fondo e superiore se necessario.
Il bordo verde è in realtà il div bianco di opacità in modo da poter sostenere l'effetto. Potrebbe essere hacky ma è la soluzione migliore che abbiamo trovato.
Il risultato è molto meglio come potete vedere qui sotto:
Quali sono le dimensioni effettive del video e le dimensioni del contenitore? –
In realtà ho convertito le dimensioni del video in 592 X 280 e anche il contenitore ha le stesse dimensioni. – Sakeer
sì, il fondo del video è allineato correttamente con la parte inferiore del lettore. E ora ho sostituito il video con un altro video fittizio, che suona con la larghezza e l'altezza corrette. Penso che il problema sia con il mio video. – Sakeer