Share
Aujourd'hui, je vais vous apprendre à afficher des vidéos sur le Web à l'aide d'un lecteur flash open source. Nous couvrirons toutes les étapes, y compris la conversion d'une vidéo au format de fichier flv et l'intégration d'un lecteur personnalisé à l'aide de SWFObject. La meilleure partie est que la vente au détail Adobe Flash n'est pas nécessaire.
La première étape de l’incorporation d’une vidéo consiste à coder une vidéo au format .flv. Presque tous les lecteurs Web en ligne utilisent .flv comme norme pour la lecture de fichiers.
Pour ce tutoriel, vous pouvez télécharger l'exemple de vidéo que j'ai utilisé et intitulé Trusted Computing sur archive.org (Réalisé par: Benjamin Stephan et Lutz Vogel.)
Si vous n’avez pas Macromedia Flash, passez à 1b.
Ouvrez Macromedia Flash Video Encoder et ajoutez la vidéo à la file d'attente Fichier> Ajouter. Cliquez ensuite sur Démarrer la file d'attente dans Fichier> Démarrer la file d'attente et vous avez fini de coder le fichier au format .flv..
Remarque: la personnalisation de cette étape est minimale. Pour plus de contrôle sur la taille et la compression de la vidéo, passez à l’étape 1b ou 1c..
Il existe de nombreuses options lors du codage au format FLV. L’option Windows de ce tutoriel est Riva FLV Encoder car il est gratuit et personnalisable..
Téléchargez et installez le codeur Riva FLV à partir du site Web de Riva.
Une fois ouvert, ajoutez la vidéo à la zone de vidéo d'entrée à l'aide du bouton Parcourir. Le programme va automatiquement sortir la vidéo dans le même répertoire.
Ensuite, nous ajusterons les préférences dans la partie droite. Pour cette vidéo simple, nous utiliserons une taille vidéo de 320x240 et conserverons tous les autres paramètres par défaut. Pour démarrer le codage, cliquez sur FLV Encode au bas du programme..
Remarque: essayez de réduire la taille du fichier en ajustant les paramètres et en réduisant la résolution. Plus la vidéo est volumineuse, plus le chargement est long.
Le choix pour Mac dans ce tutoriel est ffmpegX.
Téléchargez et installez l'encodeur ffmpegX à partir de leur site web.
Une fois ouvert, ajoutez la vidéo à la zone de vidéo d'entrée à l'aide du bouton Ouvrir. Le programme enregistrera la sortie de la vidéo dans le même répertoire, mais vous devrez mettre à jour le nom du fichier sur TrustedComputing_LAFKON_LOW.flv..
Ensuite, changez le format cible en FLV et cliquez sur Encoder. Pour modifier la taille et la compression de la vidéo, cliquez sur les différents onglets..
Remarque: essayez de réduire la taille du fichier en ajustant les paramètres et en réduisant la résolution. Plus la vidéo est volumineuse, plus le temps de chargement est long.
Dans ce didacticiel, nous utiliserons le lecteur MPW open source pour lire nos fichiers flash..
Les principales raisons en sont que le lecteur MPW est open source et offre à la fois une personnalisation facile et une personnalisation plus approfondie..
Pour télécharger le lecteur, visitez le site Web de MPW Player. Le site Web est en espagnol mais cliquez simplement sur le bouton de téléchargement bleu.
Les fichiers nécessaires sont mpw_player.swf et le dossier includes. Remarque: Placez le fichier flv codé, TrustedComputing_LAFKON_LOW.flv, dans le même dossier que le lecteur et le fichier html..
Créez un document HTML vide et ajoutez des balises de script pour swfobject dans l'en-tête du document. Le fichier swfobject.js se trouve dans le dossier includes du téléchargement du lecteur mpw.
Ensuite, nous allons insérer le lecteur flash actuel et éditer une ligne. Placez le nom du fichier vidéo, TrustedComputing_LAFKON_LOW.flv, sous la variable flv..
Cette div est remplacée par le javascript utilisant swfobject
Maintenant, nous avons un joueur qui fonctionne avec le look par défaut.
La personnalisation du lecteur est très importante et est la raison pour laquelle nous utilisons le lecteur MPW. Pour mettre à jour le lecteur, il suffit d’ajouter des variables dans le code JavaScript..
La première personnalisation du lecteur consistera à ajouter une photo d’aperçu de la vidéo. Pour ajouter une photo, ajoutez la variable jpg, puis l'emplacement de la photo. La photo utilisée dans le didacticiel s'appelle images_27_6 / comment jouer à la vidéo avec une source ouverte player_10.jpg, une capture d'écran de la vidéo. Remarque: N'oubliez pas les balises de script dans l'en-tête du document..
Cette div est remplacée par le javascript utilisant swfobject
Afin d'apporter d'autres modifications, ajoutez plus de variables. Voici un exemple de toutes les variables par défaut ajoutées avec des commentaires expliquant chaque objectif..
Cette div est remplacée par le javascript utilisant swfobject
Intégrer le lecteur à SWFObject nous permet d’utiliser une image ou un texte de substitution dans le cas où l’utilisateur ne dispose ni de flash ni de javascript. Une des principales raisons à cela est que de nombreux ordinateurs ou appareils comme l'iPhone ne disposent pas de Flash ou de JavaScript..
Dans cet exemple, nous utiliserons une image simple, mais tout code fonctionnera. SWFObject remplace tout le contenu à l'intérieur d'un div référencé. Quand un utilisateur manque JavaScript ou Flash, le navigateur affiche simplement le contenu de la div. Dans ce cas, le contenu affiché est exactement le même fichier jpg, images_27_6 / mode de lecture d'une vidéo à l'aide d'un lecteur open source, player_10.jpg, que nous avons utilisé pour un aperçu..
Afin de mettre plus d'un joueur sur une seule page, assurez-vous que chaque div référencée a un nom unique. Puis mettez à jour la référence JavaScript pour qu'elle corresponde à l'identifiant div..
Le lecteur MPW peut également être utilisé comme lecteur audio. Il suffit d’ajouter la variable mp3 au lieu de flv.
MPW Player est une source ouverte, ce qui signifie que tout le monde peut télécharger et modifier le lecteur. Pour télécharger le code source du lecteur, visitez cette page Web et téléchargez "MPW Player SRC"..
MPW Player n'est pas parfait pour toutes les vidéos Web. Essayez ces autres joueurs gratuits, car ils pourraient mieux fonctionner pour vous.
Ce tutoriel vous a montré comment encoder une vidéo au format flv et personnaliser un lecteur flash open source afin d'afficher de la vidéo et du son sur le web.
Accentsconagua