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

Vue hybride

Discussions similaires

Partager

Partager