J'ai besoin d'un lecteur vidéo pour un site Web de mise en page réactif qui est développé en utilisant Bootstrap. Cela signifie que lorsque je réalise à nouveau l'écran ou affichage de la page dans des écrans de taille différentes, le lecteur doit être automatiquement adapté à l'écran.
J'avais essayé avec JWPlayer et FlowPlayer, mais cela n'a pas fonctionné.
Remarque: le joueur doit pouvoir jouer aux vidéos YouTube ....
existe-t-il de toute façon pour rendre JWPlayer / FlowPlayer réactif?
7 Réponses :
Vous pouvez simplement utiliser des vidéos YouTube sur votre site et utiliser le plugin fitvid.js pour le rendre réactif.
La même réponse va sans distinction de quel lecteur vidéo que vous souhaitez utiliser. Il vous suffit de mettre à jour les options pour inclure votre nom de lecteur vidéo particulier.
J'utilise jQuery pour le redimensionnement. # Le titulaire code> est votre div dans lequel le film est positionné ( #videocontainer code>).
STRUCTURE: $(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"
});
});
Vous pouvez modifier le style CSS simple
/* 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%;
}
tryvids: http://fitvidsjs.com/
Si vous souhaitez faire des réceptives JWPlayer, essayez Ajout de ceci à votre fichier CSS: p> Source: http://webdesignerwall.com/tatudials/css-elastic-videos p> Lorsque vous appelez JWPlayer, vous devez également définir la largeur à 100%: P> jwplayer("myElement").setup({
width: 100%
});
Le moyen le plus simple consiste à utiliser JavaScript N'oubliez pas d'inclure la bibliothèque de JQuery et de modifier la ration de l'aspect (1,33 est pour 4: 3, 1,77 est pour 16: 9).
user the http://www.longtailvideo.com/support/jw- Joueur / 29411 / Redimensionnement-le-joueur une autre solution : Vérifiez leur documentation de support de conception réactive: http://www.longtailvideo.com/support/jw-player/32427/responsive-design -support
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
});