Vérifier d'abord en Ajax si le lien de la vidéo retourné par le JSON du Code PHP est de type HTML oEmbed

**cheboy** · 03/06/2022, 20h06

Bonjour.

Voici mon code PHP du ajax/setVideoBroken.php fichier qui renvoie un 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
17
18
19
20
21
22
23
24
if(isset($_POST["src"])) {
    $query = $con->prepare("UPDATE videos SET broken = 1 WHERE videoLink=:src");
    $query->bindValue(":src", $_POST["src"]);
    $query->execute();
 
    $response = ['success' => false];
    $videoQuery = $con->prepare("SELECT * FROM videos WHERE videoLink=:src");
    $videoQuery->bindValue(":src", $_POST["src"]);
    $videoQuery->execute();
    while($row = $videoQuery->fetch(PDO::FETCH_ASSOC)) {
        $response['success'] = true;
        $response = [
            'success' => true,
            'video_link' => $row["videoLink"],
            'thumbnail' => $row["thumbnail"],
            'video_type' => 'video/' . $row["video_extension"],
        ];  
    }
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($response);
    exit;
} else {
    echo "No src passed to page";
}

Ce Json retourné en PHP ci-dessus, est récupéré en Ajax (JavaScript) pour afficher le lien vidéo (video_link) dans la balise source qui elle-même est incluse dans la balise video:

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
33
function loadVideo(src, className) {
 
    var video = $('<video id="player" playsinline controls><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/setVideoBroken.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);
        }
    });
 
}

