Compter comme vue une vidéo si elle a été affichée plus de 3secondes ?

**alexcot13** · 22/06/2018, 11h32

Bonjour à tous,

Voilà je cherche à modifier mon code pour pouvoir faire en sorte de compter comme vue la vidéo si celle ci a été affichée dans le ViewPort plus de 3 secondes. Je ne sais pas s'il est possible de lancer un chronomètre qui affichera "Vidéo vue plus de 3secondes" une fois les 3 secondes passées. Il faudrait que cette information ne soit donnée qu'une fois, ainsi si on scroll et qu'on revient ça ne sera pas comptabiliser comme une vue.

Ici la vidéo est un exemple, elle se lancera toute seule une fois terminé.

Merci d'avance pour votre précieuse aide.

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
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
<html>
<head>
</head>
 
<body>
 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
 
<iframe id="player_vid" width="300" height="200" src="https://www.youtube.com/embed/YXMnrY_Fcns" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
    window.onload = function() {
        
                
                var isInViewport = function (elem) {
                var bounding = elem.getBoundingClientRect();
                return (
                bounding.top >= 0 &&
                bounding.left >= 0 &&
                bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
                );
                };
                var player = document.getElementById('player_vid');
                window.addEventListener('scroll', function () {
                        canUserSeeIt = isInViewport(player);
                        console.log(canUserSeeIt);
                        console.log(
                }, false);
    }
</script>
</body>
</html>

**melka one** · 22/06/2018, 12h34

jour

utilise startTime et currentTime

au demarage startTime=depart et a l'arret currentTime-depart=duree en miliseconde

**alexcot13** · 22/06/2018, 13h14

Oui tout à fait mais mon soucis est l'intégration dans le fait que le timer doit se lancer quand la video est dans le ViewPort et s'arrêter quand la video n'est plus visible. Il faut pouvoir stocker le temps passé et garder uniquement le plus grand

**melka one** · 22/06/2018, 16h58

utilise onscroll pour verifier la position de la video par rapport a la fenetre

**alexcot13** · 23/06/2018, 15h04

C'est en effet ce que j'ai effectué avec le code présent ci dessus. Mon soucis est qu'il me retourne un booléen a chaque mouvement hors je voudrais n'avoir que lorsque qu'il change et qu'il passe de vrai à faux par exemple

**danielhagnoul** · 23/06/2018, 19h53

Déclaré vu une vidéo, alors que l'on faisait défiler la page qui la contient est une arnaque, car on n'a vu qu'une image statique pendant X secondes.

**alexcot13** · 26/06/2018, 09h41

Coucou,

C'est pour cela que le but ici est de récupérer le temps que l'internaute est resté sur la vidéo mais mon soucis est que le code me ressort des true et false à chaque scroll et je ne connais pas la manipulation pour dire "au premier true" alors la date est prise dans une variable "au premier false" la date va dans une autre variable puis on fait la soustraction.

**danielhagnoul** · 26/06/2018, 12h12

Exemple :

Code HTML :

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

1
2
3
4
5
6
7
8
<button id='marche'>Play</button>
<button id="arret">Stop</button>
<span id="temps">00:00:00</span>
<br>
<video id="video1">
    <source src='http://videos.mozilla.org/serv/marketing/communityvideos/community_vreddy.ogv' type="video/ogg">
    <source src='http://d31j8lt3uybmqs.cloudfront.net/sublimevideo/dartmoor.mp4' type="video/mp4">
</video>

Code JavaScript :

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const
        elemVideo = document.querySelector('#video1'),
        elemTmp = document.querySelector('#temps'),
        elemPlay = document.querySelector('#marche'),
        elemStop = document.querySelector('#arret');
 
    let
        inter_video,
        boolVideoVue = false;
 
    function tmp() {
        let
            dura = elemVideo.currentTime,
            min = Math.floor(dura / 60),
            sec = Math.floor(dura % 60);
 
        if (sec > 3) {
            boolVideoVue = true;
        }
 
        // devug, console, touche F12
        console.log(`La vidéo a été vue pendant ${ sec } secondes. boolVideoVue = ${ boolVideoVue }`);
 
        if (min < 10) {
            min = '0' + min;
        }
 
        if (sec < 10) {
            sec = '0' + sec;
        }
 
        elemTmp.firstChild.nodeValue = '00:' + min + ':' + sec;
    }
 
    elemPlay.addEventListener('click', ev => {
        elemVideo.play();
        inter_video = setInterval(tmp, 100);
    }, {
        capture: false,
        passive: true,
        once: false
    });
 
    elemStop.addEventListener('click', ev => {
        clearInterval(inter_video);
        elemVideo.pause();
        elemVideo.currentTime = 0;
    }, {
        capture: false,
        passive: true,
        once: false
    });
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

**alexcot13** · 26/06/2018, 12h16

Merci beaucoup pour cette réponse, le choix de la vidéo est très sympa ahah. Je vais essayer d'adapter cela à mon cas, merci beaucoup

Compter comme vue une vidéo si elle a été affichée plus de 3secondes ?

JavaScript

Discussions similaires

Partager

Partager