insérer des videos mp4 dans des iframesavec un onclick, en php

pierrot35 · 01-12-2014 20:03:37

Bonjour à tous,

je ne sais pas dans quel forum poser mes questions, n'ayant pas trouvé de thèmes qui correspondent à ce que je cherche.
Voila ma difficulté :
Je quasiment fini un site internet, avec 3 sessions privées ( login + mdp) en lien avec mysql ( bien aidé par JC que je remercie).
Je voudrais ouvrir dans mes iframes soit des documents, soit des vidéos.
Concernant l'ouverture des documents dans mes iframes, pas de soucis particulier, mes difficultés viennent de l'ouverture des videos en mp4

Ce que je souhaiterai est, que selon chaque onclick, j'ouvre une vidéo différente dans la même iframe.
Actuellement j'en suis à ce niveau ( certains codes"rémaménagés" issus de divers forum, aucun ne me permet d'aboutir en totalité).

Dans le header de mon IHm, mon script :

<!-- DEBUT scryptIframeMp4 -->

<script type='text/JavaScript'>

var xhr = null; 

function getXhr()

{

     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 

else if(window.ActiveXObject)

  { 

  try{

     xhr = new ActiveXObject("Msxml2.XMLHTTP");

     } catch (e) 

     {

     xhr = new ActiveXObject("Microsoft.XMLHTTP");

     }

  }

else 

  {

  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 

  xhr = false; 

  } 

}

function ShowPage(page)

{

getXhr();

xhr.onreadystatechange = function()

    {

     if(xhr.readyState == 4 && xhr.status == 200)

     {

     document.getElementById('page').innerHTML=xhr.responseText;

     }

    }

xhr.open("GET","srciptIframemp4.php?page="+page,true);

xhr.send(null);

}

</script>

<!-- FIN scryptIframeMp4 -->

Mon php concernant l'ouverture des documents :

<?php

$page=$_GET['page'];

$php='.php';

     if($page==0)require 'Document1.$php;

else if($page==1)require 'Document2'.$php;

else if($page==2)require 'Document3'.$php;

else if($page==3)require 'Document4'.$php;

else if($page==4)require 'Document5'.$php;

else if($page==105)require 'SousDoc/page5'.$php;

else if($page==106)require 'SousDocr/page6'.$php;

else if($page==107)require 'SousDoc/page7'.$php;

else require 'http:/*********/DocDefautt.php';

?>

Mon php concernant l'ouverture des vidéos qui ne marchent pas

<?php

$page=$_GET['page'];

$mp4='.mp4';

if($page==0)require 'Document1.$mp4;

else if($page==1)require 'Document2'.$mp4;

else if($page==2)require 'Document3'.$mp4;

else if($page==3)require 'Document4'.$mp4;

else if($page==4)require 'Document5'.$mp4;

else require 'http://****.php';

?>

Enfin mon html concernant uniquement les vidéos ( l'ouverture des document fonctionne correctement)

<a href="#" onClick="ShowPage(1)">video1</a>

<!-- 2nd lien -->

<a href="#" onClick="ShowPage(2)">video2</a>

<!-- 3ieme  lien -->

...

<!-- emplacement div de visualisation-->

    <div id="page">

 <!-- ouverture iframe ici -->

    </div>

Voila ce que j'obtiens, j'ai aucune ligne dans mon fichier VideoTest.mp4 .. :

Warning: Unexpected character in input: '' (ASCII=7) state=0 in /customers/d/a/6/*******l/VideoTest.mp4 on line 373 Warning: Unexpected character in input: '' (ASCII=30) state=0 in /customers/d/a/6/********l/VideoTest.mp4 on line 373 Parse error: syntax error, unexpected T_STRING in /customers/d/a/6/**********/VideoTest.mp4 on line 374 

 

J'ai essayé ceci qui m'affiche bien ma vidéo en Iframe :

Pose 2 problémes  : pas d'ouverture par un onclick + me redemande les login et mdp de la session sécurisée alors que je suis déjà authentifié (?)

<div class="col" style="width:750px;margin-top:14px;border-color:red;border-width:3px;height:500px;">

<IFRAME name="frameOpus" width="650px" height="400px" SRC="http://*************/VideoTest.mp4" ></div>

</IFRAME>

</div>

J'ai essayé aussi ceci , mais je ne peux pas utiliser les onclick(s) pour ouvrir chaque vidéo dans la même iframe :

avec ce script

<script type="text/javascript">

  function afficher(id)

{

    if(document.getElementById(id).style.visibility=="hidden") document.getElementById(id).style.visibility="visible";

  else

    return true;

}

</script>

et son code html

<div>

        <input type="button" onclick="javascript:afficher('id_iframe');" name="bouton" value="BoutonTestIframe2">

        <iframe id="id_iframe" name="mon_iframe2" src="http://www.************/VideoTest.mp4" width="400px" height="500px" scrolling="auto" align="top" frameborder="3px" style="visibility:hidden;"></iframe>

        </div>

Peut être pouvez vous me mettre sur la voie, simplement .. , j'ai, me semble t'il, tout mais dans le désordre..
Merci par avance
Pierrot

ps: je ne veux pas "transiter" par youtube ...

Dernière modification par pierrot35 (01-12-2014 20:05:23)

Jc · 03-12-2014 20:30:22

Bonjour,

Tout d'abord merci pour ton témoignage pierrot35, ça me fait plaisir, des retours de ce genre, on en a pas souvent

Maintenant je vois beaucoup de choses dans ton code, et je pense que tu mélanges pas mal de choses techniquement parlant. Laisse moi t'expliquer succintement et te donner quelques règles pour faire le bon choix.

1) Si tu travailles avec des fichiers présent sur ton serveur, n'utilise pas d'iframes mais plutôt la puissance du html5 avec les balises <video></video> ou <audio></audio>. Pour les documents, comme les pdf, ouvre les sur un nouvel onglet via le widget PDF, c'est pas très pertinent de les inclure dans des iframes.

