player audio/vidéo utilisant Jquery

**manusib** · 23/10/2023, 11h13

bonjour,

Je souhaite pouvoir contrôler le début et la fin d'une vidéo. Même en agissant sur currentTime avant de lancer par le bouton play, cela ne change rien !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
jQuery(document).ready(function() {
 
// Déclaration des variables
var Elem_media;
var tracker = $('.tracker');
var volume = $('.volume');
 
function initMedia(elem) {
        var url = elem.attr('media_url');
        var title = elem.text();
        var artist = elem.attr('artist');
	var image_media = elem.attr('image');
 
	$("#image_lecteur").attr('src', image_media);
	var img = document.getElementById("image_lecteur");
	img.onload = function() {
		var largeur_retrait = - img.width / 2;	
		img.style.marginLeft = largeur_retrait + "px";
		}
 
	Elem_media = document.getElementById('Myvideo');
	Elem_media.src = url;
 
	$('.player .title').text(title);
        $('.player .artist').text(artist);
 
// timeupdate event listener
        Elem_media.addEventListener('timeupdate',function (){
        var curtime = parseInt(Elem_media.currentTime, 10);
	var totaltime = parseInt(Elem_media.duration, 10);
	var mn_curtime = Math.floor(curtime / 60);
	var s_curtime = curtime - mn_curtime * 60;
	var mn_totaltime = Math.floor(totaltime / 60);
	var s_totaltime = totaltime - mn_totaltime * 60;
	tracker.slider('value', curtime);
	if(s_curtime < 10 && s_totaltime < 10) {
		$('.player .time').text( mn_curtime + ':0' + s_curtime + ' / ' + mn_totaltime + ':0' + s_totaltime);
		}
	else if(s_curtime < 10 && s_totaltime >= 10) {
		$('.player .time').text( mn_curtime + ':0' + s_curtime + ' / ' + mn_totaltime + ':' + s_totaltime);
		}
	else if(s_curtime >= 10 && s_totaltime < 10) {
		$('.player .time').text( mn_curtime + ':' + s_curtime + ' / ' + mn_totaltime + ':0' + s_totaltime);
		}
	else $('.player .time').text( mn_curtime + ':' + s_curtime + ' / ' + mn_totaltime + ':' + s_totaltime);
		$('.player .vitesse').text('x ' + Elem_media.playbackRate.toFixed(2));
        });
 
        $('.playlist li').removeClass('active');
        elem.addClass('active');
    }
 
function playMedia() {
	Elem_media.play();
 
        tracker.slider("option", "max", Elem_media.duration);
 
        $('.play').addClass('hidden');
        $('.pause').addClass('visible');
    }
 
function stopMedia() {
        Elem_media.pause();
 
        $('.play').removeClass('hidden');
        $('.pause').removeClass('visible');
    }
 
    // Appui bouton play
$('.play').click(function (e) {
        e.preventDefault();
 
        playMedia();
    });
 
// Appui bouton pause
$('.pause').click(function (e) {
        e.preventDefault();
 
        stopMedia();
    });
 
// Appui bouton vitesse augmentée
$('.fwd').click(function (e) {
        e.preventDefault();
        Elem_media.playbackRate += 0.1;
	$('.player .vitesse').text('x ' + Elem_media.playbackRate.toFixed(2));
    });
 
// Appui vitesse diminuée
$('.rew').click(function (e) {
        e.preventDefault();
        Elem_media.playbackRate -= 0.1;
	$('.player .vitesse').text('x ' + Elem_media.playbackRate.toFixed(2));
    });
 
// Elements de la playlist
    $('.playlist li').click(function () {
		$("#bloc_etudeGC").hide();
		$("#bloc_etudePC").hide();
		$("#bloc_lecteur").show();
		$('#navigation_block ul li a').removeClass('Select').addClass('notSelect');
		$('#menu2').removeClass('notSelect').addClass('Select');
		stopMedia();
		initMedia($(this));
 
    });
 
// initialisation premier élément de la playlist
    initMedia($('.playlist li:first-child'));
 
// barre volume par défaut
    Elem_media.volume = 0.8;
 
// initialisation de la barre volume
    volume.slider({
        range: 'min',
        min: 1,
        max: 100,
        value: 80,
	start: function(event, ui) {},
	slide: function(event, ui) {
        Elem_media.volume = ui.value / 100;
        },
        stop: function(event, ui) {},
    });
 
// barre progression lecture tracker
    tracker.slider({
        range: 'min',
        min: 0, max: 10,
        start: function(event, ui) {},
        slide: function(event, ui) {
        Elem_media.currentTime = ui.value;
        },
        stop: function(event, ui) {}
    });
});

Avec tous mes remerciements

**mathieu** · 25/10/2023, 02h22

à quoi correspond la balise avec l'identifiant Myvideo ? c'est une balise video ou un lecteur géré par une bibliothèque javascript.

**manusib** · 25/10/2023, 04h36

Merci pour votre intérêt.
L’élément vidéo correspond à une balise vidéo dans ma page php.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="bloc_lecteur" class="article" style="display:none;">
        <img id="image_lecteur" src="images/fond_lecteur.jpg" class="cadre_noir" style="margin-left:-226px"/>
        <video id="Myvideo" style="width:95%;"></video>
        <div class="player">
		<div class="title"></div>
		<div class="artist"></div>
                <div class="vitesse"></div>
                <div class="time"></div>
		<div class="controls">
			<div class="play"></div>
			<div class="pause"></div>
			<div class="rew"></div>
			<div class="fwd"></div>
		</div>
		<div class="volume"></div>
		<div class="tracker"></div>
	</div>
</div>

Puis j’appelle le lecteur par l’intermédiaire d’une playlist grâce à l’élément media_url.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li media_url="../Audios/BACH BWV131/Bach 1 sinfonia e coro 4 sopranos.mp3" artist="BACH, Aus der Tiefen rufe ich">Soprano</li> - <li media_url="../Audios/BACH BWV131/Bach 1 sinfonia e coro 3 altos.mp3" artist="BACH, Aus der Tiefen rufe ich">Alto</li> - <li media_url="../Audios/BACH BWV131/Bach 1 sinfonia e coro 2 tnors.mp3" artist="BACH, Aus der Tiefen rufe ich">Ténor</li> - <li media_url="../Audios/BACH BWV131/Bach 1 sinfonia e coro 1 basses.mp3" artist="BACH, Aus der Tiefen rufe ich">Basse</li></div>

Voilà

Le lecteur est une image que j’ai créée avec une barre de progression.

Nom : IMG_0815.jpeg
Affichages : 62
Taille : 47,5 Ko

**mathieu** · 25/10/2023, 23h53

dans l'exemple que j'ai mis à la suite avec un son provenant de wikipédia, le code javascript arrive bien à controler la position de la lecture.
débuguez ce qu'il se passe dans votre code quand vous bougez le slider.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
"use strict";
 
document.addEventListener("DOMContentLoaded", e => {
        
        
        const video = document.getElementById("mwe_player_1");
        
        const bouton = document.getElementById("depart_30_s");
        
        
        bouton.addEventListener("click", e => {
                
                video["currentTime"] = 30;
                video.play();
                
        });
        
});
 
</script>
 
<div>
 
	<button id="depart_30_s">départ à 30 secondes</button>
 
</div>
<div>
 
	<video id="mwe_player_1" controls>
		<source src="//upload.wikimedia.org/wikipedia/commons/a/a9/Bach_Sinfonien01.ogg"/>
	</video>
 
</div>

**manusib** · 26/10/2023, 11h43

Une petite avancée...

1. J'ai quatre erreurs identifiées qui correspondent aux lignes 8, 12, 19, 23.

Nom : erreurs.jpg
Affichages : 47
Taille : 27,6 Ko

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
// initialisation de la barre de volume
volume.slider({
    range: 'min',
    min: 1,
    max: 100,
    value: 80,
    start: function(event, ui) {},
    slide: function(event, ui) {
    Elem_media.volume = ui.value / 100;
    },
    stop: function(event, ui) {},
});
 
// barre de progression tracker
tracker.slider({
    range: 'min',
    min: 0, max: 10,
    start: function(event, ui) {},
    slide: function(event, ui) {
        Elem_media.currentTime = ui.value;
        },
    stop: function(event, ui) {}
});

2. J'ai fait débuter la lecture de l'audio dans la fonction d'appui sur le bouton Play et ça fonctionne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// play click
$('.play').click(function (e) {
    e.preventDefault();
    Elem_media.currentTime = 30;
    playMedia();
    });

Maintenant comment puis-je régler la fin de l'audio et surtout comment l'utilisateur peut commander le début et la fin de l'audio ?

Une barre min max ?
Deux input ?
????

Encore merci pour cette petite avancée !

**manusib** · 31/10/2023, 20h25

J’ai résolu le réglage du début et de la fin du média grâce à une deuxième barre de contrôle.

Nom : IMG_0819.jpeg
Affichages : 18
Taille : 55,9 Ko

On peut donc clôturer la discussion.

Merci

player audio/vidéo utilisant Jquery

jQuery

Discussions similaires

Partager

Partager