Introduction

Cité du manuel original :

Le plugin AllVideos fût initié par une idée sur comment amener tout ces sites de "partage de vidéos" (YouTube, Google Video etc.) à la communauté Joomla! d'une manière simple, combinant les services de partage vidéo les plus populaires, à une cible de personne ne sachant pas du tout ce qu'est le HTML !

Le plugin AllVideos Reloaded vous donne la possibilité d'inclure les vidéos diffusées en ligne dans votre contenu (articles) ou même vos propres vidéos ou fichiers audio étant sur vos serveurs. Cela signifie que vous pouvez toujours utiliser, par exemple, YouTube pour envoyer vos vidéos et ensuite les inclure (stream) dans votre site sans manger la bande passante de votre serveur ou d'avoir à dépenser de l'argent dans un logiciel de convertion de vidéo ! Vous êtes maintenant capable d'inclure et de jouer n'importe quel type de vidéo / contenu audio, en utilisant des tags simples, depuis le contenu envoyé sur votre serveur. Plus simple pour le podcast également ! Donc en plus d'être facile à utiliser, le plugin AllVideos Reloaded est rapide à mettre en place, bon marché et flexible pour le contenu à streamé !

Voici une courte liste des caractéristiques :

1. Supporté nativement par Joomla! 1.5. Pas besoin de "legacy mode".
2. Environ 35 fournisseurs de videos, incluant les sites Google Vidéo régionaux.
3. Le streaming de ses propres videos ou contenus audio, pour la plupart des formats média (.flv, .swf, .mov, .mp4, .wmv, .avi, .mpg, .mpeg, .rm, .ram, .wma, .mp3 etc.).
4. Un lecteur unique qui fournit une cohérence pour tous les types de média inclut sur votre site Joomla!
5. Une classe CSS pour adapter la façon dont sont affichées les videos à travers le fichier CSS du template. Pratique pour adapter différents template sur différentes catégories/sections.
6. Un dossier local "principal" de vidéo pour stocker vos vidéos et les affichers avec un simple tag du style {flv}mon_tripe_a_hawaii{/flv}.
7. Un dossier local "principal" de fichiers audio pour stocker vos fichiers audio et les afficher avec un simple tag, du style {mp3}nadasurf-popular{/mp3}, avec des paramètres supplémentaires pour le lecteur audio.
8. Pour personnaliser des vidéos particulières, tous les paramètres peuvent être ajoutés dans le tag.
9. Possibilité d'inclure votre propre logo watermark sur le lecteur vidéo.

Licence

Ce plugin est sous licence GNU public, Version 2.0.

Ce plugin utilise un des meilleurs lecteur flash disponible sur Internet : Le JW Media Player par Jeroen Wijering. Ce lecteur est sous licence Creative Commons. Cela vous permet de l'utiliser et de le modifier pour un usage non-commercial. Pour un usage commercial, Jeroen peut vous fournir des licences (15 euros pour une licence simple site jusqu'à 100 euros pour un usage illimité). Pour plus d'information ou pour les acheter, rendez-vous sur sa page d'achat en ligne. !

Merci de soutenir Jeroen !

Streaming de contenu local

Avec AllVideos Reloaded, il est possible pour tout le monde de streamer un média qui a précedemment été envoyé sur le serveur en utilisant la méthode standard de Joomla! ou une autre méthode d'envoi de fichier (ftp...). Cette option peut être utile pour beaucoup de raisons. Par exemple, imaginons le site d'une société qui a besoin d'afficher les vidéos de la société sans aucun logo YouTube ! Une autre situation possible peut être la crainte que le fournisseur de vidéo soit en panne, laissant la vidéo vide sur votre site.

Vous pouvez uploader sur votre site Joomla! presque n'importe quel type de format vidéo utilisé de nos jours sur Internet. De Windows Média jusqu'à QuickTime, Flash, DivX ou Réal Média et bien sûr MP3 !

Donc, comment pouvez vous ajouter vos fichiers vidéos (ou audio) que vous venez juste d'envoyer sur votre serveur, dans votre contenu, en utilisant le plugin AllVideos Reloaded ? C'est Simple !

