Riproduttore video reattivo

Question

Ho bisogno di un lettore video per il sito Web di layout reattivo che viene sviluppato utilizzando il bootstrap. Ciò significa che quando ridimensiono lo schermo o visualizzo la pagina in schermi di dimensioni diverse, il lettore dovrebbe essere adattato automaticamente allo schermo.

Avevo provato con jwplayer e flowplayer ma non ha funzionato.

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

nota: Il giocatore dovrebbe essere in grado di riprodurre i video di YouTube ....

Esiste un modo per rendere jwplayer/Flowplayer reattivo?

Answer 1

Puoi semplicemente utilizzare i video di YouTube nel tuo sito e utilizzare il plug-in FitVid.Js per renderlo reattivo.

Answer 2

Sto usando jQuery per ridimensionare. #holder è il div in cui è posizionato il film (#videocontainer).
Struttura:

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

Prende #holder dimensioni e dare a #videocontainer. Funziona in 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" 
    }); 
}); 

Spero che aiuti!

Answer 3

si può cambiare con un semplice stile 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 provare: http://fitvidsjs.com/

Se si vuole fare jwPlayer reattivo, prova ad aggiungere questo al vostro file 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%; 
} 

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

Quando si chiama jwplayer, y ou potrebbe anche essere necessario impostare la larghezza al 100%:

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

Answer 5

Il modo più semplice è quello di utilizzare javascript

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

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

Non dimenticate di includere libreria jQuery e per cambiare il rapporto di aspetto (1,33 è per 4: 3, 1,77 è per 16: 9).

Answer 6

versione migliore di risposta di Luka:

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

utente del ridimensionare funzione dal API JW Player:

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

Un'altra soluzione:

Controllare le loro Responsive documentazione Supporto alla progettazione: 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

Questo lavoro bene per me JW Player goes here

<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 


          });