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

Version imprimable

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:

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>

22/06/2018, 12h34
melka one

jour

utilise startTime et currentTime

au demarage startTime=depart et a l'arret currentTime-depart=duree en miliseconde
22/06/2018, 13h14
alexcot13

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
22/06/2018, 16h58
melka one

utilise onscroll pour verifier la position de la video par rapport a la fenetre
23/06/2018, 15h04
alexcot13

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
23/06/2018, 19h53
danielhagnoul

:salut:

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.
26/06/2018, 09h41
alexcot13

:D

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.

Exemple :

Code:

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:

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
});

26/06/2018, 12h16
alexcot13

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 :D