HTML Video Inside Contenedor Controles incorrectos Tamaño en WebKit -- html campo con google-chrome campo con video campo con controls camp Relacionados El problema

HTML video inside container wrong controls size in webkit


1
vote

problema

Español

En la relación con esta pregunta: Los controles de video tienen un tamaño incorrecto en Safari iOS

mismo problema con Chrome (actualmente usando la versión 62 para Mac), que, de hecho, muestra los resultados diferentes (incorrectos) si aplica la transformación al contenedor o el video en sí.

Código de muestra y FIDDLE:

  <style> #div1, #vid2 {   transform:scale(0.25, 0.25); } </style>  <div id="div1"> <video width="560" height="322" id="vid1" src="http://techslides.com/demos/sample-videos/small.mp4" controls ></video> </div>  <div id="div2"> <video width="560" height="322" id="vid2" src="http://techslides.com/demos/sample-videos/small.mp4" controls ></video> </div>   

https://jsfiddle.net/julifos/z45xz63w/38/

Parece ser lo mismo para videos MP4 y WEBM. Cualquier ayuda sería apreciada!

Una curiosidad: el tamaño de los controles parece depender del tamaño de la ventana del navegador (ejecute el mismo violín con diferentes tamaños de ventana).

muestra 1 muestra 2

Original en ingles

In relationship with this question: Video controls have wrong size in Safari iOS

Same issue with Chrome (currently using version 62 for Mac), which in fact shows different (wrong) results if you apply the transformation to the container or the video itself.

Sample code and fiddle:

<style> #div1, #vid2 {   transform:scale(0.25, 0.25); } </style>  <div id="div1"> <video width="560" height="322" id="vid1" src="http://techslides.com/demos/sample-videos/small.mp4" controls ></video> </div>  <div id="div2"> <video width="560" height="322" id="vid2" src="http://techslides.com/demos/sample-videos/small.mp4" controls ></video> </div> 

https://jsfiddle.net/julifos/z45xz63w/38/

Seems to be the same for mp4 and webm videos. Any help would be appreciated!

A curiosity: the size of the controls seems to depend on the size of the browser window (run the same fiddle with different window sizes).

Sample 1 Sample 2

           

Lista de respuestas

0
 
vote

Configuración de la dimensión del ancho y dejando el espacio en blanco de la dimensión de altura solucionará este problema. Sucede porque si establece las dos dimensiones, y las dimensiones de video reales no son las mismas, se escalará en la proporción apropiada más cercana utilizando una dimensión, dejando así los márgenes en blanco en la única una dimensión del reproductor de video. El video puede estar centrado en la horizontal o en la vertical con espacio en blanco a cada lado.

de: barra de control más ancha que el video en HTML5 + CSS

 

Setting up the dimension of the width and leaving the height dimension blank will fix this issue. It happens because If you set the two dimensions, and the actual video dimensions are not the same, it will scale to to the closest appropriate proportion using one dimension, thereby leaving blank margins at the only one dimension of the video player. The video may be centered either on the horizontal or on the vertical with blank space on either side.

from : Control bar wider than video in html5 + css

 
 
 
 

Relacionados problema

-1  Pregunta de SharePoint sobre UserControl en WebPart  ( Sharepoint question about usercontrol on webpart ) 
Añadido USERCONTROL WEBPART en el sitio y obtuve este error: Error CS0117: 'ASP._60B6AD6D_6998_4413_8d26_f07e4e897ce8_1417418301' no contiene una definición...

3  Opiniones sobre controles comerciales de MVC  ( Opinions on commercial mvc controls ) 
Estamos interesados ​​en las opiniones de las comunidades sobre los controles comerciales de MVC, es decir, Telerik, SyncFusion. Que es rápido, fácil de usar,...

3  C # Obtenga eventos de un control dentro de un control personalizado  ( C sharp get events of a control inside a custom control ) 
Tengo un cuadro de lista dentro de un control personalizado. Utilizo este control personalizado en un formulario. Me gustaría poder obtener el evento cambiado...

0  Control de aplicaciones web Flex equivalente a mx.controls.html  ( Flex web application control equivalent to mx controls html ) 
AS FLEX WEB APLICACIONES NO TIENE EL CONTROL MX.CONTROLS.HTML (solo para aplicaciones aéreas), a cualquier persona conozca un control personalizado de FOSS qu...

0  ¿Cómo cambiar la identificación del control dentro del repetidor dinámicamente (C # ASP.NET)?  ( How to change the id of control within the repeater dynamically c asp net ) 
Tengo linkbutton dentro del repetidor. El ID del repetidor es " lnkbtn ". Tengo un DataTable que contiene una columna llamada " Questionnumber ". El " Que...

0  Publicar código fuente al blog - Control con Barra de desplazamiento y mantener el formato  ( Posting source code to blog control with scrollbar keep formatting ) 
Estamos buscando un control que podamos usar en nuestros blogs de WordPress que mantendrán nuestro formato de código fuente y proporcionar barras de desplazam...

3  Control de giro en Delphi [CERRADO]  ( Spin control in delphi ) 
cerrado. Esta pregunta no cumple con pautas de desbordamiento de pila . Actualmente no está aceptando respuestas. ...

11  ¿Cómo congelar el encabezado de GridView?  ( How to freeze gridview header ) 
Como en un título, ¿Alguien sabe cómo congelar el encabezado de GridView en ASP.NET? ...

3  Cuando es el momento adecuado para decir: "¡Ahora necesito crear un control de usuario!"  ( When is the right time to say now i need to create a user control ) 
¿Cuándo consideras crear un control de usuario en .NET? ¿Tiene algún criterio básico para excluir su código de la página e introducir un nuevo control de usua...

1  Uso de imágenes de línea personalizadas en ASP.NET TreeView Control  ( Using customized line images in asp net treeview control ) 
Cuando uso mis imágenes de línea propia para personalizar el aspecto del control de TreeView, parece haber un problema de representación en la fila de la tabl...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos