comment changer la balise source html5 et lire la vidéo

Question

Dans mon site de modèle vidéo, je veux changer la balise source de la vidéo lorsque je clique sur HQ, seule la vidéo devrait commencer à jouer, sans un clic sur le jeu bouton, et le texte du lien devrait changer à nq dans la même fonction.

Après le code html

{{if hqnq == true }}  //jquery template variable no importance 
    <div class="toolbar" id="controls"> 
     <div style="float:right">   
      <a href="#" data-role="button" data-theme="a" data-mini="true" data-inline="true" id="player_hq_nq">HQ</a> 
      // the text of the link should change when you are clicking 
     </div> 
     <div style="clear:both"></div>  
    </div> 
{{/if}} 


<div id="video_player"> 
<video autobuffer controls autoplay> 
    <source src="http://www.tools4movies.com/Droid/Default/Inception.mp4" type="video/mp4" width="auto" height="auto" id="video" /> 
</video> 
</div> 

Et au moins il devrait y avoir une fonction qui effectuera la tâche. Mais comment faire ça?

<script type="text/javascript"> 
var button = document.getElementById('player_hq_nq'); 

function showVideo() { 
    if (button.title == "nq") { 
     document.getElementById("video").setAttribute("src", "http://www.tools4movies.com/Droid/Default/Inception.mp4"); 
     document.getElementById("video").load(); 
     document.getElementById("video").play(); 
    } else { 
     document.getElementById("video").setAttribute("src", "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"); 
     document.getElementById("video").load(); 
     document.getElementById("video").play(); 
     button.title = "nq"; 
    } 
} 
</script> 

Voici le violon: http://jsfiddle.net/k68Zp/389/

Answer 1

Vous devez appeler showVideo() onclick de HQ. donc vous devez ajouter le code suivant juste au-dessus de la fonction showVideo() .:

$(document).ready(function(){ 
    $("#player_hq_nq").click(function(){ 
     showVideo(); 
    }); 
});