docintegrer une video dans une page web - hgmatisse
download 
Plainte Transcription
integrer une video dans une page web - hgmatisse
INTEGRER UNE VIDEO DANS UNE PAGE WEB PHASE PREPARATOIRE Cliquez sur le lien ci-dessous http://hgmatisse.free.fr/tolosamedia2/pages/DiffusionVideo.htm Une page s’ouvre avec une vidéo centrée en haut de l’écran. Cliquez avec le bouton droit sur la page autour de la vidéo. Un menu s’ouvre comme cidessous. Cliquez sur afficher la source… Un tout petit code va s’afficher en utilisant normalement le bloc note (ou notepad) installé sur chaque ordinateur avec une version de windows. Dans ce bloc note, cliquez sur Fichier puis Enregistrer sous de manière à avoir ce petit fichier tout le temps à votre disposition (le mettre donc dans un dossier bien identifié) pour ne pas refaire la manipulation effectuée jusqu’ici. Il sera à chaque fois votre point de départ. RECUPERER LE CODAGE D’UNE VIDEO Dans Youtube (le plus pratique), trouvez la vidéo qui vous intéresse… Puis cliquez sur Partager, puis Intégrer Vous pouvez modifier le paramètre de taille de votre vidéo selon que vous voulez qu’elle soit lue en classe entière ou par des élèves sur leur propre ordinateur. Ce qui est important en fait, c’est le code qui apparaît sur fond bleuté. Il faudra le copier (ctrl+C ou clic-droit de la souris et copier). INTEGRER LE CODAGE DE LA VIDEO Allez récupérer le fameux fichier DiffusionVideo.htm dans le dossier où vous l’avez rangé. Sauvegardez le en lui donnant un nom évocateur (par exemple ici Beatles1ere.htm [le .htm indique à l’ordinateur que c’est un fichier qu’il va ouvrir avec un navigateur internet]) Ouvrez ce nouveau fichier Beatles1ere.htm avec le bloc note (Fichier puis Ouvrir). Voici le code qui apparaîtra <html> <head> <title>Diffusion d'une vidéo</title> </head> <body> <center> <!-- insérer le code de la vidéo ci-dessous --> <iframe width="480" height="360" src="http://www.youtube.com/embed/AMHsB4BtD_k" frameborder="0" allowfullscreen></iframe> <!-- fin de la zone d'insertion du code la vidéo --> </center> </body> <html> Copier à la place du code en vert le code récupéré sur la page de YouTube… Cela va devenir... <html> <head> <title>Diffusion d'une vidéo</title> </head> <body> <center> <!-- insérer le code de la vidéo ci-dessous --> <iframe width="480" height="360" src="http://www.youtube.com/embed/xoZ18rO1Rj0" frameborder="0" allowfullscreen></iframe> <!-- fin de la zone d'insertion du code la vidéo --> </center> </body> <html> Sauvegarder ce fichier… Voilà c’est fini… Vous avez désormais un fichier de page web. Vous pouvez l’installer sur le disque dur d’un ordinateur, dans un espace de travail ou un atelier sur le réseau du lycée… Il suffira de faire un double clic pour que la page s’ouvre et que la vidéo se diffuse (sans tout ce qui est autour sur le site YouTube)… A condition bien sûr que l’ordinateur soit connecté à internet. Remarques : - Si vous ne voulez pas que la vidéo soit centrée, effacez dans le code <center> et </center> Si vous voulez agrandir après coup la vidéo, remplacez les paramètres width et height dans le code (attention à garder la proportionnalité entre les deux valeurs).
