Plugin Video HTML5

sylvainbriant · février 2011

Bonjour,
en me basant sur le plugin de Stéphane (merciii Stéphane :-) ) je suis en train de faire un ptit plugin pour insérer une vidéo.

J'ai un léger probléme avec __construct-

public function __construct($default_lang) {
		parent::__construct($default_lang);
		$this->setConfigProfil(PROFIL_ADMIN);
		$this->addHook('ThemeEndHead', 'ThemeEndHead');
		$this->addHook('plxToolbarCustomsButtons', 'getCustomsButtons');
	}

J'ai bien le nouveau bouton dans le code source de la page "rédaction d'un nouvel article" mais je ne vois pas de nouveau bouton dans la barre plxToolbar sur la page :-(

Why ? :-|

Stéphane · février 2011

Bonjour Sylvain

Si tu regardes le code du plugin audio_player, il y a la fonction getCustomsButtons qui permet de rajouter un bouton dans la plxtoolbar

public function getCustomsButtons() {?>
	<script type="text/javascript">
	plxToolbar.addButton( {
		icon : '<?php echo PLX_PLUGINS ?>audio_player/audio_player.png',
		title : '<?php $this->lang('L_AUDIO_PLAYER') ?>',
		onclick : function() {
			var audio_file = prompt('<?php $this->lang('L_FILENAME_INPUT') ?>', 'data/documents/');
			if (audio_file!=null) {
				id = Math.ceil(Math.random() * 10000);
				s  = '<p id="audioplayer_'+id+'"><?php $this->lang('L_AUDIO_PLAYER') ?><\/p>\n';
				s += '<script type="text\/javascript">\n';
				s += 'AudioPlayer.embed("audioplayer_'+id+'", {soundFile: "'+audio_file+'"});\n';
				s += '<\/script>';		
				return s;
			}
			return '';
		}
	});
	-->
	</script>
	<?php
	}

la ligne suivante permet de faire le lien avec l'image qui servira d'icone du bouton

icon : '<?php echo PLX_PLUGINS ?>audio_player/audio_player.png',

Si tu ne vois pas le bouton, c'est que le chemin n'est pas bon, ou que l'image n'est pas présente à l’emplacement spécifié

sylvainbriant · février 2011

public function ThemeEndHead() {
		$width = $this->getParam('width')=='' ? '640' : $this->getParam('width');
		$height = $this->getParam('height')=='' ? '264' : $this->getParam('height');
		$animation = $this->getParam('animation')=='' ? 'yes' : $this->getParam('animation');
		echo "\n\t".'<script type="text/javascript" src="'.PLX_PLUGINS.'video5/video5.js"></script>';  
		echo "\n\t".'<link rel="stylesheet" href="'.PLX_PLUGINS.'video5/video-js.css" type="text/css" media="screen" title="Video JS" /> ';  
		echo "\n\t".'<script type="text/javascript">';
		echo "\n\t".'VideoJS.setupAllWhenReady();';
		echo "\n\t</script>\n";
	}

public function getCustomsButtons() {?>
	<script type="text/javascript">
		plxToolbar.addButton( {
			icon : '<?php echo PLX_PLUGINS ?>video5/video5.png',
			title : '<?php $this->lang('L_VIDEO_PLAYER') ?>',
			onclick : function() {
				var video_file = prompt('<?php $this->lang('L_VIDNAMME_INPUT') ?>', 'data/documents/');
				var vignette = prompt('<?php $this->lang('L_VIGNAMME_INPUT') ?>', 'data/documents/');
				if (video_file!=null) {
					id = Math.ceil(Math.random() * 10000);
					s  = '<video id="video_'+id+'" class="video-js" width="<?php echo $width ?>" height="<?php $this->getParam('height') ?>" controls="controls" preload="auto" poster="'+vignette+'">
					s  = '<source src="'+video_file+'" type=\'video\/mp4; codecs="avc1.42E01E, mp4a.40.2"\' \/>\n';
					s  = '<object id="flash_fallback_'+id+'" class="vjs-flash-fallback" width="<?php echo $width ?>" height="<?php $this->getParam('height') ?> type="application\/x-shockwave-flash" data="http:\/\/releases.flowplayer.org\/swf\/flowplayer-3.2.1.swf">\n';
					s  = '<param name="movie" value="http:\/\/releases.flowplayer.org\/swf\/flowplayer-3.2.1.swf" \/>\n';
					s  = '<param name="allowfullscreen" value="true" \/>\n';
					s  = '<param name="flashvars" value=\'config=\{"playlist":\["'+vignette+'", \{"url": "'+video_file+'","autoPlay":false,"autoBuffering":true\}\]\}\' \/>\n';
					s  = '<img src="'+vignette+'" width="<?php echo $width ?>" height="<?php echo $height ?>" alt="Poster Image" title="No video playback capabilities." \/>\n'; 
					s  = '<\/object>\n';
					s  = '<\/video>\n';	
					return s;
				}
				return '';
			}
		});
	</script>
	<?php
	}

et si je verifie, dans le code source le code apparait, par contre pas d'icone :-(

Stéphane · février 2011

a lire ton code, tu dois avoir ce fichier à cet emplacement: est-ce le cas ?

/plugins/video5/video5.png

sylvainbriant · février 2011

oui

Stéphane · février 2011

Sous quel environnement est-tu ? Vérifie les droits sur le fichier

sylvainbriant · février 2011

LAMP (godaddy) ; CHMOD du png 604, du parameters 644, des php 604

Frédéric · février 2011

Bonjour Sylvain,

Comme le dis Stéphane ca viens de tes chmodd, en générale les fichiers php c'est en 644, un dossier 755 pour des medias tu peux pousser a 755/777 dans certains cas.

sylvainbriant · février 2011

je vais regarder du coté des variables. ca finira par le faire :-D

sylvainbriant · février 2011

je pense qu'il y a peut etre collision entre le Js de facebook et celui d'insertion des boutons....

sylvainbriant · février 2011

bon je trouve pas... faudra que je creuse ce week end

Stéphane · février 2011

tu peux m'envoyer ton plugin si tu veux, je jetterai un oeil

sylvainbriant · février 2011

Bonjour,
Bon Stéphane a réussi à mettre le doigts sur quelques erreurs dans le code (merci Stéphane, c'est le problème de bascule entre plusieurs CMS ;-) )
A priori le plugin fonctionne
Exemple de page de visualisation ici : http://www.sylvain-briant.com/index.php?article12/test

Le plugin rajoute un icone dans la barre et pose 2 questions : url de la video mp4 et url de la vignette png.
Les largeurs et hauteurs du lecteur sont configurables dans une page de configuration du plugin.

Je finalise un zip et je verrai ou le mettre pour laisser en téléchargement :-)

Victor · juin 2011

L'exemple n'est plus en ligne?

l e . n o x · septembre 2011

Bonsoir a tous,

Quelqu'un a t il put récupérer le plugin.zip (Lecteur Video HTML5) ?
Comment puis je implémenter ce player ou avez vous une meilleur solution ?

Objectif :
Partager avec la famille quelques petites videos effectuées avec mon appareil photo (encodé en xvid/mp3), que je disposerai dans arborescence de mon blog pluxml.
Quel sont les codecs disponibles et compatibles avec ces lecteurs HTML5 ?

Bonne fin de week end ;O)

danielsan · septembre 2011

@sylvainbriant: sympatoche votre site et votre blog :P

Plugin Video HTML5

Réponses