Pour mettre cela en application, je te recommande d'utiliser une DTD en xhtml5 sur ta page comme suit:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">....</html>

Cette méthode permet l'utilisation de l'Ajax si tu le souhaites.

2) Utilise des iframes pour des vidéos ou des composants managés et dynamiques que s'ils sont hébergés sur des serveurs externes au tiens (vidéos youtube, dans le cloud,...). L'utilisation de l'Ajax dans ce contexte est en général impossible pour des raisons de sécurité, car cela oblige à faire du JSONP (cross domain) et peu de serveurs l'autorisent.

Voilà c'est les bases pour commencer.

A bientôt

Dernière modification par Jc (03-12-2014 20:31:09)

pierrot35 · 04-12-2014 19:27:56

Bonjour Jc,

Sacrément content de te "revoir", je ne voulais pas "t’embêter" vu le temps que tu avais déjà passé sur mes difficultés.
Je reprends donc tout au départ, mais auparavant pourrais tu m'indiquer si mes explications étaient claires, mon langage est toujours que celui d'un autodidacte.

Bien, mes manches sont relevées.
Ma situation : mes vidéos sont sur mon site, dans les 3 sessions sécurisées. Je reste bloqué sur les vidéos, les PDF eux se chargent bien avec href="#" et mes onclick(s), mais je vais les changer et passer en widget PDF, à priori c'est encore plus simple d’après ce que viens de voir.

Concernant le XMLHttpRequest, j'avais compris que cela était possible puisque l'échange de données étaient faites uniquement sur mon domaine, c'est à dire que mes fichiers vidéos et Pdf étaient sur mon serveur et non sur un autre domaine type YouTube.
Les href="#" et mes onclick(s) sur mes Pdf marchent impeccablement bien dans mes iframes. C'est ça que je ne comprenais pas, pourquoi ça fonctionne avec les Pdf et pas avec les href="#" et mes onclick(s) sur vidéos ?, je croyais que c'était la même chose.

lien =https://www.video2brain.com/fr/tuto/jsonp-ou-le-cross-domain

Et comme ça marchait pour les PDF, je me suis dit qu'ainsi j'éviterai de m'engager dans des savoirs JSONP trop inaccessibles pour moi, en restant centré sur la même recette mais "en vidéo".
Malheureusement, je trouve pas la solution.

Au départ, j'avais bien tenté avec <video></video>, la fenêtre s'ouvrait mais sans la video, alors j'ai laisser tomber puisque à contrario en iframe cela fonctionnait, et me "battais" avec les iframe(s?) depuis.
Je ne souhaite pas diffuser mes vidéos sur youtube, certaines sont confidentielles.
Juste une question subsidiaire, que ce soit des formats vidéos ou des présentations powerpoint, ce sera la même procédure ?

Je vais te suivre .. certes, c'est plutôt l'inverse , et te ferai un point le temps que je retravaille les codes <video></video> pour voir ou ça n'allait pas à l'origine.

Bonne soirée
Merci
pierrot

Ps: mes 3 sessions sécurisées sont impeccables, j'en suis "très fier" une connaissance informatique à essayé d'y entrer (avec mon accord) et il n'a pas réussi.. J'ai pourtant eu qq difficultés ensuite : alors que chaque session était dans un dossier différent, lorsque l'une d'entr'elle était loguée, les autres l'étaient aussi, j'ai donc refait des intitulés différents des fichiers et tout est devenu normal, y compris les enregistrement mysql ( sauf le checkbox à choix multiples ou mysql enregistre toutes les options qu'elles soient cochées ou pas, mais cela n'est pas d'une grande importance, donc dans la file d'attente..), mais c'est déjà de l'histoire presque ancienne

pierrot35 · 05-12-2014 16:33:12

Bonjour JC,

Ça marche parfaitement , dire que je m'étais embarqué dans du videoform /JS/ etc... puisque les href ne fonctionnaient pas pour le vidéos..
C'est en fait beaucoup plus simple.
J'ai fait une mosaïque de 9 écrans en ajoutant un poster "Titre de la vidéo" sur chaque écran, et lorsque l'on clique sur l'écran la vidéo se lance, cela m'évite d'avoir à ajouter des titres extérieurs.
Je te présente mes codes ci dessous, seulement les 6 premiers, les autres étant identiques :

           <!--1-->

            <video id="video" width="330" height="200" controls="controls" poster="PosterParametrage.jpg">

                <source src="VideoTest.mp4" type="video/mp4"  onclick="playVid();"/>

            </video>

             <!--2-->

            <video id="video" width="330" height="200" controls="controls" Poster="PosterClient.jpg">

                <source src="VideoTest2.mp4" type="video/mp4"  onclick="playVid();"/>

            </video>

             <!--3-->

            <video id="video" width="330" height="200" controls="controls" Poster="PosterDevis.jpg">

                <source src="VideoTest2.mp4" type="video/mp4"  onclick="playVid();"/>

            </video>

             <!--4-->

            <video id="video" width="330" height="200" controls="controls" Poster="PosterMateriaux.jpg">

                <source src="VideoTest2.mp4" type="video/mp4"  onclick="playVid();"/>

            </video>

            <!--3-->

            <video id="video" width="330" height="200" controls="controls" Poster="PosterTableauBord.jpg">

                <source src="VideoTest2.mp4" type="video/mp4"  onclick="playVid();"/>

            </video>

             <!--4-->

            <video id="video" width="330" height="200" controls="controls" Poster="PosterGPEC.jpg">

                <source src="VideoTest2.mp4" type="video/mp4"  onclick="playVid();"/>

            </video>

J'ai juste un petit souci, lorsque les vidéos arrivent à leurs termes, je n'ai plus mon poster "Ecran Titre", mais un écran noir, si bien que si je voulais revoir la 2nd par exemple, je ne sais plus à quoi elle correspondait.

Concernant la sécurité, j'ai essayé d'obtenir l'url des vidéos, mais elle n'apparaissent pas, à priori (?), seule les src apparaissent, pourrait on "remonter" dans le site par ce chemin ?
Si j'ajoute à l'url de la page du site la src de la vidéo, j'arrive à la voir directement à l'écran, je suis dons dans ma session protégée sans avoir à m'identifier, est ce que cela représente un danger ?
Mes Ecrans Titre et mes vidéos sont pourtant dans l'arborescence des sessions protégées.

Ça me paraît simple cette fois ..trop simple.. mais j'attends tes observations..
Pierrot

pierrot35 · 05-12-2014 16:37:51

je pourrai peut être mettre mes liens vidéos dans un fichier protégé par l'authentification php ? auquel cas seuls ce qui auraient accès aux sessions protégées pourraient aller directement sur les vidéos ? je me trompe ?

Jc · 06-12-2014 11:28:42

Bonjour,

je pourrai peut être mettre mes liens vidéos dans un fichier protégé par l'authentification php ? auquel cas seuls ce qui auraient accès aux sessions protégées pourraient aller directement sur les vidéos ? je me trompe ?

Il y a deux façons de faire
1) Accès au fichier de façon anonyme : n'importe qui qui connait l'url du fichier peut y accéder et même le télécharger. 2 techniques ici : a) dossier protégé par .htaccess (mais n'importe qui connaissant le mdp du dossier peut y accéder), b) par obfuscation d'url, mais cela nécessite une action préalable de l'utilisateur pour générer ce lien dynamique, donc ce n'est plus vraiment de l'accès anonyme. Personnellement, je n'aime aucune des deux, même si la 2e est "plus propre".
2) Accès au fichier par session authentifiée, la meilleure façon à mon sens. L'utilisateur doit être authentifié et autorisé sur la plateforme pour accéder au fichier avec un lien qui obfusque mais qui n'est pas aléatoire par ex: https://monsite.com/getfile.php?id=1&token=abcdef123456. Cette authentification peut se faire soit via enregistrement mail en double optin, soit via un compte enregistré sur le serveur. Le token ici est plus adapté pour une authentification mail en double optin, sinon pas besoin.

Bon week-end.

pierrot35 · 22-12-2014 17:29:49

Bonjour,

mon problème est résolu
cordialement
Pierrot

PHP|Débutant :: Forums

Advertisement

#1 01-12-2014 20:03:37

insérer des videos mp4 dans des iframesavec un onclick, en php

#2 03-12-2014 20:30:22

Re : insérer des videos mp4 dans des iframesavec un onclick, en php

#3 04-12-2014 19:27:56

Re : insérer des videos mp4 dans des iframesavec un onclick, en php

#4 05-12-2014 16:33:12

Re : insérer des videos mp4 dans des iframesavec un onclick, en php

#5 05-12-2014 16:37:51

Re : insérer des videos mp4 dans des iframesavec un onclick, en php

#6 06-12-2014 11:28:42

Re : insérer des videos mp4 dans des iframesavec un onclick, en php

#7 22-12-2014 17:29:49

Re : insérer des videos mp4 dans des iframesavec un onclick, en php

Pied de page des forums