Différences

Ci-dessous, les différences entre deux révisions de la page.

--- aide:wiki:video [07/10/2010 19:00] – jpc
+++ aide:wiki:video [24/11/2022 05:34] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
-====== Ajouter une vidéo dans une page du wiki ======
+====== Intégrer une vidéo dans une page du wiki ======
-Le fichier de la vidéo peut être ajouté comme tout autre fichier en cliquant sur "Ajouter les images ou autres fichiers" dans la barre d'outils au dessus de la page une fois éditée. Mais ce n'est pas la meilleure solution.
+<WRAP center round info 95%>
+Si vous voulez intégrer votre propre vidéo vous devez d'abord la déposer sur [[http://www.youtube.com/|Youtube]] ou [[http://vimeo.com/|Vimeo]]
-On peut également inclure la vidéo et la visionner dans la page du wiki, ce qui est beaucoup mieux visuellement. Pour cela :
+Le fichier de la vidéo pourrait être ajouté comme tout autre fichier en cliquant sur "Ajouter les images ou autres fichiers" dans la barre d'outils au dessus de la page une fois éditée. Mais ce n'est pas une bonne solution (fichier trop lourd).
-- déposer votre vidéo sur un site approprié tel que Youtube ou Vimeo ;
+Il vaut mieux inclure la vidéo et la visionner dans la page du wiki, ce qui est préférable visuellement.
+</WRAP>
-- copier le code "embed" que le site met à votre disposition ;
-- coller ce code à l'endroit où vous voulez voir la présentation s'afficher en le faisant précéder et suivre des balises html <html> avant et </html> après.
+Pour cela, deux façons, en utilisant le langage html, ou en utilisant le plugin [[http://www.dokuwiki.org/plugin:vshare|vshare]] (installé sur Lingalog).
-Voici à quoi ressemble le code "embed" :
+===== Exemple avec le bouton "Insert video from video sharing" (plugin vshare) =====
-   <html><object width="212" height="172"><param name="movie"
+<WRAP center round important 95%>
-   value="http://www.youtube.com/v/Rgul4WAWj6w&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param
+Cette méthode ne fonctionne qu'avec les vidéos youtube et vimeo
-   name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Rgul4WAWj6w&hl=en&fs=1"
+</WRAP>
-   type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="212"
-   height="172"></embed></object></html>
-Et voici le résultat :
+Pour insérer la vidéo vous devez d'abord copier l'URL de la page de la vidéo qui se trouve dans la barre d'adresse de votre navigateur :
+{{:aide:wiki:vimeo-url-video.png?300|}}
+ensuite cliquez sur le bouton "Insert video from video sharing" dans la barre d'outils :
+{{:aide:wiki:bouton-video.png?|}}
+puis collez l'URL
+{{:aide:wiki:bouton-video-coller-url-video.png|}}
+La syntaxe sera alors automatiquement ajoutée à votre page.
+Vous pouvez aussi utiliser directement la syntaxe.
+==== Vimeo ====
+Voici la syntaxe :
+<code>{{vimeo>68180971?medium}}</code>
+Voici le résultat :
+{{vimeo>68180971?medium}}
+==== youtube ====
+Voici la syntaxe :
+<code>{{youtube>KrHrJoGNpaA?medium}}</code>
+Voici le résultat :
+{{youtube>KrHrJoGNpaA?medium}}
+==== Modification de l'affichage de la vidéo ====
+Pour faire varier la taille, mettre ?small ou ?large, comme ceci
+  {{youtube>2PxQYM__-xU?small}}
+Pour centrer la vidéo sur la page (un espace de chaque côté :
+  {{ youtube>2PxQYM__-xU?small }}
+Procéder en fait comme pour une image fixe pour centrer, et mettre à droite ou à gauche :
+  *à droite
+  {{ youtube>2PxQYM__-xU?small}}
+  *à gauche
+  {{youtube>2PxQYM__-xU?small }}
+===== Exemple avec le code html "intégrer", "incruster" ou "embed" =====
+Il faut copier/coller le code html dans la page du wiki en l'entourant de ''<html>'' et ''</html>''
+Vous pouvez normalement le faire depuis n'importe quel site qui vous propose le code html d'intégration d'une vidéo
+<WRAP center round tip 95%>
+On s'y prend de la même façon pour une présentation déposée sur [[http://en.calameo.com/|Calameo]], [[http://www.slideshare.net/|Slideshare]], ou autre.
+</WRAP>
+==== youtube ====
+Sur youtube le code est accessible en dessous de la vidéo en cliquant sur le lien "Intégrer"
+{{:aide:wiki:code-html-youtube.png|}}
+Voici la syntaxe :
+<code>
+<html>
+<iframe width="560" height="315" src="http://www.youtube.com/embed/KrHrJoGNpaA" frameborder="0" allowfullscreen></iframe>
+</html>
+</code>
+Voici le résultat :
+<html>
+<iframe width="560" height="315" src="http://www.youtube.com/embed/KrHrJoGNpaA" frameborder="0" allowfullscreen></iframe>
+</html>
+==== Vimeo ====
+Sur vimeo le code est accessible en cliquant sur le bouton "Share" ensuite il faut copier ce qui ce trouve dans "Embed"
+Voici la syntaxe :
+<code>
+<html>
+<iframe src="http://player.vimeo.com/video/68180971" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/68180971">Mirage</a> from <a href="http://vimeo.com/user18872843">Iker &amp; Dana</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
+</html>
+</code>
+Voici le résultat :
+<html>
+<iframe src="http://player.vimeo.com/video/68180971" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/68180971">Mirage</a> from <a href="http://vimeo.com/user18872843">Iker &amp; Dana</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
+</html>
-<html><object width="212" height="172"><param name="movie" value="http://www.youtube.com/v/Rgul4WAWj6w&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Rgul4WAWj6w&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="212" height="172"></embed></object></html>