IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2013
    Messages
    415
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 415
    Points : 57
    Points
    57
    Par défaut 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
    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.

  2. #2
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2013
    Messages
    415
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 415
    Points : 57
    Points
    57
    Par défaut
    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.

  3. #3
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 025
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 025
    Points : 3 930
    Points
    3 930
    Par défaut
    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?

  4. #4
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2013
    Messages
    415
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 415
    Points : 57
    Points
    57
    Par défaut
    Citation Envoyé par Toufik83 Voir le message
    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 ???


    Citation Envoyé par Toufik83 Voir le message
    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.

  5. #5
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 025
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 025
    Points : 3 930
    Points
    3 930
    Par défaut
    Bonjour,

    Citation Envoyé par cheboy Voir le message
    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 ?

  6. #6
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2013
    Messages
    415
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 415
    Points : 57
    Points
    57
    Par défaut
    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>";

  7. #7
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 025
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 025
    Points : 3 930
    Points
    3 930
    Par défaut
    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
    Citation Envoyé par cheboy Voir le message
    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 ?

  8. #8
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2013
    Messages
    415
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 415
    Points : 57
    Points
    57
    Par défaut
    Merci pour le retour. Je l'avais déjà fait depuis plusieurs jours à ma manière. Merci encore pour le soutien.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] rendre le lien du menu actif
    Par Stéph utilisateur d'acces dans le forum AJAX
    Réponses: 0
    Dernier message: 22/07/2010, 20h02
  2. [AJAX] ouvrir un lien dans un div
    Par kelyly dans le forum AJAX
    Réponses: 6
    Dernier message: 12/04/2010, 21h30
  3. [AJAX] Créer bouton lien mort
    Par baptistep dans le forum AJAX
    Réponses: 3
    Dernier message: 03/10/2009, 08h29
  4. [AJAX] bouton et lien pour ajax
    Par kaking dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 19/01/2009, 10h01
  5. [AJAX] Image et lien
    Par bobostudio dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 02/01/2007, 11h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo