Discussion :

[cheboy]

Bonjour.

Ma fonction loadMedia suivante (issue de mon script JavaScript) me permet normalement d'ouvrir des images en Pop-up via la librairie Masonry-JS.

Code :

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
function loadMedia(src, className) {
 
	var video = $("<img>");
 
	video.on("load", function() {
		$("." + className + " a").append(video);
 
		clearTimeout(timer);
 
		timer = setTimeout(function() {
			$(".imageResults").masonry();
		}, 500);
 
	});
 
	video.on("error", function() {
 
		$("." + className).remove();
 
		$.post("ajax/setBroken.php", {src: src});
 
	});
 
	video.attr("src", src);
 
}

Le JavaScript du Lecteur "Plyr-JS" est le suivant:

Code :

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

1
2
3
4
5
6
// Change the second argument to your options:
// https://github.com/sampotts/plyr/#options
const player = new Plyr('video', { captions: { active: true } });
 
// Expose player so it can be used from the console
window.player = player;

Et enfin j'ai ajouté mon code PHP dans "ajax/setBroken.php" pour récupérer l'extention du fichier vidéos et de l'image en miniature est le suivant:

Code :

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

1
2
3
4
5
6
7
 
$query = $con->prepare("SELECT * FROM videos");
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
	$videoLink = $row["videoLink"];
	$thumbnail = $row["thumbnail"];
	$vidExtension = $row["video_extension"];				
}

Alors, j'ai quelques questions très importantes:

1 - Comment remplacer le contenu de la variable JavaScript var video = $("<img>"); par le Code HTML du lecteur "Plyr-JS" suivant:

Code :

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

1
2
3
<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
	<source src="/path/to/video.mp4" type="video/mp4" />
</video>

???

2 - Comment passer la variable $thumbnail à l'attribut data-poster de la balise <video> de sorte à remplacer sa valeur "/path/to/poster.jpg" par cette variable $thumbnail sachant que le Code PHP qui récupère cette variable est dans le fichier ajax/setBroken.php ???

3 - Comment passer également la variable $videoLink à l'attribut src de la balise <source> de sorte à remplacer sa valeur "/path/to/video.mp4" par cette variable $videoLink sachant que le Code PHP qui récupère cette variable est dans le fichier ajax/setBroken.php ???

4 - Comment également, passer la variable $vidExtension à l'attribut type de la balise <source> de sorte à remplacer sa valeur "video/mp4" par cette variable $vidExtension sachant que le Code PHP qui récupère cette variable est dans le fichier ajax/setBroken.php ???

5 -Et enfin, à quel niveau devrais-ajouter le Code JavaScript ci-dessus du Lecteur "Plyr-JS" ???


Merci de m'aider s'il vous plaît.

[darkstar123456]

Bonjour,

J'avoue que j'ai un peu du mal à comprendre le fonctionnement et les problèmes

Par exemple, c'est quoi le rapport entre des images popup et Masonry-JS ?

1 - Comment remplacer le contenu de la variable JavaScript var video = $("<img>"); par le Code HTML du lecteur "Plyr-JS" suivant:
J'imagine que le soucis ce n'est pas de générer le code HTML.
Du coup, je ne comprends pas la question. Remplacer le contenu d'un tag img par du code HTML ? Ce n'est pas possible vu que le tag img n'a pas de contenu...
A l'inverse, si vous créiez par exemple : <div id="video-wrapper"></div> il serait alors possible de mettre de l'HTML de dedans : $('#video-wrapper').html(playerHTML);2 & 3 & 4 - Comment passer la variable $thumbnail à l'attribut data-poster de la balise <video> de sorte à remplacer sa valeur "/path/to/poster.jpg" par cette variable $thumbnail sachant que le Code PHP qui récupère cette variable est dans le fichier ajax/setBroken.php ???
Que fais cette page ? D'après le code, elle ne prend aucune variable en compte et donc retourne toujours la même chose...
Sinon le plus simple est de retourner une réponse en JSON :

Code php :

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
<?php
$response = ['success' => false];
$query = $con->prepare("SELECT * FROM videos WHERE video_src = 'un parametre quelconque'");
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
    $response['success'] = true;
    $response = [
        'success' => true,
        'video_link' => $row["videoLink"],
        'thumbnail' => $row["thumbnail"],
        'video_extension' => $row["video_extension"],
    ];
}
header('Content-Type: application/json; charset=utf-8');
echo json_encode($response);
exit;
?>

il suffit ensuite de remplacer les attributs :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
// $video_player correspond à l'élément présent dans la page
// donc #player ici d'après l'HTML présenté
$.post("ajax/setBroken.php", {src: src}, function(response) {
    if(response.success) {
        $video_player.attr('data-poster', response.thumbnail);
        $('source', $video_player)
                .attr('src', response.video_link)
                .attr('type', response.video_extension);
    }
});

5 -Et enfin, à quel niveau devrais-ajouter le Code JavaScript ci-dessus du Lecteur "Plyr-JS" ???
Je ne comprends pas la question

[cheboy]

il suffit ensuite de remplacer les attributs :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
// $video_player correspond à l'élément présent dans la page
// donc #player ici d'après l'HTML présenté
$.post("ajax/setBroken.php", {src: src}, function(response) {
    if(response.success) {
        $video_player.attr('data-poster', response.thumbnail);
        $('source', $video_player)
                .attr('src', response.video_link)
                .attr('type', response.video_extension);
    }
});