Je tiens à préciser que response.video_link peut contenir des URLs vidéo simples (https://website.com/video.mp4) ou oEmbed de code HTML comme celui de Youtube (<iframe src="https://www.youtube.com/embed/4YCLRpKY1cs?feature=oembed"></iframe>)

Comment donc vérifier dans le code JavaScript:

Si response.video_link (la réponse video_link du Json retourné par le Code PHP) commence par < qui représente le signe d'ouverture de la balise HTML ???
Et si oui (video_link commence par le signe <, c'est que video_link équivaut à un code HTML de type `oEmbed` comme celui de Youtube), donner directement la valeur de ce code HTML à la variable var video.
Si non, on passe à la variable var video le code <video id="player" playsinline controls><source /></video> de sorte à ajouter à la balise source, le lien de la vidéo que contient la réponse JSON: video_link.

J'ai vraiment besoin de votre aide.

**cheboy** · 03/06/2022, 22h42

Grand merci pour votre réponse mais, j'ai essayé d'appliquer la fonction indexOf à response.video_link.indexOf("<") pour vérifier s'il est égal à 0. Et si oui, la variable var video devrait directement être égal à response.video_link.

Mais je suis confus sur comment je l'ai utilisé car comme vous pouvez le voir dans la modification de monde JS, je l'ai utilisé sans faire appel au Code PHP ajax/setVideoBroken.php qui me permet de récupérer via JSON "video_link":

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
33
34
35
36
37
38
function loadVideo(src, className) {
 
	if (response.video_link.indexOf("<") == 0) {
		var video = response.video_link;
	} else {
		var video = $('<video id="player" playsinline controls><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/setVideoBroken.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, pensez-vous que c'est correcte même quand je n'ai pas fait appel au Code dans la même partie du code où j'ai défini la variable var video ???

Ma deuxième préoccupation est comment je devrais vérifier dans la partie Ajax $.post("ajax/setVideoBroken.php", {src: src}, function(response) { ... }, si la variable var video possède une balise <video> avant de chercher à son attribut data-poster, la valeur response.thumbnail et à sa balise <source>, son attribut src, la valeur response.video_link ???

Sinon, veuillez m'aider à corriger mon code s'il vous plait.

**Toufik83** · 03/06/2022, 23h51

Bonjour,

Pour vérifier si la valeur retournée par json est une balise <iframe> ou <video>, tu peux utiliser $.is() :

Code :

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

1
2
3
if($(reponse.video_link).is("iframe")) 
  console.log("oui c'est bien un iframe"); 
else console.log("non ce n'est pas un iframe");

Puis je vois aussi que tu utilises deux variables video et $video, normalement tu as une erreur dans la console non?

**cheboy** · 04/06/2022, 00h43

Envoyé par Toufik83

Puis je vois aussi que tu utilises deux variables video et $video, normalement tu as une erreur dans la console non?

Déjà merci pour votre réponse. Comme ceci:

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
33
34
35
36
37
38
39
function loadVideo(src, className) {
 
	if ($(reponse.video_link).is("iframe")) {
		var video = response.video_link;
	} else {
		var video = $('<video id="player" playsinline controls><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/setVideoBroken.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, pensez-vous que c'e

Vous voulez-dire ??? Si non, comment rendre parfaire mon Code s'il vous plaît ???

Envoyé par Toufik83

Puis je vois aussi que tu utilises deux variables video et $video, normalement tu as une erreur dans la console non?

NON, La variable $video que vous voyez c'est-à-dire au niveau de $('video', $video).attr('data-poster', response.thumbnail); est la même que video que j'ai déclaré tout haut qui contient via var video. Donc c'est la même. J'ai mis ce $ devant cette variable video comme il m'a été conseillé ICI. Et de toute façon, le code ne fonctionne pas actuellement.
Pensez-vous que je devrais récupéré la variable video déclarée tout haut sans le signe $ ??? Car il me faut la récupérer pour passer à son attribut data-poster la valeur de response.thumbnail. Comment donc procéder ???

Merci de m'aider.

**Toufik83** · 04/06/2022, 15h38

Bonjour,

Envoyé par cheboy

La variable $video que vous voyez c'est-à-dire au niveau de $('video', $video).attr('data-poster', response.thumbnail); est la même que video que j'ai déclaré tout haut qui contient via var video. Donc c'est la même. J'ai mis ce $ devant cette variable video comme il m'a été conseillé ICI

Tu n'as pas compris le conseil de darkstar123456.

Pour javascript la variable video est totalement différente de $video, donc c'est deux variables et pas la même, MAIS pour une bonne lisibilité de code, on préfère distinguer les variables en fonction de leur contenu, par exemple si tu as une variable qui pointera sur un objet jQuery, là on peut (pas obligatoire) rajouter un dollar avant la déclaration de variable juste pour qu'on puisse comprendre que c'est relié à un objet jQuery et pas une simple valeur js.

Donc comme je disais le code n'est pas Ok, et normalement tu as une erreur Undefined $video dans la console du navigateur.

Il faudrait répondre à ces questions pour que l'on puisse vous aider :

À quel moment la fonction loadVideo est appelée ?
Pourquoi tu envois deux requêtes POST vers le fichier PHP ?

**cheboy** · 04/06/2022, 16h13

Merci pour votre réponse. loadVideo est appelée dans ma variable PHP $resultsHtml ici (Ligne 6):

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
$resultsHtml .= "<div class='gridItem video$count'>
					<a href='$videoLink' data-fancybox='gallery' data-caption='$displayText' 
						title='$title' data-siteurl='$siteUrl'>
							<div class='video'>
								<script>
									$(document).ready(function() {
										loadVideo(\"$videoLink\", \"video$count\");
									});
								</script>
							</div>
 
							<span class='details'>$displayText</span>
 
							<p class=''><strong>$titleSplit</strong></p>
					</a>
				</div>";

**Toufik83** · 05/06/2022, 00h11

Bonjour,

Je vous suggère de séparer le javascript et PHP et supprimer le script js de la variable PHP $resultsHtml, et le mettre dans un contexte js et au chargement de la page.

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function() {
        $(".gridItem").each(function(){//pour chaque élément ".griItem"
                 $(this).find("> a").eq(0)
                 .each(function(){//pour chaque premier enfant <a> trouvé
                          loadVideo($(this).attr("href"),$(this).parent(".gridItem").attr("class").split(" ")[1]);
                 });
        });
});

Puis comme tu disais dans ton premier message

Envoyé par cheboy

Je tiens à préciser que response.video_link peut contenir des URLs vidéo simples (https://website.com/video.mp4) ou oEmbed de code HTML comme celui de Youtube (<iframe src="https://www.youtube.com/embed/4YCLRpKY1cs?feature=oembed"></iframe>)

, des modifications au niveau de la fonction loadVideo() sont nécessaires :

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
33
34
35
36
37
38
39
40
41
42
function loadVideo(src, className) {
        //ici c'est src et pas response.video_link, d'ailleurs cette dernière existe et accessible seulement dans la fonction de rappel de $.post et pas ici. 
        //ne pas mélanger les choses.... 
	if ($(src).is("iframe")) {
		var video = src;
	} else {
               //supprimer id="player", car plusieurs éléments auront le même id, ce qui n'est pas bon du côté HTML, un id doit être unique
               //tu peux utiliser une classe par exemple....
		var video = $('<video  playsinline controls><source src="'+src+'"/></video>');
	}
 
	video.on("load", function() {
		$("." + className + " a").append(video);
 
		if(timer) clearTimeout(timer);
 
		timer = setTimeout(function() {
			$(".imageResults").masonry();
		}, 500);
 
	});
 
	video.on("error", function() {
 
		$("." + className).remove();
 
		$.post("ajax/setVideoBroken.php", {src: src});
 
	});
 
        //Il faut qu'on s'explique un peu ici...
	/*$.post("ajax/setVideoBroken.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);
		}
	});*/
 
}

Concernant la ligne 32 de loadVideo(), ce que j'ai compris c'est que le fichier PHP gère les vidéos qui n'ont pas été chargées et modifie la valeur de la colonne broken à 1, puis juste après tu les sélectionnes pour qu'ensuite les récupérer ??

.

J'en déduis que l'appel de $.post ne devrait être effectuée que seulement si la vidéo correspondante n'a pas pu être chargée, et donc seulement dans le bloc video.on("error",function(){/*ici...*/}), non ?

**cheboy** · 08/06/2022, 20h08

Merci pour le retour. Je l'avais déjà fait depuis plusieurs jours à ma manière. Merci encore pour le soutien.

Vérifier d'abord en Ajax si le lien de la vidéo retourné par le JSON du Code PHP est de type HTML oEmbed

AJAX

Discussions similaires

Partager

Partager