Avant de commencer, vous devez créer votre dossier vidéo -et audio- principal. Si vous gardez les paramètres par défaut du plugin, alors ces dossiers sont nommés videos et audio et doivent être situés dans le dossier image de votre site. (Avec Joomla! 1.5, ce dossier est configurable dans l'onglet "Système" de la Configuration globale.) Si vous utilisez les paramètres prédéfinis, vous aurez donc les chemins ROOT/images/stories/videos et ROOT/images/stories/audio. Après avoir envoyé quelques vidéos comme vacances.flv et soiree.avi dans le dossier vidéo, vous pouvez alors créer un lecteur vidéo dans votre contenu, en ecrivant simplement {flv}vacances{/flv} ou {avi}soiree{/avi}. A noter : le chemin du fichier et derterminé automatiquement et l'extension du fichier (toujours en minuscule !) est determinée automatiquement par le plugin. Si votre dossier de vidéo est remplit, vous souhaitez peut être organiser vos fichiers dans des sous dossiers, donc si - par exemple - vous avez un fichier situé ROOT/images/stories/videos/vacances2007/film1.flv, le tag correspondant sera : {flv}vacances2007/film1{/flv}. C'est compris ? Ok. Maintenant, nous allons voir cette chaine de texte appelé tag dans cette documentation. Le tableau suivant montre les type de format supportés pour le contenu local et le tag correspondant à utiliser :

Pour tous les tags listés ci-dessus, il existe une seconde variante qui ne détermine pas automatiquement le chemin et ne détermine pas l'extension. (En d'autre termes : utiliser le nom tel quel). Cette variante peut être utiliser pour le contenu local et distant. Pour utiliser cette variante il faut ajouter le mot remote au tag original. C'est-à-dire : {flvremote}http://www.votresite.com/images/stories/videos/nom.flv{/flvremote}

Streaming de Contenu Distant (Site de partage)

AllVideos Reloaded supporte des raccourcis simple pour inclure les fichiers des sites de partages de vidéo populaires. Notez que chacun de ces sites fournit son propre lecteur qui est juste inclu dans votre site Internet. Ces lecteurs "étrangers" ne supporte en principe que les paramètres de tailles (largeur, hauteur) de la vidéo. Certains lecteur supporte aussi certains control comme le démarrage automatique. Tous les autres paramètres ne sont effectifs que si le lecteur de base pour les fichiers FLV, SWF ou MP3 est utilisé (c'est-à-dire pour le streaming de contenu local). Le tableau suivant affiche tous les sites prédéfinis supportés (dans l'ordre alphabetique) et les instructions pour les utiliser :

Les lecteur prédéfinis marqués d'une étoile rouge (^*), utilisent une technique de ripage spéciale dans le but de contouner le masquage des URLs, utilisé par les fournisseurs : Ils font premièrement une requête sur une page du fournisseur, parse la réponse dans le but de récupérer l'URL réelle du fichier vidéo et ensuite crée le lecteur selon les données récupérées de la réponse. Cependant, inclure des vidéos de ces fournisseurs peut ralentir le temps de réponse de votre site. Depuis la version 1.0.beta3, un cache est utilisé pour stocker les données récupérées, donc après avoir affiché une première fois la page, il devrait y avoir une augmentation significative de la performance. Donc, pour inclure ces fournisseurs, votre serveur a besoin de permissions pour établir une connection sortante. La plupart des hébergeurs le permettent, cependant si vous avez un message comment "Unable to fetch URL: ..." au lieu de la vidéo, c'est qu'une restriction doit être en place et vous devez contacter votre hébergeur.

Paramètres du Plugin

Les paramètres du plugin peuvent être réglés de deux façons : D'abord, dans l'interface d'administration du plugin, vous pouvez définir de façon globale les paramètres ce qui affecte toutes les vidéos. Deuxièmement, vous pouvez ajouter ces paramètres globaux dans chaque tag de façon individuel. Quand vous ajoutez des paramètres, les ajouter - separés par des espaces - dans la première partie du tag, comme ceci : {flv width="180" height="150" autostart="true"}soiree{/flv}. En ajoutant, utilisez toujours le nom de l'attribut en minuscule, suivit d'un signe egal, suivit d'une valeur pour l'attribut entouré de guillement de type double quote.