Bonjour et merci pour votre réponse. Mais il y a un petit flou que je ne comprends toujours pas. Mon objectif est de stocker la response dans un variable var video de sorte à avoir en jQuery la valeur du Code HTML:

Code :

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

1
2
3
<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
    <source src="/path/to/video.mp4" type="video/mp4" />
</video>

Mais nulle part, je ne vois la partie où la variable var video a été définie. En fait, j'ai besoin de stocker la response pour pourvoir utiliser cette variable video plus tard à cette partie de mon code:

Code :

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
video.on("load", function() {
        $("." + className + " a").append(video);
 
        clearTimeout(timer);
 
        timer = setTimeout(function() {
            $(".imageResults").masonry();
        }, 500);
 
    });
 
    video.on("error", function() {
 
        $("." + className).remove();
 
        $.post("ajax/setBroken.php", {src: src});
 
    });

Comment donc stocker la response dans une variable video en respectant la disposition HTML ci-dessus ?

Merci de m'éclairer s'il vous plaît

[darkstar123456]

Bonjour,

C'est bien le problème. Si vous ne savez pas d'où vient cette variable, je ne peux pas le dire pour vous

Vous pouvez le définir via JS mais perso, je n'aime pas :

Code javascript :

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

var video_player = '<video id="player" playsinline controls data-poster="/path/to/poster.jpg"><source src="/path/to/video.mp4" type="video/mp4" /></video>';

Perso, je mettrais simplement le code de la vidéo dans l'HTML directement et donc il suffit d'écrire (si on se réfère à l'HTML précédent et donc id="player") :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
var $video_player = $('#player');
 
// pour avoir le code HTML, il suffit d'utiliser : 
console.log('HTML', video_player.html());
// ou 
console.log('HTML', $('#player').html());
 
// mais il est possible de remplacer directement les attributs : 
// vu que c'est sur le tag <source> qu'on veut changer l'attribut, on change un peu le sélecteur afin de le targeter ;)
$('#player source').attr('src', 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4');

[cheboy]

Encore merci pour le soutien. J'ai fini par faire et ceci et je souhaiterais que vous m'apportiez des critiques s'il vous plaît:

Code :

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
28
29
30
31
32
var source = '<source/>';
	var video_player = '<video id="player" playsinline controls>';
 
	var video = $(video_player + source + '</video>');
 
	video.on("load", function() {
		$("." + className + " a").append(video);
 
		clearTimeout(timer);
 
		timer = setTimeout(function() {
			$(".imageResults").masonry();
		}, 500);
 
	});
 
	video.on("error", function() {
 
		$("." + className).remove();
 
		$.post("ajax/setvideoBroken.php", {src: src});
 
	});
 
	$.post("ajax/setvideoFetched.php", {src: src}, function(response) {
		if(response.success) {
			$('video', $video).attr('data-poster', response.thumbnail);
			$('source', $video)
				.attr('src', response.video_link)
				.attr('type', response.video_type);
		}
	});

Alors, en créant les variable source et video_player, j'y ai défini successivement les tags HTML <source/> et <video id="player" playsinline controls> lesquelles tags que j'ai inclut dans la nouvelle variable video créé ci-dessous.

Mon inquiétude étant de la ligne 25 à 32 et plus précisément au niveau de:

Code :

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

1
2
3
4
$('video', $video).attr('data-poster', response.thumbnail);
$('source', $video)
  .attr('src', response.video_link)
  .attr('type', response.video_type);

Alors, la $video en deuxième paramètre est-elle correcte vu qu'on est ici dans du JavaScript alors qu'en ma connaissance c'est en PHP qu'on défini les variable avec le signe $ ???

[darkstar123456]

Hello,

En effet, en PHP il est obligatoire de précédé les variables par un dollar
En JS, tu peux faire ce que tu veux, et souvent avec jQuery on utilise le dollar pour représenter un élément HTML sélectionné par jQuery car ce n'est pas pareil que JS natif.

Petit exemple :

Code :

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

1
2
3
4
5
6
// représente un objet jQuery de l'élement #player
let $video = $('#player');
// représente l'élément #player
let video = document.querySelector('#player');
// Pour "arriver" à l'élément natif depuis jQuery, on peut séléectionner l'index 0 de l'ojet jQuery :
console.log('player', $player[0]);

Votre code est très compliqué pour rien...
Je me répète mais franchement, si vous devez créer de l'HTML, c'est 10 fois plus simple de le créer dans l'HTML et de le sélectionner via JS.
Même sachant cela, ça ne sert à rien de créer de l'HTML en 3 variables (techniquement, c'est même très mauvais car ça utilise plus de mémoire)

Code js :

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

1
2
3
4
5
6
7
// En 3 lignes qui compliquent la lecture
var source = '<source/>';
var video_player = '<video id="player" playsinline controls>';
var video = $(video_player + source + '</video>');
 
// En 1 ligne
var video = $('<video id="player" playsinline controls><source></source></video>');

Attention également que là vous modifiez du code HTML dans le JS mais uniquement dans le JS
C'est le problème de créer l'HTML dans JS c'est qu'il faut l'inclure quelque part dans la page (contrairement à mes codes précédents qui modifient le document directement)

[cheboy]

Merci pour tout. Grand merci encore pour le temps accordé.

[escartefigue]

@cheboy, merci de passer le sujet à "résolu" avec le bouton prévu pour si c'est bien le cas.

Et pensez à encourager les contributeurs qui ont pu vous aider en votant sur les réponses pertinentes

[cheboy]

C'est fait. Merci.