Lecteur vidéo réactif

Question

J'ai besoin d'un lecteur vidéo pour site Web de mise en page réactif qui est développé en utilisant bootstrap. Cela signifie que lorsque je redimensionne l'écran ou que je consulte la page sur des écrans de tailles différentes, le lecteur doit être automatiquement ajusté à l'écran.

J'avais essayé avec jwplayer et flowplayer mais cela n'a pas fonctionné.

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

Note: Le joueur doit être capable de lire les vidéos youtube ....

Y at-il de toute façon de faire jwplayer/flowplayer réactif?

Answer 1

Vous pouvez simplement utiliser des vidéos YouTube sur votre site et utiliser le plugin FitVid.Js pour le rendre réactif. J'utilise jQuery pour le redimensionnement.

Answer 2

#holder est votre div où le film est positionné (#videocontainer).
Structure:

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

Il faut #holder la taille et le donner à #videocontainer. Cela fonctionne 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" 
    }); 
}); 

Espérons que ça aide!

Answer 3

vous pouvez changer par un simple style 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

Essayez des FitVids: http://fitvidsjs.com/

Si vous voulez faire jwPlayer répondre, essayez d'ajouter ceci à votre fichier 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%; 
} 

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

Lorsque vous appelez jwplayer, y ous peut également être nécessaire de définir la largeur à 100%:

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

Answer 5

La façon la plus simple est d'utiliser le javascript

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

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

Ne pas oublier d'inclure la bibliothèque jquery et de modifier la ration d'aspect (1.33 est pour 4: 3, 1,77 est pour 16: 9).

Answer 6

meilleure version de la réponse de Luka:

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

utilisateur la fonction Redimensionner de l'API JW Player:

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

Une autre solution:

Consultez la documentation de support Responsive Design: 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

Ce travail bien pour moi JW Player va ici

<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 


          });