Estoy usando una etiqueta de video HTML5 en mi sitio web. Ese video está funcionando perfectamente con todos los navegadores, pero en IE9 muestra un borde negro (extensión negra). Es como el que generalmente los reproductores de video mostrarán una extensión de color negro en ambos lados cuando el tamaño del reproductor es más que el tamaño del video.video HTML5 en IE9 muestra un borde negro en ambos lados
He tenido este problema antes, por lo general, el problema radica en el video en sí. Cuando codifica su video, intente hacer coincidir la configuración lo más fielmente posible con la que usará en su etiqueta. No debería ser un obstáculo para usted, una vez que inspeccione el video un poco más cerca debería ver una discrepancia.
Esta es la solución que usamos.
Para video, mostramos HTML5 respaldado por defecto en almacenamiento CDN. También tenemos un retroceso para Flash y luego retroceso para no flash. Primero revisa HTML5, luego falla y luego no hay contenido para soporte no flash que indica algún mensaje sobre el usuario para actualizar su máquina Fred Flintstones, ¡también ofrecemos una alternativa para que puedan salir de 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>
Nuestro código está por encima (eliminado el flash por lo que es más fácil de leer). Una cosa a tener en cuenta es que agregamos una columna div izquierda y derecha que pasa por los bordes negros del video. Puede ajustar estos e incluso agregar una parte inferior y superior si es necesario.
El borde verde es en realidad el div blanca en la opacidad para que pueda sentarse el efecto. Puede ser raro pero es la mejor solución que encontramos.
El resultado es mucho mejor como se puede ver a continuación:
¿Cuáles son las dimensiones reales del vídeo y dimensiones del contenedor? –
En realidad, he convertido las dimensiones del video a 592 X 280 y el contenedor también tiene las mismas dimensiones. – Sakeer
sí, la parte inferior del video está alineada correctamente con la parte inferior del reproductor. Y ahora he reemplazado el video con otro video falso, que juega con el ancho y la altura correctos. Creo que el problema es con mi video. – Sakeer