Se connecter / S'enregistrer
Votre question

SwfObject vidéos en fullbackground problème d'intégration

Tags :
  • Vidéo
  • Programmation
Dernière réponse : dans Programmation
8 Juin 2011 20:18:50


Bonjour à toutes et à tous !
Depuis quelque temps j'essaie d'intégrer une vidéo dans ma page index.php ( generator: indexhibit)

Le résultat souhaité ressemble exactement à ceci:

http://www.riquet.fr/ (plusieurs vidéos)
ou
http://www.edouardsalier.fr/ (une vidéos)

En gros: j'aimerais que la vidéo soit en fullbackground avec un "player" permettant de la stopper, de la relancer et permettant également de régler le son (cf bloc noir en bas à droite-> http://www.riquet.fr/ ).

Dans cet exemple, il est possible de passer d'une vidéo à l'autre (utile mais pas prioritaire pour l'instant, je me contenterai de résoudre les autres problèmes avant).

Après avoir parcourus différents sites & forums,
je me suis inspiré du code d'un site utilisant le même cms que moi (indexhibit) en le modifiant légèrement en fonction des différentes infos trouvées sur la manière d'installer swfObject:

Pour ceux que cela intéresse voici différents liens concernant swfObject:

- http://www.grafikart.fr/tutoriels/swfobject-36 (vidéos d'installation)
- http://www.flashkod.com/tutoriaux/UTILISATION-SWFOBJECT... (comment installer swfObject)
- http://www.delfiweb.com/afficher-flash-swfobject/articl... (comment installer swfObject)
- http://ressources.mediabox.fr/documentation/flash/swfob... (comment installer swfObject)
- http://kb2.adobe.com/cps/127/tn_12701.html (tout les paramètres de swfobject)
- http://www.bobbyvandersluis.com/swfobject/generator/ind... (generateur de code)

En résumé, tout fonctionne lorsque je teste le code avec le lien ".swf " du site dont je me suis inspiré.
En remplaçant la ligne suivante (mon chemin d'accès):

  1. swfobject.embedSWF(
  2. "<a href="http://boya.pocketdesigners.be/ndxz-studio/site/img/videos/test.swf" rel="nofollow" target="_blank">http://boya.pocketdesigners.be/ndxz-studio/site/img/vid...</a>",




par le lien du site:

  1. swfobject.embedSWF(
  2. '<a href="http://www.simonerudolph.de/video/videobackground.swf" rel="nofollow" target="_blank">http://www.simonerudolph.de/video/videobackground.swf</a>',




…la vidéo s'affiche !
Le reste du code me semblait donc correct,
mais lorsque je fais un test avec un lien interne rien ne fonctionne !!
(j'ai téléchargé différentes vidéos provenant de divers sites,(pour le test), en attendant d'avoir la vidéo à placer).

Et c'est le même problème lorsque j'utilise un lien externe lié à un autre site comme:
- http://www.riquet.fr/themes/default/swf/player.swf


Pourquoi cela fonctionne-il juste avec ce lien?
- http://www.simonerudolph.de/video/videobackground.swf

Evidement je me suis inspiré de son code mais même !
Peut-être est-ce mes chemins d'accès qui ne sont pas justes,… du coup j'ai créé différents chemins liés à différents dossiers (contenant les vidéos testes):

- src="<%baseurl%><%basename%>/site/js/swfobject/swfobject.js">
- http://boya.pocketdesigners.be/ndxz-studio/site/js/swfo...
- http://boya.pocketdesigners.be/ndxz-studio/site/js/swfo...

- http://boya.pocketdesigners.be/ndxz-studio/site/img/vid...
- http://boya.pocketdesigners.be/ndxz-studio/site/img/vid...
- http://boya.pocketdesigners.be/ndxz-studio/site/img/vid...
- http://boya.pocketdesigners.be/ndxz-studio/site/img/vid...
- http://boya.pocketdesigners.be/ndxz-studio/site/img/vid...

- http://boya.pocketdesigners.be/bgvideos/test.swf
- http://boya.pocketdesigners.be/bgvideos/videobackground...
- http://boya.pocketdesigners.be/bgvideos/player.swf
- http://boya.pocketdesigners.be/bgvideos/backgroundVideo...
- http://boya.pocketdesigners.be/bgvideos/configuration_2...


mais après avoir testé des dizaines de possibilités, rien ne change !

Peut-être que le placement du code n'est pas correct ?
Peut-être me manque-t'il un pluging javascript ?
Peut-être...?

Quelqu'un aurait-il une idée ?

Etant graphiste orienté pré-press à la base mes connaissances en php, javascript et flash sont limitées.

J'aimerais terminer ce site (bien sûr au plus vite : )), ce petit/gros problème fait trainer son avancement.
Depuis trop longtemps, je me penche sur ce "kwak" sans y trouver de solution.
Quelques avancées par-ci par-là me permettant la compréhension de certaines chose, mais je reste dans l'obscurité et fait donc appel à vos lumières.

En espérant que celles-ci puissent m'éclairé,

Bonne journée
& Merci

voici le lien du site test (design en construction):
Voici l'entièreté du code de la page index.php avec le lien de la vidéo qui fonctionne;


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  3.  
  4. <html xmlns='<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>' xml:lang='en' lang='en'>
  5. <head>
  6. <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
  7.  
  8. <meta name="Keywords" content=" ">
  9.  
  10. <meta name="category" content=" ">
  11.  
  12. <meta name="description" content=" ">
  13.  
  14. <meta name="identifier-URL" content="">
  15. <meta name="author" content="">
  16. <meta name="copyright" content=" ">
  17. <meta name="revisit-after" content="after 15 days">
  18. <meta name="robots" content="index,follow">
  19. <meta name="generator" content="indexhibit" />
  20. <meta name="distribution" content="global" />
  21. <meta name="audience" content="General" />
  22.  
  23. <title><%obj_name%>: <%title%></title>
  24. <link rel="icon" type="image/png" href="/favicon.png">
  25.  
  26.  
  27.  
  28. <link rel='stylesheet' href='<%baseurl%><%basename%>/site/<%obj_theme%>/style.css' type='text/css' />
  29. <!--[if lte IE 6]>
  30. <link rel='stylesheet' href='<%baseurl%><%basename%>/site/<%obj_theme%>/ie.css' type='text/css' />
  31. <![endif]-->
  32. <plug:front_lib_css />
  33. <plug:front_dyn_css />
  34. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.js'></script>
  35. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/cookie.js'></script>
  36. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.effects.core.js'></script>
  37. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.supersized.2.0.js'></script>
  38.  
  39. <!-- début script javascript slideviewer-->
  40. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.slideviewer.js'></script>
  41. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.slideviewer-no_caption.js'></script>
  42. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.easing.1.3.js'></script>
  43. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.cycle.all.js'></script>
  44. <!-- fin script javascript slideviewer-->
  45.  
  46. <!-- début script javascript full background -->
  47. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/full_background.js'></script>
  48. <!-- fin script javascript full background -->
  49.  
  50. <!-- debut liens effet opacité -->
  51. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery-1.3.2.js'></script>
  52. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery-1.2.6.js'></script>
  53. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.effects.core.js'></script>
  54. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.dwFadingLinks.js'></script>
  55. <!-- fin liens effet opacité -->
  56.  
  57.  
  58. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.js'></script>
  59. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/cookie.js'></script>
  60.  
  61.  
  62.  
  63.  
  64. <!-- lien js déroulement menu -expandingMenus -->
  65. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingMenus.js'></script>
  66. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.dwFadingLinks.js'></script>
  67. <!-- fin lien js déroulement menu -expandingMenus -->
  68.  
  69. <script type="text/javascript" src="<%baseurl%><%basename%>/site/js/swfobject/swfobject.js"></script>
  70.  
  71. <script type="text/javascript">
  72.  
  73. var flashvars = {};
  74. var params = {};
  75. var attributes = {};
  76. var expressInstall = "<a href="http://boya.pocketdesigners.be/ndxz-studio/site/js/swfobject/expressInstall.swf" rel="nofollow" target="_blank">http://boya.pocketdesigners.be/ndxz-studio/site/js/swfo...</a>";
  77.  
  78. params.stage ='noscale';
  79. params.wmode = 'transparent';
  80.  
  81. attributes.id = 'flashContent';
  82. attributes.name = 'flashContent';
  83.  
  84. flashvars.title = 'video once upon a time ';
  85. flashvars.file = "<a href="http://boya.pocketdesigners.be/ndxz-studio/site/img/videos/test.swf" rel="nofollow" target="_blank">http://boya.pocketdesigners.be/ndxz-studio/site/img/vid...</a>";
  86. flashvars.color = 'ff0000';
  87.  
  88. swfobject.embedSWF(
  89. "<a href="http://www.simonerudolph.de/video/videobackground.swf" rel="nofollow" target="_blank">http://www.simonerudolph.de/video/videobackground.swf</a>",
  90. 'flashContent',
  91. '100%','100%','10.0.0',
  92. "<a href="http://boya.pocketdesigners.be/ndxz-studio/site/js/swfobject/expressInstall.swf" rel="nofollow" target="_blank">http://boya.pocketdesigners.be/ndxz-studio/site/js/swfo...</a>",
  93. flashvars,
  94. params,
  95. attributes
  96. );
  97.  
  98.  
  99.  
  100.  
  101. </script>
  102.  
  103.  
  104.  
  105.  
  106. <plug:front_lib_js />
  107. <script type='text/javascript'>
  108. path = '<%baseurl%>/files/gimgs/';
  109.  
  110. $(document).ready(function()
  111. {
  112. setTimeout('move_up()', 1);
  113. $('#menu a').click(function() {
  114.  
  115. });
  116. });
  117. </script>
  118.  
  119. <!-- fin script déroulement menu -expandingMenus -->
  120.  
  121. <plug:front_dyn_js />
  122.  
  123. <!-- début script full background le code original était:
  124. //<plug:backgrounder color='<%color%>', img='<%bgimg%>', tile='<%tiling%>' /> -->
  125.  
  126. <!-- autre script random background:
  127. //<plug:ndxz_rand_bg 'ndxz-studio/site/img/bg', tiling='false'/> -->
  128. 
<script type='text/javascript' src='<%baseurl%><%basename%>/site/js/full_background.js'></script>
  129.  
  130. <!-- fin script full background -->
  131. </head>
  132.  
  133. <body class='section-<%section_id%>'>
  134. <!-- début <div> pour full background -->
  135. <div id='the-background'><plug:full_background /></div>
  136. <div id="wrapper">
  137. <!-- fin <div> pour full background -->
  138.  
  139. <div id='menu'>
  140. <div class='container'>
  141.  
  142. <%obj_itop%>
  143. <plug:front_index />
  144. <%obj_ibot%>
  145.  
  146.  
  147.  
  148.  
  149. <!-- you must provide a link to Indexhibit on your site someplace - thank you -->
  150.  
  151.  
  152. </div>
  153. </div>
  154.  
  155. <div id='content'>
  156. <div class='container'>
  157.  
  158.  
  159. <!-- text and image -->
  160. <plug:front_exhibit />
  161. <!-- end text and image -->
  162.  
  163. </div>
  164. </div>
  165.  
  166. <div id='flashContent'>
  167.  
  168. </div>
  169.  
  170.  
  171.  
  172. </body>
  173. </html>





Autres pages sur : swfobject videos fullbackground probleme integration

a c 145 L Programmation
8 Juin 2011 21:14:22

Il semblerait que les "asp tags", à savoir "<%" et "%>" ne soient pas interprétés.
Donc soit tu peux modifier les réglages du serveur (php.ini), soit tu modifies ta source pour transformer:
- <% en <?php echo
- %> en ; ?>
m
0
l
9 Juin 2011 13:51:41


Merci crazycat,

Du coup j'ai changé:

  1. <script type="text/javascript" src="<%baseurl%><%basename%>/site/js/swfobject/swfobject.js"></script>


en

  1. <script type="text/javascript" src="<?php echo 'baseurl';?><?php echo 'basename';?>/site/js/swfobject/swfobject.js"></script>


cela te parait-il juste ? Parce que cela ne change rien au problème...
ou faut il que je change aussi tout les autres:

  1. <script type="text/javascript" src="<%baseurl%><%basename%>"></script>
m
0
l
Contenus similaires
a c 232 L Programmation
a b y Vidéo
9 Juin 2011 14:06:08

Il ne faut pas mettre de quote autour de tes baseurl et basename
m
0
l
a c 145 L Programmation
9 Juin 2011 14:06:28

A mon avis, je t'ai dit une bêtise, et il te manque quelque chose : le moteur de template (indexhibit ?)
Ne sachant pas comment a été développé ton site, ni si http://boya.pocketdesigners.be/ndxz-studio/site/boya/ est ton url, je ne peux pas t'en dire beaucoup plus
m
0
l
9 Juin 2011 19:25:12


http://boya.pocketdesigners.be
est un sous-domaine de www.pocketdesigners.be
je m'en sert pour tester mes sites en attendant de créer leur hébergement propre.

Pour indexhibit: j'utilise les fichiers sources suivant:
http://www.indexhibit.org/script/downloader.script.php?...

avec quelques modifications au niveau de certains plugings de présentation (d'images) et aussi une customisation au niveau du système de navigation (que nous avions fait ensemble) grâce à laquelle chaque éléments du menu peut-être positionné comme je le souhaite dans la page. Mais normalement aucun fichiers ne manquent, j'ai viens de tester sur un autre site (qui a sont propre hébergement et qui a été installé après) et c'est pareil:

voici le code:

  1. <script type="text/javascript" src="<<a href="http://www.alaindedecker.be/ndxz-studio/site/js/swfobject/swfobject.js" rel="nofollow" target="_blank">http://www.alaindedecker.be/ndxz-studio/site/js/swfobje...</a>"></script>
  2.  
  3.  
  4. <script type="text/javascript">
  5.  
  6. var flashvars = {};
  7. var params = {};
  8. var attributes = {};
  9. var expressInstall = "<a href="http://www.alaindedecker.be/ndxz-studio/site/js/swfobject/expressInstall.swf" rel="nofollow" target="_blank">http://www.alaindedecker.be/ndxz-studio/site/js/swfobje...</a>";
  10.  
  11. params.stage ='noscale';
  12. params.wmode = 'transparent';
  13.  
  14. attributes.id = 'flashContent';
  15. attributes.name = 'flashContent';
  16.  
  17. flashvars.title = 'video once upon a time ';
  18. flashvars.file = "<a href="http://www.alaindedecker.be/bgvideos/test.swf" rel="nofollow" target="_blank">http://www.alaindedecker.be/bgvideos/test.swf</a>";
  19. flashvars.color = 'ff0000';
  20.  
  21. swfobject.embedSWF(
  22. "<a href="http://www.alaindedecker.be/bgvideos/test.swf" rel="nofollow" target="_blank">http://www.alaindedecker.be/bgvideos/test.swf</a>",
  23. 'flashContent',
  24. '100%','100%','10.0.0',
  25. "<a href="http://www.alaindedecker.be/ndxz-studio/site/js/swfobject/expressInstall.swf" rel="nofollow" target="_blank">http://www.alaindedecker.be/ndxz-studio/site/js/swfobje...</a>",
  26. flashvars,
  27. params,
  28. attributes
  29. );
  30.  
  31.  
  32.  
  33.  
  34. </script>






m
0
l
a c 145 L Programmation
9 Juin 2011 22:04:35

il y a un "<" en trop dans l'appel du script.
Et aussi sur boya.
Je pense que les erreurs découlent de ça.
m
0
l
9 Juin 2011 23:13:07

merci pour votre rapidité,
les deux lignes ont été corrigées, mais ca ne fonctionne pas :( 

  1. <script type="text/javascript" src="<a href="http://boya.pocketdesigners.be/ndxz-studio/site/js/swfobject/swfobject.js" rel="nofollow" target="_blank">http://boya.pocketdesigners.be/ndxz-studio/site/js/swfo...</a>"></script>


  1. <script type="text/javascript" src="<a href="http://www.alaindedecker.be/ndxz-studio/site/js/swfobject/swfobject.js" rel="nofollow" target="_blank">http://www.alaindedecker.be/ndxz-studio/site/js/swfobje...</a>"></script>

m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS