Sélection du lecteur et création de la page HTML
Exemple du lecteur Platinum
Exemple du lecteur Glass
Exemple du lecteur Wood
Exemple du lecteur Mech
Exemple du lecteur Youtube
Exemple du lecteur Plastic
Quand vous créez une vidéo pour une page HTML, il peut être utile de créer un lecteur pour votre vidéo flash et de l'intégrer dans le code de la page. AVS Video Converter peut le faire pour vous.
D'abord sélectionnez la vidéo à convertir, le nom et le répertoire de stockage pour le fichier vidéo de sortie. Consultez la section Conversion en FLV pour plus d'information.
Puis cochez l'option Créer un lecteur Flash et une page HTML dans l'onglet Lecteur Flash du panneau Paramètres avancés d'AVS Video Converter:
Après cela vous pouvez sélectionner un des thèmes disponibles pour le lecteur flash depuis la liste déroulante. Un lecteur vidéo avec ses propres contrôles sera ajouté à votre vidéo flash créée. Vous pouvez sélectionner les options Lire la vidéo en boucle pour faire reproduire une vidéo sans interruption, et Lancer automatiquement la lecture d'une vidéo pour lancer la lecture automatique d'une vidéo dès qu'elle est chargée.
Une page HTML avec le code indiqué ci-dessous sera créée et placée dans le dossier de sortie avec la vidéo de sortie.
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1252">
<title>AVS Flash Player</title>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
body { background-color: #FFFFFF; font: .8em/1.3em verdana,arial,helvetica,sans-serif }
#flashcontent { border: solid 1px #000; width: 356px; height: 321px; float: left }
</style>
</head>
<body>
<div id="flashcontent">
<strong>You need to upgrade your Flash Player.</strong>
</div>
<script type="text/javascript">
var so = new SWFObject('player_v4.swf', 'player', '356', '321', '7', "#000000");
so.addParam("allowScriptAccess","always");
so.addParam("allowFullScreen","true");
so.addParam("wmode", "window");
so.addParam("scale", "noscale");
so.addVariable("file", "2_NEW.flv");
so.addVariable("height", "321");
so.addVariable("width", "356");
so.addVariable("theme", "Glass.swf");
so.addVariable("repeat", "0");
so.addVariable("autostart", "0");
so.addVariable("image", "");
so.addVariable("volume", "50");
so.addVariable("scaleonresize", "none");
so.addVariable("top_caption", "");
so.addVariable("bottom_caption", "");
so.addVariable("v", getQueryParamValue("v"));
so.write("flashcontent");
</script>
</body>
</html>
Quand tout est prêt, cliquez sur le bouton Convertir! pour lancer le processus de conversion.
Vous pouvez ouvrir la page HTML plus tard en utilisant votre éditeur HTML préféré, la changer, copier et l'intégrer dans votre propre page Web. Il est important de mettre tous les fichiers depuis le dossier de la vidéo de sortie là où votre page Web est située sur votre serveur Web pour assurer le bon fonctionnement.
Remarque: vous avez besoin de copier le code depuis la page HTML créée dans votre propre page de la manière suivante:
- inclure le code entre les tags <style type="text/css"> et </style> dans votre fichier CSS ou dans le style du code sur la page (si vous avez déjà le style pour la section body défini sur votre page, vous aurez besoin d'omettre la première ligne - body { background-color: #FFFFFF; font: .8em/1.3em verdana, arial, helvetica, sans-serif } et d'utiliser votre style pour le body de la page);
- inclure le code <script type="text/javascript" src="swfobject.js"></script> dans la section <head> de votre page;
- inclure le code entre les tags <body> et </body> dans la zone de votre page où le lecteur sera placé.
Vous pouvez aussi changer les lignes de code suivantes:
#flashcontent { border: solid 1px #000; width: 356px; height: 321px; float: left } - le style utilisé pour votre lecteur flash. Il comprend les paramètres variables suivants:
- border: solid 1px #000 - la bordure utilisée pour la fenêtre du lecteur.
- Le paramètre solid détermine le style de la bordure (le style peut être dashed, dotted, double, groove, hidden, inset, none, outset, ridge). Si vous sélectionnez la valeur none, la bordure ne sera pas affichée.
- 1px - la largeur de la bordure utilisée en pixels. Vous pouvez entrer n'importe quelle valeur nécessaire.
- #000 - la couleur de la bordure utilisée au format hexadécimal. #000 ou #000000 correspond à la couleur noire, #ffffff - à la couleur blanche. Vous pouvez utiliser n'importe quelle combinaison de six chiffres de 0 à 9 et de lettres de a à f pour former une couleur, mais n'oubliez pas d'entrer le symbole dièse # devant eux.
- width: 356px - la largeur de la fenêtre du lecteur mesurée en pixels (la largeur de la zone sur votre page Web pour le lecteur). Elle est sélectionnée automatiquement selon le preset utilisé lors de la conversion du fichier vidéo ou selon la largeur déterminée de la vidéo flash de sortie, si le profil sélectionné a été modifié.
- height: 321px - la hauteur de la fenêtre du lecteur mesurée en pixels (la hauteur de la zone sur votre page Web pour le lecteur). Elle est sélectionnée automatiquement selon le preset utilisé lors de la conversion du fichier vidéo ou selon la hauteur déterminée de la vidéo flash de sortie, si le profil sélectionné a été modifié.
- float: left - la position du lecteur sur votre page créée. Les valeurs possibles incluent float:right (le lecteur flash sera placé dans la partie droite de votre page) et float:none (la vidéo sera placée dans la zone par défaut sur votre page d'accueil qui est déterminée par les paramètres du style de votre page).
var so = new SWFObject('player_v4.swf', 'player', '356', '321', '7', "#000000");
- 'player_v4.swf' - le nom et le chemin du fichier du lecteur utilisé pour la lecture de la vidéo flash. Il est habituellement placé dans le même dossier que la page HTML créée. Si vous changez sa location, vérifiez si ces changements sont indiqués dans le chemin du fichier du nouveau lecteur.
- 'player' - l'identifiant (id) attribué au lecteur par le programme. Habituellement vous ne devez pas le changer.
- '356' - la largeur de la zone attribuée pour le lecteur flash mesurée en pixels. Elle est sélectionnée automatiquement selon le preset utilisé lors de la conversion du fichier vidéo ou selon la largeur déterminée de la vidéo flash de sortie, si le profil sélectionné a été modifié.
- '321' - la hauteur de la zone attribuée pour le lecteur flash mesurée en pixels. Elle est sélectionnée automatiquement selon le preset utilisé lors de la conversion du fichier vidéo ou selon la hauteur déterminée de la vidéo flash de sortie, si le profil sélectionné a été modifié.
- '7' - le numéro de la version du lecteur flash qui doit être utilisée pour la lecture de la vidéo flash. Au cas où cette valeur est supérieure que la version du lecteur Adobe Flash installé sur l'ordinateur de l'utilisateur, le message placé entre <div id="flashcontent"><strong> et </strong></div> sera affiché (dans notre cas il se présente comme suit: Mettez à jour votre lecteur Flash.) au lieu du lecteur vidéo flash.
- "#000000" - la couleur de fond de votre vidéo Flash au format hexadécimal. #000000 correspond à la couleur noire, #ffffff - à la couleur blanche. Vous pouvez utiliser n'importe quelle combinaison de six chiffres de 0 à 9 et de lettres de a à f pour former une couleur, mais n'oubliez pas d'entrer le symbole dièse # devant eux.
so.addVariable("wmode", "window"); - définit les propriétés de la fenêtre de la vidéo flash comme la transparence, la création des couches et la position dans le navigateur. Les valeurs possibles sont les suivantes: window (le film est reproduit dans sa propre fenêtre rectangulaire sur une page Web), opaque (le film cache tout ce qui se trouve sur la page derrière lui), transparent (le fond de la page HTML est affiché entre toutes les parties transparentes du film, cela peut ralentir l'animation).
so.addVariable("scale", "noscale"); - définit le comportement du film en ce qui concerne la taille et l'apparence de la fenêtre du lecteur. Les valeurs sont les suivantes: default (show all) (rend tout le film visible dans la zone définie, sans distorsion, tout en maintenant le rapport d'aspect original du film; les bords peuvent apparaître sur les deux côtés du film), noorder (ajuste la taille du film pour l'adapter à la zone spécifiée, sans distorsion, mais probablement en le recadrant, et en gardant le rapport d'aspect original du film), exactfit (rend tout le film visible dans la zone définie sans garder le rapport d'aspect original; dans ce cas le film peut être déformé).
so.addVariable("file", "2_NEW.flv"); - le fichier de la vidéo flash convertie et son chemin. Il est habituellement placé dans le même dossier que la page HTML créée. Si vous changez sa location, vérifiez si ces changements sont indiqués dans le chemin du fichier du nouveau lecteur.
so.addVariable("height", "321"); - la hauteur du lecteur flash lui-même en pixels. Elle est sélectionnée automatiquement selon le preset utilisé lors de la conversion du fichier vidéo ou selon la hauteur déterminée de la vidéo flash de sortie, si le profil sélectionné a été modifié. Si vous changez cette valeur, vous avez besoin de modifier la valeur de largeur - so.addVariable("width", "356"); ainsi, la taille du lecteur est changée proportionnellement.
so.addVariable("width", "356"); - la largeur du lecteur flash lui-même en pixels. Elle est sélectionnée automatiquement selon le preset utilisé lors de la conversion du fichier vidéo ou selon la largeur déterminée de la vidéo flash de sortie, si le profil sélectionné a été modifié. Si vous changez cette valeur, vous avez besoin de modifier la valeur de hauteur - so.addVariable("height", "321"); ainsi, la taille du lecteur est changée proportionnellement.
so.addVariable("theme", "Glass.swf"); - le nom et le chemin de l'exemple du lecteur flash sélectionné avant la conversion. Il est habituellement placé dans le même dossier que la page HTML créée. Si vous changez sa location, vérifiez si ces changements sont indiqués dans le chemin du fichier du nouveau lecteur.
so.addVariable("repeat", "0"); - le paramètre de répétition du film sélectionné avant la conversion. S'il est fixé à 0, cela signifie que la vidéo ne sera pas reproduite sans interruption et elle arrêtera dès que la lecture est terminée, ou s'il est fixé à 1, cela signifie que la vidéo est lue en boucle et elle sera reproduite chaque fois sans interruption dès le début.
so.addVariable("autostart", "0"); - le paramètre de lancement automatique du film sélectionné avant la conversion. S'il est fixé à 0, cela signifie que la lecture ne sera pas lancée automatiquement dès que la page avec la vidéo est chargée dans le navigateur, ou s'il est fixé à 1, cela signifie le lancement automatique.
so.addVariable("image", ""); - le nom et le chemin de l'image qui sera affichée quand la page est chargée, si la valeur d'autostart est fixée à 0 (c'est-à-dire, le lancement automatique est désactivé). Vous pouvez sélectionner un fichier graphique au format .jpg ayant la taille correcte (la hauteur et la largeur sont égales à celles du lecteur/ de la zone attribuée pour le lecteur), mais n'oubliez pas d'entrer un chemin correct. Vous avez besoin d'insérer le nom et le chemin de l'image entre guillemets, par exemple so.addVariable("image", "../images/MyImage.jpg");.
so.addVariable("volume", "50"); - le volume qui sera utilisé lors de la lecture de votre film.
so.addVariable("top_caption", ""); - le titre en haut qui sera affiché quand vous faites glisser le curseur de la souris sur la fenêtre du lecteur. Si vous laissez ce champ vide, le titre par défaut sera affiché. Si vous décidez de le changer, vous aurez besoin d'insérer le nom nécessaire entre guillemets, par exemple so.addVariable("top_caption", "my top caption").
so.addVariable("bottom_caption", ""); - le titre en bas qui sera affiché quand vous faites glisser le curseur de la souris sur la fenêtre du lecteur. Si vous laissez ce champ vide, le titre par défaut sera affiché. Si vous décidez de le changer, vous aurez besoin d'insérer le nom nécessaire entre guillemets, par exemple so.addVariable("bottom_caption", "my bottom caption").
Remarque: pour en savoir plus sur les paramètres vidéo et ceux du lecteur, consultez le site
Adobe.