http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

insertion vidéo sur la page: utiliser javascript et flash

  1. Auteur de la publication

Il y a quelque temps, j'ai mentionné la balise video, spécialement mise en œuvre dans html5. malheureusement, l’utilisation de l’étiquette causera plus de désagréments que d’avantages. par conséquent, je vais vous parler de la façon dont vous pouvez complètement faire avec un format vidéo.

pour un projet, j'avais besoin de trouver la possibilité de dévisser des vidéos sur le site. Il n’était pas possible de créer un lecteur à partir de rien sur un flash (pour commencer, je n’ai pas d’environnement de développement et je ne le fournissais pas), il était donc nécessaire de trouver un candidat approprié face à un lecteur flash. rien de particulièrement compliqué n’était nécessaire, car grâce à YouTube, il est très facile de naviguer dans ce type de lecteurs;)

2 candidats situés sur les sites flv-mp3.com (un projet d’uppodʻa) et flowplayer . Ayant fait un petit coup chacun, le premier fut rapidement abandonné au profit de la moissonneuse-batteuse fournissant l’API actuelle. comme le temps l’a montré, l’intestin ne m’a pas laissé tomber (bien que certaines personnes aient réussi à rentrer dans vtyuhat flv-mp3.com).

Comme vous le savez, la première impression est plutôt trompeuse et la préférence est parfois donnée au périphérique le moins saturé (surtout s’il utilise la langue maternelle). C’est cette approche qui était demandée sur flv-mp3: le service offre la possibilité d’assembler un lecteur présentant des caractéristiques spécifiées (en particulier). forme indiquez le fichier en cours de lecture, l'économiseur d'écran, les dimensions et quelques autres paramètres) et obtenez le code de sortie pour insérer le fichier. Oui, l'option peut sembler très pratique, en particulier pour les personnes qui considèrent le langage HTML comme une sorcière puissante, sans parler de js, etc.

seul l'ajout périodique de vidéos sur le site est peu susceptible de contribuer à l'enthousiasme de "construire" constamment le lecteur lui-même. Vous pouvez également explorer tous les paramètres et les automatiser via la langue du serveur. mais ce principe ne peut s'appeler que déformé (il est beaucoup plus facile de charger des vidéos sur YouTube et d'obtenir le code prêt pour le téléchargement).

nous arrivons à la même chose que l’on peut déjà appeler pleinement une sorcière. vous voulez comprendre la magie javascript? Je vais montrer que ce n'est pas du tout difficile (même plus facile que d'utiliser un constructeur). et aider avec ce flowplayer. vous pouvez choisir une version d'ici , mais la toute première version distribuée sous GPL3 convient parfaitement à votre site.

Le lecteur prend en charge la lecture du contenu suivant: flv, mp4, m4v (pour les images - jpg, gif, png). La vidéo est prise en charge depuis la version 9, il ne devrait donc y avoir aucun problème de support.

Téléchargez l'archive avec le lecteur et décompressez-la. Vous devrez télécharger 3 fichiers sur le site: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf et example / flowplayer-NumVer.min.js , où NumVer correspond uniquement au numéro de version, par exemple 3.2.7 .

Le premier fichier contient le panneau de commande, le second - directement le lecteur et le troisième est le lien qui fournit l’API. Les 2 premiers fichiers (* .swf) doivent être dans le même dossier. il est maintenant temps pour le code le plus simple. ce peut être:

<div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

L'élément div avec l'ID de joueur est le conteneur dans lequel la vidéo sera dévissée. la deuxième ligne est la connexion de fichier javascript. Directement pour la sortie est responsable une fonction flowplayer () , qui passe 3 paramètres:

  1. ID de l'élément dans lequel la vidéo doit être lue;
  2. le chemin d'accès au joueur (à savoir au joueur et non aux commandes qui seront automatiquement chargées);
  3. Quelques paramètres supplémentaires.

A propos, en plus de l'identifiant, vous pouvez directement passer une référence à un objet ou à un sélecteur.

Le code ci-dessus n'affiche rien, mais il donne une idée de la facilité avec laquelle il est possible de connecter un flowplayer à une page. Pour sortir une vidéo, vous devez créer un troisième paramètre, ce qui est d'ailleurs assez simple.

pour plus de simplicité: le troisième paramètre (config) est un tableau associatif dans lequel les éléments suivants peuvent être décrits:

  • clip - cette touche vous permet de définir des paramètres globaux, par exemple, si vous souhaitez démarrer automatiquement la mise en mémoire tampon (autoBuffering) ou la lecture (lecture automatique), comment redimensionner le contenu (la mise à l'échelle avec la valeur de fit conservera le rapport de format d'origine et sera utilisée, peut-être que ça). Vous pouvez également spécifier le fichier en cours de lecture (URL) et même suspendre des événements (fonctions qui seront appelées, par exemple, au début de la lecture du film);
  • playlist est un tableau régulier (liste). chaque élément peut être une chaîne (dans ce cas, la chaîne est l'adresse du clip en cours de lecture) ou un tableau associatif. dans le second cas, l’ensemble de données peut être visualisé sous la forme d’un ensemble de données similaire à la clé de clip de l’élément précédent, c’est-à-dire que vous pouvez spécifier l’utilisation de la mise en mémoire tampon, le démarrage de la lecture, etc.
  • plugins - sert à étendre les fonctionnalités standard. L’une des caractéristiques est la possibilité de russifier l’interface sur-le-champ.

Voici maintenant un petit exemple qui comprend une démonstration des possibilités:

<div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, mise à l'échelle : 'fit'}, playlist: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: true, lecture automatique: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // pour manipuler les contrôles des plugins: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // supprime les boutons de rembobinage stop: true, // ajoute un bouton Stop scrubber: true // false désactive le défilement de la vidéo}}})); </ script>

Le code présenté définit les paramètres suivants en tant que paramètres globaux: désactivation de la lecture avec démarrage automatique, désactivation de la mise en mémoire tampon automatique, mise à l'échelle de la vidéo pour l'adapter à la fenêtre. En tant que fichier lisible, une image et une vidéo sont utilisées et les paramètres de l'image sont remplacés (car ils doivent être chargés automatiquement). Lorsque vous cliquez sur l'image (ou sur le bouton de lecture), la vidéo est affichée. comme vous pouvez le constater, tout est très simple. si vous souhaitez ajouter un autre clip vidéo, ajoutez simplement un nouvel élément à la liste de lecture, séparé par une virgule. si la lecture automatique de la liste de lecture est requise, dans le clip de tableau associatif défini, la valeur de lecture automatique est définie sur true.

la documentation contenant les fonctions api est située ici . si quelqu'un ne comprend pas l'anglais - peu importe, tout y est clair. et après avoir analysé le code ci-dessus, il est tout à fait possible de comprendre ce qui se trouve dans les docks. Je recommande fortement de jeter un coup d'œil, il est certain qu'il y aura un «paramètre» qui sera demandé.

exemple peut regarde ici . n'oubliez pas de regarder le code source (Ctrl + U)

Auteur de la publication

hors ligne 1 semaine

x64 (aka andi)

Commentaires: 2842 Publications: 395 Inscription: 02-04-2009Vous voulez comprendre la magie javascript?
Карта