Share
Dans ce tutoriel débutant à intermédiaire, je vais vous montrer comment lire une vidéo HD sans le flou inévitable qui se produit lorsque la vidéo est agrandie..
La raison en est que j'en ai un peu marre de visiter YouTube ou d'autres sites proposant de la vidéo HD avec une option plein écran, mais que je découvre, lorsque je clique sur le bouton Plein écran, que j'ai soudain besoin d'une nouvelle ordonnance pour mes lunettes..
Le problème ne réside pas dans la vidéo mais dans la manière dont Flash Player gère le processus pour passer en plein écran. Voyons comment faire les choses correctement…
Lorsque vous lisez une vidéo dans Flash Player, celle-ci, à toutes fins utiles, est intégrée à la scène. Cliquez sur le bouton plein écran et la scène s'agrandit. Lorsque la scène s'agrandit, la vidéo s’accompagne. Agrandir une vidéo 720 par 480 à 1280 par 720 et est-il étonnant que la vidéo devienne floue?
Adobe s’est attaqué à ce problème lorsqu’il introduisait la possibilité de lire des vidéos en Full HD avec Flash Player. Leur solution, introduite dans Flash Player 9.0.115.0, était extrêmement élégante. Au lieu d’agrandir la scène, pourquoi ne pas "survoler" la vidéo dans un rectangle "au-dessus" de la scène et laisser le concepteur ou le développeur décider s’il faut agrandir la scène ou juste un morceau de celle-ci. Ceci est accompli grâce à un autre élément d'ingénierie intelligente de la part d'Adobe: accélération et mise à l'échelle matérielles..
L'accélération matérielle est appliquée via Flash Player. Si vous cliquez avec le bouton droit de la souris (PC) ou en maintenant la touche Ctrl (Mac) enfoncée sur un fichier swf en cours de lecture dans une page Web, vous ouvrez le menu contextuel de Flash Player. Sélectionner Réglages et vous serez présenté avec la fenêtre des paramètres montrés dans l'image 1. Si vous sélectionnez Activer l'accélération matérielle vous êtes en mesure de visionner une vidéo HD plein écran. Si vous ne le sélectionnez pas, un bouton plein écran permet au lecteur d'utiliser l'API de mise à l'échelle utilisée lorsqu'un fichier FLV est sorti en plein écran. La chose intéressante à ce sujet est que, même si vous avez sélectionné l'accélération matérielle, elle n'est utilisée que lorsque cela est nécessaire. Ainsi, lorsqu'un bouton Plein écran est cliqué, seul le rectangle dont le contenu - une vidéo dans cet exemple - est redimensionné en plein écran et l'accélération matérielle prenant le relais pour lire la vidéo.
Après vous avoir expliqué comment vous avez lu ce didacticiel, procédez comme suit pour créer une expérience vidéo HD plein écran:
Le téléchargement comprend un fichier .mp4 - Vultures.mp4. C'est un extrait d'une série télévisée produite par mon collège, l'institut de technologie et d'apprentissage avancé Humber. Nous utiliserons ce fichier pour le projet, bien que des fichiers mov, f4v et physiquement volumineux puissent également être utilisés..
Vous avez peut-être entendu beaucoup de «buzz» sur la vidéo HD et le format .mp4 au cours des deux dernières années et vous vous demandez en quoi consiste le bavardage. Voici un bref "pas d'ascenseur":
La clé du format .mp4 est la norme vidéo AVC / H.264 introduite dans Flash Player en août 2007. La norme .mp4, plus précisément, est connue sous le nom de MPEG-4, norme internationale développée par Motion Pictures. Groupe d’experts (MPEG) et le format possède également une reconnaissance ISO.
Ce qui rend ces fichiers si attrayants pour les concepteurs et les développeurs Flash est que les fichiers MPEG-4 ne dépendent pas du périphérique. Ils peuvent tout aussi bien être lus sur un téléviseur HD, un iPod ou une Playstation que dans un navigateur. De plus, grâce à la prise en charge de l'accélération matérielle et du multithreading intégrée dans Flash Player, vous pouvez lire des vidéos à n'importe quelle résolution et résolution, y compris la résolution Full HD 1080p que vous regardez sur des téléviseurs HD..
L’un des aspects de la norme MPEG-4 que je trouve plutôt intrigant est que, comme le format XFL qui commence à être utilisé dans toute la suite CS4, il s’agit d’un format "conteneur". Cela signifie que les fichiers .mp4 peuvent stocker plusieurs types de données sur plusieurs pistes du fichier. Ce qu'il fait, c'est synchroniser et entrelacer les données, ce qui signifie qu'un fichier .mp4 peut également inclure des métadonnées, des illustrations, des sous-titres, etc. auxquels Flash peut potentiellement accéder. C'est la bonne nouvelle. La mauvaise nouvelle est que, même si le conteneur MPEG-4 peut contenir plusieurs pistes audio et vidéo, Flash Player n'en lit actuellement qu'une seule et ignore le reste. L'autre mauvaise nouvelle est que ce format ne prend pas en charge la transparence, ce qui signifie que si vous souhaitez ajouter un canal alpha, vous revenez au format FLV..
Enfin, les fichiers H.264 .mp4 nécessitent une puissance de traitement élevée. Adobe nous a clairement fait savoir que ce contenu est mieux visualisé sur les ordinateurs double cœur et les ordinateurs Mac. Le passage à ces processeurs est en cours depuis quelques années, mais il faudra attendre encore quelques années avant que tous les ordinateurs soient capables de gérer les demandes de processeurs que ce format requiert..
J'ai à peine écrémé la surface de ce format. Si vous voulez vous plonger dans ce format, jetez un œil à H.264 pour le reste de nous, écrit par Kush Amerasinghe sur Adobe. C'est un formidable guide pour ceux qui découvrent cette technologie.
Ouvrez le BigItUp.fla fichier situé dans le téléchargement. Si vous travaillez pour la première fois avec un fichier H264 ou si vous passez en plein écran, vous constaterez peut-être que les dimensions de la scène Flash (1050 sur 500) sont plutôt volumineuses. Nous avons besoin de l’espace scénique pour accueillir la vidéo d’une taille physique de 854 x 480 et pour laisser de la place au bouton situé dans le coin supérieur gauche de la scène..
Ajoutez le code ActionScript suivant au calque actions:
import flash.geom. *; import flash.display.Stage; var mySound: SoundTransform; var myVideo: Vidéo; var nc: NetConnection = new NetConnection (); nc.connect (null); var ns: NetStream = new NetStream (nc); ns.client = this; btnBig.buttonMode = true;
Nous commençons par introduire le package de géométrie et la classe Stage afin de prendre la vidéo "en survol" en plein écran. Les deux variables suivantes, mySound et myVideo, vont être utilisées pour définir le niveau de volume de l'audio et créer un objet vidéo..
Avec ce ménage hors du chemin, nous avons mis en place la NetConnection et NetStream objets qui permettront la lecture de la vidéo. La dernière ligne met le MovieClip utilisé pour obtenir la vidéo en plein écran dans boutonMode.
Ajoutez le code ActionScript suivant:
Accentsconagua
ns.addEventListener (NetStatusEvent.NET_STATUS, netStatusHandler); function netStatusHandler (evt: NetStatusEvent): void if (evt.info.code == "NetStream.FileStructureInvalid") trace ("La structure de fichier du MP4 n'est pas valide."); else if (evt.info.code == "NetStream.NoSupportedTrackFound") trace ("Le MP4 ne contient aucune piste prise en charge"); function onMetaData (md: Object): void myVideo.width = md.width; myVideo.height = md.height; La première fonction nous permet de vérifier les erreurs. Tous les fichiers mp4 ne sont pas créés de la même manière et si la vidéo ne joue pas, il serait bon de savoir quel est le problème. Dans ce cas, nous allons écouter quelques messages d'erreur de la classe NetStream qui sont pertinents pour les fichiers mp4. La première consiste à vérifier que le fichier n'est pas corrompu ou dans un format qui n'est pas pris en charge. Ce n'est pas parce qu'un fichier sera lu dans le lecteur Quicktime qu'il sera lu dans Flash.
La suivante s'assure que les pistes audio et vidéo sont prises en charge. Par exemple, si le codage H.264 n'est pas utilisé sur la piste vidéo ou si le codage AAC n'est pas appliqué à la piste audio, vous aurez des problèmes.
La fonction suivante va dans les métadonnées du fichier vidéo pour obtenir les valeurs de largeur et de hauteur de l'objet vidéo..
Entrez le code ActionScript suivant:
fonction goFullScreen (evt: Object): void var scalingRect: Rectangle = nouveau Rectangle (myVideo.x, myVideo.y, myVideo.width, myVideo.height); stage ["fullScreenSourceRect"] = scalingRect; if (stage.displayState == StageDisplayState.NORMAL) stage.displayState = StageDisplayState.FULL_SCREEN; else stage.displayState = StageDisplayState.NORMAL; ; btnBig.addEventListener (MouseEvent.CLICK, goFullScreen);<
C'est là que la "magie" se produit. Cette fonction crée le rectangle utilisé pour contenir la vidéo et sa taille est définie pour correspondre à celle des dimensions de l'objet vidéo extraites de la deuxième fonction du bloc de code précédent. La ligne suivante définit le fullScreenSourceRect propriété de la scène aux dimensions du rectangle que l'on vient de créer.
L'instruction conditionnelle constituant le reste du bloc de code vérifie l'état actuel de la taille de la scène de normal à plein écran ou vice versa. Voici comment la vidéo passe en plein écran. L'objet vidéo est placé dans cette source droite, pas sur la scène, ce qui signifie qu'il peut s'agrandir ou se contracter sans que la scène fasse de même et "fuzzing" la vidéo.
La dernière ligne utilise le bouton de la scène pour passer en plein écran.
Entrez le code ActionScript suivant:
myVideo = new Video (); myVideo.x = 185; myVideo.y = 5; addChild (myVideo); myVideo.attachNetStream (ns); ns.play ("Vultures.mp4"); mySound = ns.soundTransform; mySound.volume = .8; ns.soundTransform = mySound; Le premier bloc de code indique à Flash que la variable "myVideo" est le nom d'un objet vidéo situé à 185 pixels du bord gauche de l'énorme scène et à 5 pixels du haut. le addChild () méthode met l'objet vidéo sur la scène et les deux lignes restantes connectent l'objet vidéo à la NetStream et commencer la lecture de la vidéo.
Le dernier bloc de code examine la piste audio de la vidéo qui est introduite dans le projet par le biais du NetStream et abaisse le volume audio à 80%.
Enregistrez le fichier dans le même dossier que la vidéo.
Normalement, à ce stade du didacticiel, je vous demanderais également de tester le swf. Vous pouvez, mais le bouton ne fonctionnera pas. Le mieux que vous puissiez attendre est de voir la vidéo jouer dans le swf. La fonctionnalité Plein écran est gérée par le wrapper HTML de votre swf, et non par Flash. Traitons avec celui-là.
Sélectionnez Fichier> Paramètres de publication. Lorsque la boîte de dialogue Paramètres de publication s'ouvre, sélectionnez les options SWF et HTML..
Cliquez sur l'onglet Flash. Sélectionnez Flash Player 9 ou Flash Player 10 dans la liste déroulante du lecteur. N'oubliez pas que les vidéos HD ne peuvent être lues que dans Flash Player 9 ou une version ultérieure..
Cliquez sur l'onglet HTML. Dans le menu déroulant Modèle, sélectionnez Flash uniquement - Autoriser le plein écran..
Cliquez sur le bouton Publier pour créer le fichier SWF et le fichier HTML..
Enregistrez le fichier, quittez Flash et ouvrez la page HTML dans un navigateur. Allez-y, cliquez sur le "Grand il vers le haut!" bouton.
Qu'en est-il? Les concepteurs et les développeurs Real Flash n'utilisent pas de composants "steenking".
En décembre 2007, Adobe publie discrètement la mise à jour 3 de Flash Player 9. J'utilise le mot "tranquillement" car, mélangés aux corrections de bogues et aux modifications habituelles, ils se sont glissés dans une version mise à jour du composant FLVPlayback qui lui permettait de lire les fichiers HD. vidéo. Voici comment:
Ouvrez un nouveau document Flash ActionScript 3.0 et enregistrez-le dans le même dossier que la vidéo Vultures..
Sélectionner Fenêtre> Composants et dans les composants vidéo, faites glisser une copie du FLVPlayback composant à la scène.
Ouvrez l'inspecteur de composants. Vous devez faire deux choses ici. Sélectionnez le SkinUnderAllNoCaption.swf dans la zone de peau, dans la zone source, accédez au Vautours.mp4 fichier et ajoutez-le à la boîte de dialogue Chemin du contenu. Activez la case à cocher Faire correspondre les dimensions source, puis cliquez sur OK. Flash entrera dans la vidéo et récupérera les métadonnées. Lorsque cela est terminé, la boîte de dialogue se ferme et le composant grandit aux dimensions de la vidéo. Fermer l'inspecteur de composants.
Sélectionnez Modifier> Document et cliquez sur le bouton. Contenu bouton pour redimensionner la scène à la taille du composant… en quelque sorte. Lorsque la scène est définie sur la taille du composant, elle est redimensionnée uniquement à la taille de la vidéo. La peau restera suspendue au bas de la scène, ce qui signifie qu'elle ne sera pas visible dans une page Web. Modifiez la valeur de hauteur à 525 pixels pour adapter la peau. Cliquez sur OK pour accepter le changement..
Bien sûr, maintenant que vous avez modifié les dimensions de la scène, le composant est suspendu. Sélectionnez le composant et, dans le panneau Propriétés, définissez les coordonnées X et Y sur 0.
Sélectionnez Fichier> Paramètres de publication et choisissez les types de fichiers SWF et HTML..
Cliquez sur l'onglet Flash et sélectionnez Flash Player 9..
Cliquez sur l'onglet HTML et sélectionnez Flash uniquement - Autoriser le plein écran dans la liste des modèles..
Cliquez sur le bouton Publier. Lorsque le fichier SWF et le fichier HTML sont publiés, cliquez sur OK. Enregistrez le fichier et quittez Flash.
Ouvrez le fichier HTML dans un navigateur. Cliquez sur le bouton Plein écran pour passer en mode plein écran..
Dans ce tutoriel, je vous ai montré deux manières de passer en mode plein écran en douceur avec Flash. La première méthode utilisait ActionScript pour rendre cela possible. La clé consistait à créer un rectangle qui "survolait" la scène et était utilisé pour contenir la vidéo..
Le deuxième exemple vous a montré comment utiliser le composant FLVPlayback pour passer en mode plein écran.
Comme vous l'avez découvert, la clé des deux projets n'était pas le code ActionScript, mais l'encapsuleur HTML qui permettait la lecture en plein écran..
Ces tutoriels fonctionnent toujours localement mais je suis sûr que vous vous demandez s'ils fonctionneraient réellement en ligne. J'ai posté les deux pour prouver que "Oui, en effet, cela peut être fait."
L'approche de code dans le premier exemple peut être trouvée ici. La vidéo est aimablement fournie par Adobe et Red Bull et est une production complète de 1080p.
Les vautours apparaissent dans un exemple qui utilise le composant ici.
