Share
Si vous avez toujours voulu inclure le streaming vidéo dans vos conceptions, sans vous soucier des solutions de code compliquées (ou de Flash), nous avons deux solutions rapides et faciles à vous proposer. Aujourd'hui, nous allons jeter un coup d'oeil sur ce que chaque solution offre aux concepteurs Web et comment les utiliser dans vos propres projets..
En surface, le streaming vidéo sur une page Web n’est pas une préoccupation majeure pour beaucoup de concepteurs de sites Web? Ceci est compréhensible car ces deux mots seulement ("Web" et "Vidéo") impliquent une base de connaissances qui se trouve au mieux ailleurs dans l'univers Envato.?
? Mais si je vous disais qu'il est maintenant plus facile d'ajouter du streaming vidéo à vos pages que d'ajouter un jpg. Maintenant que j'ai ton attention? plongons dans les bonnes choses:
Avant de commencer, décrivons étape par étape l’historique de la "diffusion Web en continu" du point de vue des concepteurs Web:
Supposons que vous travaillez sur un projet et que vous gérez le codage frontal de base. Dans le passé, l'ajout de vidéos en streaming à nos conceptions était un processus assez compliqué - vous obliger à connaître (et posséder une licence) Adobe Flash. En supposant que vous ayez Flash et que vous sachiez vous en servir, vous devez alors obtenir la vidéo au bon format, l'importer dans Flash, suivre le processus archaïque de configuration de la vidéo, puis l'exporter. Enfin, vous devrez l'intégrer correctement dans votre site Web. Les vétérans Flash expérimentés pourront peut-être résoudre ce problème rapidement, mais pour la plupart des concepteurs, c'est un casse-tête.
Une autre solution possible consisterait à utiliser un service tel que YouTube ou Vimeo. C’est bien pour la plupart des gens, mais qu’en est-il de ceux d’entre nous qui veulent simplement afficher de la vidéo sur le Web? sans pour autant la marque ou d'autres extras ajoutés par des sites comme YouTube et Vimeo? Jusqu'à récemment, il n'y avait pas vraiment de solution simple pour cela.
Grâce à la promesse de l'écran de fumée HTML 5 Vidéo, je me suis récemment retrouvé à essayer certaines des «solutions de diffusion vidéo en continu». Bien entendu, c’est précisément à ce moment-là que Google a intégré WebM dans son étreinte amoureuse et que les choses sont devenues beaucoup plus compliquées que prévu. Je me suis essentiellement rendu et je suis parti avec une attitude "Laissez Dieu régler cela". De toute évidence, le débat sur le streaming vidéo Web n'a pas encore été résolu.
Il y a quelques années, j'ai écrit un article, The Rise of Flash Video, qui retrace étrangement un débat similaire qui a débuté lorsque la vidéo est effectivement tombée sur le Web et que la norme Flash Video a pris racine. Encore une fois, le cœur de l’argument était le suivant: "Il doit y avoir un moyen plus simple de procéder." Devine quoi? Maintenant il y a.
Au cours des deux dernières années, Adobe a été impliqué dans le cadre multimédia Open Source. J'ai toujours trouvé que OSMF était un ensemble ahurissant de technologies et de techniques qui, franchement, me font mal aux dents. Les technologies sont sérieusement cool, très avant-gardistes et amusantes, mais sont-elles destinées aux développeurs? et s’il existe un moyen de compliquer exagérément une solution simple, les codeurs les plus expérimentés du monde la trouveront. OSMF n'est pas différent. Si vous vous promenez sur le site, il n’ya vraiment pas grand-chose en matière de solutions simples, plug and play, pour que nous puissions utiliser les modestes concepteurs.
Ce n'est que lorsque vous faites un pas en arrière que l'objectif du projet OSMF devient clair: "fournir des expériences de lecture vidéo de haute qualité". Cela signifie un chargement vidéo très fluide, des lecteurs vraiment lisses et aucun des éléments supplémentaires fournis par Vimeo et YouTube. Lorsque tout cela devient vraiment intéressant pour nous, c’est que nous pouvons maintenant nous amuser sans avoir à apprendre rien de nouveau..
Dans ce tutoriel, je vais vous montrer deux manières de réaliser cela. Le premier est "Drop Dead Simple" et le second relève le niveau "Dead Simple". Pour entrer dans le jeu, tout ce que vous avez à faire est de télécharger une vidéo (une vidéo est jointe à ce tutoriel pour chaque solution) dans un répertoire d'un site Web. Commençons:
Cette partie est assez simple - il suffit de télécharger une vidéo sur votre serveur Web en utilisant un programme FTP ou quelque chose de similaire. Pour cette démonstration, nous utiliserons le fichier "Stockhorn.f4v". Tout ce que vous avez besoin d’obtenir ici est l’URL de votre vidéo. Gardez est quelque part, vous pouvez copier / coller pour la prochaine étape.
Ce site propose essentiellement un lecteur OSMF pour les masses. Si vous souhaitez insérer un fichier mp4, flv ou f4v dans votre page Web sans connaître une simple couche de Flash, Actionscript ou Flex, vous êtes au bon endroit. Ce que vous devez faire est de cliquer sur le bouton Configurer la lecture Flash Media au bas de la page. Cela ouvrira la page de configuration de la lecture Flash Media..
Vous devez entrer le chemin absolu de la vidéo et son extension. Les trois formats utilisés par Flash sont flv, f4v et H.264.Si vous n’êtes pas sûr de la façon dont ils sont créés, n'hésitez pas à consulter ma série Bases de la vidéo Flash sur active.tutsplus. Vous devez également entrer les valeurs de largeur et de hauteur de la vidéo - les valeurs de la vidéo jointe sont 720 X 405. Une fois que vous avez terminé, cliquez sur le bouton Aperçu dans la zone Aperçu du lecteur et la lecture de votre vidéo devrait commencer..
Si vous utilisez Dreamweaver, ouvrez la page, sélectionnez le balises et collez simplement le code du lecteur dans la vue Code. Si vous testez la page, votre vidéo sera lue dans le navigateur. À ce stade, il vous suffit de télécharger la page html dans le répertoire contenant la vidéo sur votre site..
Ce sont les étapes et si vous vous rendez ici, vous verrez la vidéo en lecture. La seule chose que j'ai faite différemment a été d'inclure un cadre pour affiche. Plus à ce sujet dans la section suivante.
Comme je l’ai dit tout en haut, je ne vais pas faire «tous les techniciens», mais il ya une autre façon un peu plus compliquée que ce que je viens de montrer qui mérite d’être signalée, appelée Lecture multimédia stroboscopique.
Strobe Media Playback utilise la même approche que Flash Media, mais il y a beaucoup plus de puissance sous le capot. Par exemple, vous pouvez utiliser plusieurs débits binaires pour détecter les connexions et alimenter la vidéo appropriée en fonction de la vitesse de connexion de l'utilisateur. Vous pouvez personnaliser les commandes, l'utiliser pour lire de l'audio, afficher des jpg et à peu près tous les médias qui apparaîtront dans un SWF Flash. Dans cet exemple, nous allons adopter la même approche "sans code" que dans la solution précédente, mais je vais ajouter un "twist". Si vous voulez travailler avec moi, tous les fichiers dont vous aurez besoin sont dans le dossier Strobe dans le téléchargement de ce tutoriel..
Identique à la précédente: il vous suffit de télécharger une vidéo sur votre serveur Web à l'aide d'un programme FTP ou d'un logiciel similaire. Pour cette partie de la démo, nous utiliserons le fichier "GeorgeSquare.mp4". Tout ce que vous avez besoin d’obtenir ici est l’URL de votre vidéo. Gardez est quelque part, vous pouvez copier / coller pour la prochaine étape.
La version que vous souhaitez utiliser est Strobe Media Playback 1.5.1. Avec Strobe, les versions bêta sont appelées "Sprints" et le Sprint actuel prend en charge des éléments tels que la nouvelle fonctionnalité Stage Video de Flash Player. Lorsque vous décompressez le fichier, vous avez le choix: placez le dossier à la racine du serveur Web de votre ordinateur ou téléchargez-le à la racine de votre site Web. J'ai créé un répertoire nommé "smp" et téléchargé tous les fichiers sur mon serveur Web..
Une affiche est une excellente occasion de faire du branding avec une vidéo. Si la première image de la vidéo va juste rester là et ressembler à une image, pourquoi ne pas mettre cette image au travail. Dans ce cas, j'ai simplement ouvert un nouveau document Fireworks CS5 correspondant aux dimensions de la vidéo (1280 x 720), assemblé les éléments et enregistré dans une image .jpg aplatie dans le même dossier que celui-ci..
Ce dossier se trouve dans le téléchargement Strobe. Quand il s’ouvrira, il vous semblera plutôt familier. La principale différence entre ce document et celui rencontré lors de la lecture Flash Media est que les choix sont beaucoup plus vastes et que le lecteur est celui que vous possédez? pas un sur le site d'Adobe. Lorsque la page s'ouvre, vous verrez qu'il y a beaucoup de choix. Les plus importants, aux fins de ce tutoriel sont:
Paramètres intégrés:
Flash vars:
Si vous souhaitez une explication plus complète de cette page et de Flash Vars, mon collègue Joseph Labreque a publié un aperçu technique assez détaillé de Strobe Media Playback sur active.tutsplus..
Votre affiche devrait apparaître dans le lecteur. Si vous ne voulez pas que ce gros bouton de lecture sur l’affiche, définissez la propriété playButtonOverlay sur False dans la zone Flash vars.
Lorsque le fichier s'ouvre, lancez la lecture du film. Ce qui est vraiment bien, c'est que tous les contrôles sont actifs - ce qui signifie que si vous utilisez un fichier HD mp4, votre vidéo grandira pour remplir l'écran avec peu ou pas de pixelisation..
Finalement! Bienvenue dans le monde du streaming vidéo Flash sans que vous ayez besoin de rien savoir de Flash. Cliquez ici pour voir ce projet sur mon site.
Comme je l'ai indiqué au début de ce document, je ne pense vraiment pas que Flash Video va disparaître de si tôt. Néanmoins, avec l’avènement d’un environnement multi-écrans, il est désormais possible de lire la même vidéo, par exemple un Droid, un iPhone, une tablette Samsung Galaxy et votre téléviseur HD. Cela rend évidemment les concepteurs Web un peu nerveux parce que? bien? En effet, intégrer de la vidéo en streaming dans le passé était plutôt technique. Ce n'est plus vraiment le cas! Comme je l'ai souligné dans cet article, si vous pouvez copier et coller du texte dans une page Web, Adobe a quelques solutions à vous proposer..
Si vous trouvez cela intéressant et que vous voulez vraiment creuser dans OSMF ou Strobe, vous devriez vraiment commencer par la série de Joeseph Labreque qui a débuté à l'actif. tutsplus, car il aborde plus en détail les aspects techniques du débat vidéo en streaming.
Accentsconagua