Reproductor de video receptivo

Question

Necesito un reproductor de video para el sitio web de diseño receptivo que se desarrolla mediante el uso de bootstrap. Eso significa que cuando cambie el tamaño de la pantalla o la página en pantallas de diferentes tamaños, el reproductor debería ajustarse automáticamente a la pantalla.

Lo intenté con jwplayer y con flowplayer, pero no funcionó.

http://www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/24635/responsive-video-internet-explorer-100-widthheight

nota: El jugador debe ser capaz de reproducir los videos de youtube ....

¿Hay alguna forma de hacer jwplayer/flowplayer sensible?

Answer 1

Puede simplemente usar videos de YouTube en su sitio y usar el complemento FitVid.Js para hacerlo receptivo.

Answer 2

Estoy usando jQuery para cambiar el tamaño. #holder es su div donde se coloca la película (#videocontainer).
Estructura:

<div id="holder"> 
    <div id="videocontainer"></div> 
</div> 

Toma #holder tamaño y darle a #videocontainer. Funciona en ie9, ie8, ...

$(window).resize(function() { 
    var $width = $("#holder").width(); 
    var $height = $width/1.5; 
    jwplayer("videocontainer").setup({ 
    flashplayer: "jwplayer/player.swf", 
    file: "###.mp4",        
    width: $width, 
    height: $height, 
    image: "###.jpg" 
    }); 
}); 

Espero que ayude!

Answer 3

puede cambiar por simple estilo CSS

/* Video small screen */ 
.video { 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
} 

.video iframe, 
.video object, 
.video embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 

Answer 4

FitVids Proveedores: http://fitvidsjs.com/

Si desea hacer jwPlayer sensible, trate de añadir esto a su archivo CSS:

#video-jwplayer_wrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 format */ 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 
#video-jwplayer_wrapper iframe, #video-jwplayer_wrapper object, #video-jwplayer_wrapper embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

fuente : http://webdesignerwall.com/tutorials/css-elastic-videos

Al llamar a jwplayer, y ou también podría tener que establecer el ancho a 100%:

jwplayer("myElement").setup({ 
    width: 100% 
}); 

Answer 5

La forma más sencilla es utilizar Javascript

function sizing() { 
     $('#player').css('width', $('#container').outerWidth()); 
     $('#player').css('height',$('#player').outerWidth()/1.33); 
    } 

    $(document).ready(sizing); 
    $(window).resize(sizing); 

No se olvide de incluir la librería jQuery y para cambiar la relación de aspecto (1,33 es para 4: 3, 1,77 es para 16: 9).

Answer 6

mejor versión de la respuesta de Luka:

$(window).resize(function() { 
    var $width = $("#holder").width(); 
    var $height = $width/1.5; 
    jwplayer().resize($width,$height); 
}); 

usuario del cambiar el tamaño de función de la API JW jugador:

http://www.longtailvideo.com/support/jw-player/29411/resizing-the-player

Otra solución:

comprobar su documentación Responsive Design Soporte: http://www.longtailvideo.com/support/jw-player/32427/responsive-design-support

<div id="myElement"></div> 
<script> 
    jwplayer("myElement").setup({ 
     file: "/uploads/myVideo.mp4", 
     image: "/uploads/myPoster.jpg", 
     width: "100%", 
     aspectratio: "12:5" // Set your image ratio here 
    }); 
</script> 

Answer 7

Este trabajo bien para mí JW jugador va aquí

<script type="text/javascript"> 

          if($(window).width() <= 400){ 
           pl_width = 300; 
           pl_heith = 150; 
          }else if($(window).width() <= 600){ 
           pl_width = 500; 
           pl_heith = 250; 
          }else{ 
           pl_width = 700; 
           pl_heith = 350; 
          } 
          //alert(pl_width); 
          jwplayer("video_top").setup({ 

           flashplayer: "<?php echo $player_path; ?>", 

           file: "<?php echo $your_file; ?>", 
           controlbar: "bottom", 

           height:pl_heith, 

           width:pl_width 


          });