[Résolu] Intégrer / modifier une playlist xml flash en html5

Je cherche à transposer ce que j'avais sur une page web de mon site, de flash en html5 :

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='1008' height='490' id='single1' name='single1'>
          <param name='movie' value='../../videos/player.swf' />
          <param name='allowfullscreen' value='true' />
          <param name='allowscriptaccess' value='always' />
          <param name='wmode' value='transparent' />
          <param name='flashvars' value='playlistfile=playlistJango.xml&duration=34&file=playlistJango.xml&backcolor=FF0000&frontcolor=003399&screencolor=011C00&playlistsize=350&skin=flvJango/plexi.zip&playlist=right' />
          <param name="BGCOLOR" value="#ACA899" />
          <embed
src='../../videos/player.swf'
width='1008'
height='490'
type='application/x-shockwave-flash'
id='single1'
name='single1'
allowscriptaccess='always'
allowfullscreen='true'
wmode='transparent'
flashvars='playlistfile=playlistJango.xml&duration=34&file=playlistJango.xml&backcolor=FF0000&frontcolor=003399&screencolor=011C00&playlistsize=350&skin=flvJango/plexi.zip&playlist=right'
bgcolor='#ACA899'
/>        
</object>

la playlist xml :

<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/trac/" xmlns:media="http://search.yahoo.com/mrss/"> 
  <channel> 
    <title>HTTP Pseudo-Streaming Playlist</title> 
    <item> 
      <title>Dans le jardin, on joue à la balle</title> 
      <media:content url="http://gerard.marin.free.fr/videos/flvJango/JangoBalle.flv" /> 
      <media:thumbnail url="flvJango/P1010096-preview.jpg" />
      <description>Quelle invention cette balle en dur !</description>
      <jwplayer:provider>http</jwplayer:provider> 
      </item> 

	     <item> 
      <title>J'ai découvert la corde suspendue !</title> 
      <media:content url="http://gerard.marin.free.fr/videos/flvJango/JangoCorde.flv" /> 
      <media:thumbnail url="flvJango/P1010039-preview.jpg"/>
      <description>Pas mal comme distraction ...</description>
      <jwplayer:provider>http</jwplayer:provider> 
      </item> 
	  
	  <item> 
      <title>Petite détente sous l'arrosage</title> 
      <media:content url="http://gerard.marin.free.fr/videos/flvJango/JeuSousArrosage.flv" /> 
      <media:thumbnail url="flvJango/JeuSousArrosage.png"/>
      <description>Cà ne vaut pas sous la pluie ... mais bon !</description>
      <jwplayer:provider>http</jwplayer:provider> 
      </item> 
	  
	  
	  <item> 
      <title>Le rafraichissement à volonté !</title> 
      <media:content url="http://gerard.marin.free.fr/videos/flvJango/Rafraichissement.flv" /> 
      <media:thumbnail url="flvJango/Rafraichissement.png"/>
      <description>Pas mal comme distraction ...</description>
      <jwplayer:provider>http</jwplayer:provider> 
      </item> 	  	  
	  
	  <item> 
      <title>La bassine des piafs !</title> 
      <media:content url="http://gerard.marin.free.fr/videos/flvJango/LaBassineDesPiafs.flv" /> 
      <media:thumbnail url="flvJango/LaBassineDesPiafs.png"/>
      <description>Pas mal comme distraction ...</description>
      <jwplayer:provider>http</jwplayer:provider> 
      </item> 	  	  
	  	  
	  
	  
	  
  </channel> 
</rss>

	

Comment résoudre ce soucis .... ?
Modifié par 6troen (07 Dec 2020 - 17:05)

Bonjour,

1) il faut convertir tes fichiers vidéo qui sont des .flv en .mp4 (il y a des convertisseurs en ligne sur internet, ça se trouve facilement),

2) il suffit ensuite d'utiliser la balise html <video> avec comme source les fichiers .mp4 que tu viens de convertir.

Amicalement,

Je comprends bien, mais est-ce que çà se présentera comme une playlist ?

Bonjour,

Tu peux faire une page par vidéo (en conservant à droite la liste de liens avec les photos à faire en html, chaque lien pointant sur une nouvelle page). L'avantage est que ça marchera sans javascript, et que c'est assez simple à réaliser. Normalement tu devrais y arriver tout seul.

Sinon, avec javascript, on remplace les liens à droite par une liste de boutons, et on déclenche une fonction qui modifie la source de la balise vidéo quand on clique sur l'un des boutons.

Exemple rudimentaire :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
main
{
	display:flex;
}
ul,li
{
	list-style:none;
	margin:0;
	padding:0;
}
li button
{
	border:0;
	height:3em;
	width:10em;
	background:#ca6;
	text-align:left;
	margin:0.125em;
}
</style>
</head>
<body>
<main>
<div>
<video controls><source src="balade-canal-0.mp4"></video>
</div>
<ul>
<li><button onclick="magic(1)" type="button">Balade canal</button></li>
<li><button onclick="magic(2)" type="button">Comme on fait son lit</button></li>
</ul>
</main>
<script>
function magic(n)
{
	var e=document.querySelector("video source");
	switch(n)
	{
		case 1:e.setAttribute("src","balade-canal-0.mp4");break;
		case 2:e.setAttribute("src","CommeOnFaitSonLit.mp4");break;
	}
	e.parentNode.load();
}
</script>
</body>
</html>

Il y a d'autres solutions possibles.

Amicalement,
Modifié par parsimonhi (08 Dec 2020 - 01:10)

Merci pour vos conseils .