<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var counter = 0;
var numOfTracks = $(".audio-player").length;
$("#play-bt").click(function(){
$(".audio-player")[counter].play();
$("#message").text("Music started");
})
$("#pause-bt").click(function(){
$(".audio-player")[counter].pause();
$("#message").text("Music paused");
})
$("#stop-bt").click(function(){
$(".audio-player")[counter].pause();
$(".audio-player")[counter].currentTime = 0;
$("#message").text("Music Stopped");
})
$("#next-bt").click(function(){
$(".audio-player")[counter].pause();
$(".audio-player")[counter].currentTime = 0;
counter++;
if(counter > numOfTracks - 1){
counter = 0 ;
}
$(".audio-player")[counter].play();
$("#message").text("Next Track started");
})
$("#prev-bt").click(function(){
$(".audio-player")[counter].pause();
$(".audio-player")[counter].currentTime = 0;
counter--;
$(".audio-player")[counter].play();
$("#message").text("Previous Track");
})
$(".audio-player").bind('timeupdate', function(){
//Gets the whole duration of the track.
//No idea kung saan ko ilalagay sa UI**IMPLEMENT LATER**
var track_length = $(".audio-player")[counter].duration;
var secs = $(".audio-player")[counter].currentTime;
var progress = (secs/track_length) * 100;
$('#progressbar').css({'width' : progress * 2});
//Will Use these later on production
//NOTE DO NOT DELETE
//Track Minutes
var tcMins = parseInt(secs/60);
//Track Seconds
var tcSecs = parseInt(secs - (tcMins * 60));
if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
// Display the time. REMEMBER
$('#timecode').html(tcMins + ':' + tcSecs);
})
})
</script>
<style>
/*Seperate this some time in the development*/
#playerContainer{
background-color: #A8A8A8 ;
width: 260px;
height: 55px;
padding: 8px;
border: 1px solid #d0d0d0;
}
/* Player Controls */
/*list items of controls */
#playerControls li {
display: block;
width: 32px;
height: 32px;
padding: 0px;
float: left;
cursor: pointer;
}
#playerControls { list-style: none; padding: 0px; margin: 0px;}
/*Images for each li items items */
#play-bt { background: url('icons/glyphicons_173_play.png'); background-repeat:no-repeat }
#pause-bt {background: url('icons/glyphicons_174_pause.png'); background-repeat:no-repeat;}
#next-bt { background: url('icons/glyphicons_176_forward.png'); background-repeat:no-repeat}
#prev-bt {background: url('icons/glyphicons_172_rewind.png'); background-repeat:no-repeat;}
/*Progress Stuff*/
/*Remember to manipulate its width via javascript later*/
#progressContainer
{
background-color:#e0e0e0;
height: 14px;
width: 256px;
float: left;
margin-left: 0px;
}
#progressbar {background-color: #1384bb; height:14px; width:0%; }
</style>
</head>
<body>
<audio class ="audio-player" name= "audio-player" src="04-zedd-stars_come_out_(terravita_remix).ogg" >
<p>Sorry your file doesn't support html5</p>
</audio>
<!--Second Track For Testing Purposes-->
<audio class ="audio-player" name= "audio-player" src="01-hard_rock_sofa-quasar.mp3" ></audio>
<div id="message"></div>
<div id = "playerContainer">
<ul id = "playerControls" >
<li id = "prev-bt"></li>
<li id= "play-bt"></li>
<li id= "pause-bt"></li>
<li id = "next-bt"></li>
<li id= "stop-bt" ></li>
<li><span id ="timecode"></span></li>
</ul>
<div id="progressContainer"><!-- Progess bars container //-->
<div id="progressbar"></div>
</div>
</div>
</div>
</body>
</html>
How can I click a certain part of my progress bar so that I can move it to a different time in the track? I have no idea on how I am going to do that. any ideas ?
4 Réponses :
J'ai écrit à propos de cela dans Utilisation des composants multimédia HTML5 - Partie 3: Commandes personnalisées , faites défiler jusqu'à "Ajouter une barre de progression".
Ne répond pas à la question. L'utilisateur cherche à mettre à jour la position de la chanson en fonction du clic sur la barre de progression personnalisée.
Cela ne répond complètement pas à la question. Cela semble être rien de plus qu'une publicité pour votre article. Même la section que vous faites référence dans votre article n'a absolument rien à voir avec la question posée.
Non pertinent pour la question
Et pourtant, c'est la réponse marquée afin que l'affiche originale a clairement trouvé qu'il répondit à sa question.
Je suis tombé sur cette question aujourd'hui parce que je crée un lecteur vidéo HTML5 personnalisé et j'ai eu la même question. Juste en ce qui concerne la vidéo au lieu de l'audio. Le processus devrait fonctionner le même si.
J'ai trouvé cet article et j'ai pu intégrer la partie de la barre de progression dans mon joueur. https: //msdn.microsoft.com/en-us/library/ie/gg589528%28v=vs.85%29.aspx?f=255&msppperror=-2147217396 P>
au lieu d'utiliser un ProgressBar code> élément, comme si je faisais, ou un élément div code>, comme vous le faites, le truc ici est d'utiliser un élément de toile à la place. P> function updateProgressBar() {
mediaPlayer = document.getElementById('media-video');
//get current time in seconds
var elapsedTime = Math.round(mediaPlayer.currentTime);
//update the progress bar
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
//clear canvas before painting
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
ctx.fillStyle = "rgb(255,0,0)";
var fWidth = (elapsedTime / mediaPlayer.duration) * (canvas.clientWidth);
if (fWidth > 0) {
ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
}
}
}
Très serviable, merci d'avoir posté, mais juste une note rapide - dans votre fonction updateprogressbar () , la première ligne de code est ré-exécutant le getElementyID () sélecteur à mettre à jour MediaPlayer, mais le MediaPlayer n'aura pas changé à partir du moment où vous l'avez sélectionné. Vous pouvez donc supprimer complètement cette ligne.
De plus, votre Barre de progression définie et CANVAS Les variables sont redondantes. Vous pouvez supprimer la variable progressezbar car il n'est pas utilisé.
donné de certains HTML qui ressemble à ceci: afin de rechercher une heure spécifique dans la vidéo à la suite d'un événement de clic, le JS ressemblerait à ceci: P > var player = document.querySelector("video");
var progressBar = document.querySelector("progress");
progressBar.addEventListener("click", seek);
function seek(e) {
var percent = e.offsetX / this.offsetWidth;
player.currentTime = percent * player.duration;
progressBar.value = percent / 100;
}
juste indiquant l'évidence ici. Il devrait ProgressBar.Value = pour cent * 100; , car le pourcentage sortira une fraction.
J'espère que cela peut sauver quelqu'un un peu de temps. Si vous essayez de configurer cela dans une application angulaire, vous remarquerez ce code> correspond à votre contexte de contrôleur. Donc, vous devrez utiliser e.srcelement.clientwidth code> pour que cela fonctionne. vm.setPosition = function(e){
var percent = ((e.offsetX / e.srcElement.clientWidth));
vm.songObject.setProgress(percent);
}
Je l'ai fait avec un curseur de gamme, vous n'êtes pas obligé. Parce que je ne voulais pas passer des années à travailler sur ceci pour vous, cela n'est pris en charge que dans Chrome. Vous pouvez voir le JSFIDDle de travail ici