Le tableau suivant montre les noms des paramètres supportés, leurs attributs (le nom à utiliser quand on l'ajoute au tag) et leur valeurs possible. Comme il est décrit dans le tableau des formats locaux supportés, il y a différents lecteurs utilisés pour les différents formats de fichiers. Le seul lecteur qui supporte tous les paramètres listés est le JW Media Player. Tous les autres lecteurs supportent normalement width, height et autoplay seulement. Le lecteur YouTube est une exception. Il supporte certains attributs spéciaux qui sont décrit dans le tableau à la fin de la page. Note : Certains attributs spéciaux ne sont pas disponibles dans l'interface d'administration et peuvent être réglés dans le tag seulement. Ces attributs sont expliqués dans les remarques.

Remarques :

1. Les valeurs de couleur peuvent être specifiées dans n'importe quel format suivant et sont convertis dans le format correct automatiquement :

• A 6-digit hexadecimal value, preceeded by a hash sign (e.g.: #223344 like ordinary HTML syntax)
• A 3-digit hexadecimal value, preceeded by a hash sign (e.g.: #234 like CSS short syntax)
• 3 decimal values following the word rgb in parenthesis (e.g.: rgb(99,140,235) - like CSS rgb syntax)
• A 1-6-digit hexadecimal value, preceeded by 0x (e.g.: 0x2345 like in JavaScript)
• One of the 16 standardized color names as specified in HTML 4.0.1 (e.g.: red)

2. Logo images can be specified either by their absolute URL (e.g.: http://host/logo.png) or - if locally stored on the same server - by their local path (e.g.: /images/stories/logo2.png). The logo should be png (preferred) or gif in order to support transparency. The logo is always positioned in the upper right corner of the video screen. If you like a different position you can work around this limitation by creating a larger image where most of the image is transparent.

3. The parameter screenmode is kind of special. It is not an actual parameter for JW mediaplayer but a shortcut which affects how the player's parameters displaywidth and displayheight (those specify the size of the player's video screen) are calculated by the plugin. The following modes are available:

Please note: When overriding displaywidth or displayheight within the tag, then the whole automatic calculation described above is disabled.

4. The stretch mode defines how to stretch movies to make them fit the display size. 1 will stretch them proportionally to fill the display, 0 will stretch them to fit. 2 will stretch them disproportionally to fit both height and width. 3 will show all items in their original dimensions.

5. If enabling scripting, the player can be controlled with JavaScript. To do this (and to distinguish multiple players in a page) it has to be addressed by it's ID. For easy scripting, this ID (which otherwise would be assigned automatically by the plugin) can be set manually by using the attribute divid. The resulting ID of the flash object to be used from within JavaScript is the specified value, prefixed by p_.

6. If many parameters have to be specified, you end up with quite lenghly tags. Alternatively, you can put all those parameters in a config file and then simply reference that. The URL, specified in the cfg attribute should point to a configuration XML file. The variable names in that file might differ from the attributes listed above. See the JW Media Player documentation for a reference. An example file can be found here.

7. The URL, specified in the link attribute is normally used for providing a download of the media or related information. This URL is invoked, when the player's download button is activated. Additionally, if the attribute linkfromdisplay is set to true, a click in the players display invokes that URL instead of toggling play/pause. The attribute linktarget (default: _blank) specifies the window in which this URL will be shown.

8. If plthumbs is set to true and a playlist is provided which provides image tags in its entries, those images are displayed as thumbnails in the playlist. If autoscroll is set to true, the playlist is scrolling automatically via mouse movement instead of using a scrollbar. The attribute repeat specifies how to proceed when a media stream is finished: false means stop the player, true means repeat the stream from beginning and list means start playing the next item in the playlist. In this context, the next item to be played is selected depending on the parameter shuffle (default: true). If this is set to false, the playlist is iterated sequentially. Using playlists is explained further down.

9. If using the remote variant of a media tag, you can reference any media file, even with a different extension or non extension at all. If this is the case, JW Media Player might not recognize the file type correctly. With this attribute you can forcibly set the media type to one of the supported types.

10. This attribute allows you to set the minimum Flash version, required to use the builtin JW Media Player. The player requires at least Flash version 7, however when running under that version, the features "display of GIF/PNG images", "smoothing of scaled images/video", VP6 and H264 encoded video, javascripting and the digits in the controlbar are not functional. Furthermore, for full screen display, at least Flash version 9.0.28 is required and for playing H264 encoded videos, at least Flash version 9.0.98. For full functionality, it is therefore strongly recommended, to specify at least version 9.0.28 (if using the fullscreen feature) or version 8 (without using fullscreen).

11. This attribute provides an URL for a recommendations XML file. A recommendations XML file contains titles, thumbnails and URLs for recommended Items, related to the currently playing video. It's content is shown after the video has finished playing (Similar like on YouTube). A sample recommendations XML file can be found here.

12. The URL provided here defines an alternate search provider which is used, when a user uses the search function of the search bar. The text typed by the user is appended to this URL. Example: If the URL is http://youtube.com/results?search_query= and the user searches for computer, then the resulting query is http://youtube.com/results?search_query=computer.

13. By default, the plugin provides two different warnings if the content can not be displayed: The first warning is displayed, if JavaScript is not available. Another warning is displayed, when JavaScript is working, but the flash plugin is either not available or it's version is below the value of the parameter flashver. With this parameter, the second warning can be replaced by custom content. If custom content is provided, the first warning will be disabled completely. The custom content must not contain any single quote or closing curly brace. To display those characters, they have to be encoded using html entities. The default warnings look like this:

Typical appearance of the default JavaScript warning (uses localized text):

Typical appearance of the default Flash warning (uses localized text):

Adobe Flash Player not installed or older than x.x.x!

14. This attribute allows to specify a preview (thumbnail) image which is shown whenever the player is stopped. If a relative path is specified (i.e. the value does not start with a slash or http:// or https://), then it is automatically prefixed by the default image directory (usually images/stories).

15. The initial volume. Unit is percent, which implies a valid range of 0 .. 100.

16. This attribute can be used to manipulate the context menu of the player. For flash based players, setting this to false restricts the menu to the basic entries. For the DivX player, this disables the menu completely.

17. When this attribute is set to true, then the resulting player will be invisible and prepared to be displayed in a popup window or lightbox by using the avrpopup special tag.

Special parameters of the YouTube player

When using the tag {youtube}, the YouTube player supports the following additional attributes (All boolean attributes have a default value of false):

More information about the meaning of those attributes can be found in the YouTube API specification here.

Using playlists

When streaming local content with JW Media player, instead of using a single media file, you can provide a playlist XML file. Of course, if you want to provide a playlist file, you must either use the auto tag or one of the remote variants, since only those do not append any predefined extensions automatically. Instead of providing the media url directly, you then would specify the playlist URL instead. The player supports three commonly used playlist formats to ensure maximum compatibility: XSPF (much used for CC music), RSS (much-used for Podcasts) and ATOM (much-used by Blogs). On Jeroen's website, he has placed additional examples of both an xspf playlist and an rss playlist, with nearly all supported tags included.

With playlists, you can achieve some effects, that are not available when using plain media URLs. For example, you can attach a preview image to a video. This image is shown, whenever the player is stopped. Here is a simple example. This example is used at this website for displaying a preview image in the small video on the frontpage:

  <playlist version="1" xmlns="http://xspf.orig/ns/0/">
    <title>CG Playlist</title>
    <trackList>
      <track>
        <title>Reloaded</title>
        <location>/images/stories/videos/matrix.flv</location>
        <image>/images/stories/videos/matrix_thumb_small.jpg</image>
      </track>
    </trackList>
  </playlist>

Please note also, that if you use the auto tag (without an absolute URL), then the playlist file itself must be located in the images/stories/videos subdir, even if the list references only audio files. Furthermore, if you use a .m4v file extension in the location tag, then you must specify the media type manually for the relevant track by adding the following element at the end of the track definition: <meta rel="type">flv</meta>

Playlist Display

Displaying a playlist properly can sometimes be a hassle if yo don't know how the player takes the various parameters into account. Here, I try to explain the logic: For both, the player's width and height, there exists a second parameter called displaywidth and displayheight. Normally, those are left undefined which results in the players standard display. If one of these is set to a smaller value however, the playlist will be shown. If you set displaywidth, then the playlist will be shown to the right of the videofame above the controlbar. The width of the playlist is simply width - displaywidth in that case. Using displayheight is a little bit more complicated, as the controlbar height has to be accounted for. The height of the controlbar is 20px, so if you set displayheight to a value smaller than height - 20, then the playlist fills up that difference below the controlbar. So in this case, the height of the playlist is height - displayheight - 20. There is also a special case where no playlist is shown but another effect is achieved: Setting the displayheight equally to height, makes the controlbar to be shown slightly smaller inside the video and showing/dissapearing when the mouse hovers the video.

Parameters

Some of the player's parameters are related to playlists: If you want to show the images attached to the playlist entries in the list view as thumbnails, you can set the parameter plthumbs to true.

Managing playlists

As of version 1.2, there is now a playlist editor available in the backend. This editor can be reached by selecting the menu entry Components -> AllVideos Reloaded -> Manage playlists. The initial view shows all playlists stored in your videos folder and looks like this:

If there are any sub folders inside your videos folder, then in the upper part (Details), you can select the folder to display. To edit a playlist, click on it's name or title (if available). To create a new playlist in the current directory, click the toolbar button named New. At first, you will be prompted for the filename of the new playlist. Editing or creating a new playlist opens the editor view which looks like this:

In this view, in the upper part (Details), you can edit the global details of that playlist and in the lower part (Tracks), the individual tracks of the playlist can be reordered, edited or deleted. To add a new track, click the toolbar button name New. Editing an existing track or creating a new track finally opens the track view, which looks like this:

In this view, you finally can select the media for the track and other attributes like a preview image, a link or title and author. The only mandatory item to be entered is the media URL. For your convenience, the AVR Media button allows you to insert the correct URL easily. A similar button is provided for the preview image. Of course, when activating the AVR Media button, this time the supported media types are limited to those, actually supported by JW Media player.

Using the AVR Media button

As of Version 1.2, AllVideos Reloaded (AVR) includes an editor-xtd plugin which provides an editor button for easy embedding of media in your content. After installation of AVR, the button is automatically added to the other buttons below your editow window. If you use Joomla's standard backend template khepri, that button looks like this:

If you click that button, you should see the following dialog:

Inserting remote media

In the above dialog, you can insert either remote or local media. For inserting remote media, simply paste the URL of the page showing the desired video at the video-sharing provider into the first text field. For example: If you want to embed the following video from YouTube into your article,

then simply paste the text http://www.youtube.com/watch?v=6lbvSBNLLoo into the field labeled URL. After that, hit the RETURN key. This triggers AVR's automatic recognition and the rest of the form will be filled like this:

As you can see, the fields Provider, ID and Media tag have now changed and both buttons Preview and Insert have changed their state to enabled. (Previously, they have been disabled). If you like to add custom attributes, you can do so now. To verify the effects of any custom attribute, you can use the Preview button. If you are satisfied with the video's appearance, finally click the Insert button. This copies the content of the Media tag into the editor at the current cursor position and closes the dialog.

Inserting local media

Before inserting local media, you obviously have to upload it to your server. By default, AllVideos Reloaded uses two special folders named audio and videos for this. These folders have to be created in advance in Joomla's Media manager (or a similar tool) inside Joomla's imges/stories like this:

After that, you can upload media files into those folders. Plain audio files (mp3, wma) should be stored in the folder named audio while everything else (videos, playlists) goes into the folder named videos. Uploading is not part of AllVideos Reloaded, so again, you should use Joomla's Media manager (or a similar tool) for doing that.

By default, Joomla's media manager is quite restrictive regarding supported file types. In Joomla's global configuration, you have to add file types of the desired media files in order to be able to upload these files.

To insert local media, you first invoke the same dialog and then select the Local Media tab. The dialog now looks like this:

In the combo box Media at the top, you now can select the previously uploaded media file. After selecting the file, the rest of the dialog will be completed. Again, the field Media tag shows the tag to be used and you can complete the action just like with remote media described above.

Popup window and lightbox

Starting with version 1.2, displaying media in a popup window or a lightbox has now been made really easy. Displaying media in this way is a two-part process:

1. Adding popup="true" and assigning a unique ID for the player by using divid="identifier"
2. Providing a link which references the player by it's ID given in step 1 and specifying the popup type (window or lightbox)

Step one results in an "invisible" embedding code. Actually the code is pre-rendered into a database table. This database record is then retrieved on demand by invoking the link, generated by step two. Here is an example:

{flv popup="true" divid="mypopup"}video{/flv}

This defines a player named mypopup, playing video.flv which will be initially invisibe.

{avrpopup type="window" id="mypopup"}Klick here to show video in a popup window{/avrpopup}

This will create link which opens a popup window containing the player upon activation.

{avrpopup type="lightbox" id="mypopup"}Klick here to show video in a lightbox{/avrpopup}

This will create link which opens a lightbox containing the player upon activation.

The system plugin

Since version 1.2, AllVideos Reloaded includes a second plugin, named System - AllVideos Reloaded. This plugin is responsible for invoking the "regular" content plugin for foreign components and modules. This plugin has no parameters and usually can always be enabled. If - in some rare cases - it happens to raise a conflict with some other extension, it can be disabled on a page level by inserting the following HTML comment anywhere on the relevant page(s):

<!-- AVRSYS_DISABLE -->

Managing Players, Rippers and Tags

Documentation for these features is being written and will be added soon in version 1.3