11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
j'aimerais afficher au clic sur un lien la vidéo selon le nom d'utilisateur, et à côté de ça si l'on clic sur un autre lien la vidéo se recharge avec un nom d'utilisateur différent.

J'arrive plus ou moins à faire fonctionner cela avec une iframe et un peu de javascript comme ceci :

<iframe id="theframe" type="text/html" width="620" height="378" src="" frameborder="0">
</iframe>
<br>

<a href="#" onclick="play('sirhcez'); return false"> THIS IS FIRST Video Link </a><br>
<a href="#" onclick="play('riotgamesoceania'); return false"> THIS IS SECOND Video Link </a>
<script>
function play(clip){
document.getElementById("theframe").src= "http://www.twitch.tv/widgets/live_embed_player.swf?channel="+clip+"";
 } 
</script>


Ici le problème étant que l'iframe ne permet pas de mettre en plein écran la vidéo twitch avec le bouton fullscreen, de plus il apparaît une iframe vide au chargement de la page.

Il est pour moi préférable d'utiliser le code de twitch complet pour afficher la vidéo et pouvoir l’agrandir
<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel={UTILISATEUR}" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel={UTILISATEUR}&auto_play=true&start_volume=25" /></object>


de ce fait j'essaye donc :
<a href="#" onClick="myFunction('sirhcez'); return false">sirhcez</a>
<a href="#" onClick="myFunction('riotgamesoceania'); return false">riotgamesoceania</a>
<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel="+demo+"" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel="+demo+"&auto_play=true&start_volume=25" /></object>";
}
</script>


Je n'arrive pas a transmettre une donnée au clic dans un innerhtml et à l'afficher.
Si vous pouvez m'éclaircir sur la voie à prendre. Cordialement, Rac3Mul.