Discussion :

[LeonCosnyd]

Bonjour,

Sur l'un de mes sites internet j'ai utilisé le framework VideoJS pour afficher des vidéos (lecteur video HTML5). Pour celui-ci il existe un plugin videojs-resolution-switcher qui permet d'ajouter plusieurs "source" à la balise <video> afin de pouvoir changer la résolution de la vidéo en fonction du débit du visiteur. Cela fonctionne bien "manuellement" quand le visiteur clique sur le bouton pour changer la résolution. Maintenant j'aimerai savoir s'il est possible de réaliser un système comme sur youtube avec l'option "auto" pour le choix de la résolution. Cela afin de changer automatiquement de résolution en fonction du débit du visiteur.

Savez-vous s'il existe un système ou un algorithme déjà publié sur internet pour VideoJS ? ou simplement pour la balise <video> d'html5 ?

Merci par avance.

[bytecode]

Salut, je sais que la réponse est tardive mais cela pourras surement en aider d'autres comme moi.

J'ai voulus moi aussi adapter le lecteur videojs en mode résolution automatique en responsive design et j'ai trouver la solution sur stackoverflow.com

j'ai regarder aussi videojs-resolution-switcher mais c'est mieux en auto

Le Css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.video-js-responsive-container.vjs-hd {
    padding-top: 56.25%;
}
.video-js-responsive-container.vjs-sd {
    padding-top: 75%;
}
.video-js-responsive-container {
    width: 100%;
    position: relative;
}
.video-js-responsive-container .video-js {
    height: 100% !important; 
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

et dans une div

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="video-js-responsive-container vjs-hd">
</div>

ça fonctionne parfaitement.

Pour ceux qui le souhaite vous pouvez voir et récupérer les sources sur http://motogp-streaming.hostkda.com/

[LeonCosnyd]

Bonjour et merci pour ce partage.

Avec ce code je comprend bien de le fonctionnement du responsive design qui adapte les dimensions du lecteur.

Par contre, dis moi si je me trompe, cela ne change en rien la source du lecteur vidéo. Je veux dire par cela que si on lance une vidéo HD (par exemple videoHD.mp4 pesant 100Mo) et que l'on s’aperçoit qu'on est en buffering trop souvent car le débit internet de l'internaute est insuffisant pour charger correctement la vidéo, j'aimerai switcher automatiquement sur une autre source (par exemple videoSD.mp4 à 20Mo).

[bytecode]

Bonjour,

Je n'ai pas été confronté au problème de buffering ce que j'ai mis en ligne c'est du direct mais au début j'avais mis l'option preload="auto" sur pc pas de soucis sur smartphone Android c’était saccadé.

en faite c'est au niveau de la vitesse de lecture du cache en cas de mauvaise connexion il faut je pense jouer sur la précharge de la vidéo et sont tampon mais je ne suis pas assez calé pour te donner la meilleurs solution.

il existe HandBrake que j'ai tester et qui permet de réduire sensiblement le poids d'une vidéo sans altérer sa qualité c'est indispensable de l'utiliser (tester) pour toutes vidéos mise en ligne.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
var Player = videojs('play3', {
"controls": true, 
"autoplay": false, 
"preload": "auto" ,
"poster": "http://vjs.zencdn.net/v/oceans.png",
"width": 960,
"height": 400,
plugins: {
videoJsResolutionSwitcher: {
default: 'low', // Default resolution [{Number}, 'low', 'high'],
dynamicLabel: true
}
}
}, 
function(){
var player = this;
window.player = player
player.updateSrc([
{ src: 'https://vjs.zencdn.net/v/oceans.mp4?SD', type: 'video/mp4', label:'SD', res:'360'},
{ src: 'https://vjs.zencdn.net/v/oceans.mp4?HD', type: 'video/mp4', label:'HD', res:'1080'},
{ src: 'https://vjs.zencdn.net/v/oceans.mp4?4K', type: 'video/mp4', label:'4K', res:'2160'}
])
player.on('resolutionchange', function(){
console.info('Source changed to %s', player.src())
})
})

Peut être qu'il suffit de mettre plusieurs source de vidéos HD et de laisser l'utilisateur choisir la meilleurs source...

[ABCIWEB]

Sur le principe tu devrais pouvoir charger le fichier sd, hd ou 4k en fonction de la largeur d'écran disponible. Par exemple en utilisant ta fonction javascript pour charger tel ou tel fichier suivant la valeur d'un css qui change en fonction des media CSS.

Cela peut-être un première approche pour le fichier qui est chargé par défaut. Libre à l'utilisateur ensuite de changer de source suivant les capacités de son smartphone ou du débit du réseau.