Créez un lecteur vidéo WEB gratuit basé sur Flowplayer avec des compétences en code source_javascript

Flowplayer est un lecteur vidéo WEB open source (GPL 3). Vous pouvez intégrer le lecteur dans votre page Web. Si vous êtes un développeur, vous pouvez également personnaliser et configurer librement les paramètres pertinents du lecteur pour obtenir l'effet de lecture souhaité. Cet article présente principalement l'utilisation de Flowplayer.

Voir la démo Téléchargement du code source

Flowplayer prend en charge la lecture de médias en streaming tels que les fichiers flv, swf et image. Il peut lire les fichiers vidéo de manière très fluide et prend en charge la configuration et l'extension personnalisées.

1. Charger flowplayer.js

Ajoutez flowplayer.js entre l'en-tête de la page où vous souhaitez lire la vidéo.

<script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script> 

Vous pouvez télécharger la dernière version sur le site officiel de flowplyer : http://flowplayer.org/download/index.html

2.XHTML

Ajoutez le code suivant à l'endroit où vous devez ajouter le joueur :

<a href="flowplayer.flv" style="display:block;width:520px;height:330px" id="player"></a>

Pointez l'attribut href de la balise a sur l'adresse vidéo à lire, puis définissez le style, la largeur et la hauteur, et définissez display:block. Bien sûr, la clé est de spécifier un identifiant pour la balise a pour faciliter. Appels JS.

Bien sûr, vous pouvez également simplement spécifier un DIV en HTML, puis utiliser Javascript pour contrôler l'adresse de lecture, par exemple :

<div id="player2" style="width:520px; height:330px"> </div>

3. Javascript

Inclure un script javascript en bas de page pour appeler le joueur :

<script type="text/javascript"> 
flowplayer("player", "flowplayer-3.2.7.swf"); 
</script>

Utilisez la fonction flowplayer() pour appeler le lecteur. Le premier paramètre est l'identifiant du joueur et le deuxième paramètre est le chemin du lecteur. Il s'agit d'un fichier flash. Assurez-vous que le chemin du lecteur est correct. .

Si au lieu d'utiliser une balise pour appeler le fichier vidéo, mais d'utiliser DIV pour l'appeler, le code est le suivant :

flowplayer( 
 "player2", 
 "flowplayer-3.2.7.swf",{ 
 clip: { 
 url: "flowplayer.flv", 
 autoPlay: false, 
 autoBuffering: true 
 } 
 } 
); 

Le troisième paramètre de la fonction flowplayer() peut être utilisé pour plusieurs paramètres, qui sont en fait des paramètres avancés. L'url dans la méthode clip : indique l'adresse réelle du fichier vidéo, autoPlay : indique s'il doit être lu automatiquement, la valeur par défaut est true, autoBuffering : indique s'il doit être automatiquement mis en mémoire tampon, c'est-à-dire lorsque le fichier vidéo est configuré pour ne pas être lu automatiquement , le lecteur télécharge toujours le contenu du fichier vidéo à l'avance.

flowplayer prend également en charge de nombreux paramètres avancés tels que les listes de lecture et les paramètres d'apparence. Pour des paramètres spécifiques, les étudiants intéressés peuvent visiter : http://flowplayer.org/documentation/configuration/index.html.