├── README.md ├── trackVideo.css ├── Trackvideo.js └── tackingVideoFrame.html /README.md: -------------------------------------------------------------------------------- 1 | # TrackingVideoFrame -------------------------------------------------------------------------------- /trackVideo.css: -------------------------------------------------------------------------------- 1 | 2 | #status span.status { 3 | display: none; 4 | font-weight: bold; 5 | } 6 | span.status.complete { 7 | color: green; 8 | } 9 | span.status.incomplete { 10 | color: red; 11 | } 12 | #status.complete span.status.complete { 13 | display: inline; 14 | } 15 | #status.incomplete span.status.incomplete { 16 | display: inline; 17 | } -------------------------------------------------------------------------------- /Trackvideo.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | function onClickVideo(id){ 5 | console.log("videoClick"+id); 6 | var video = document.getElementById("video_"+id); 7 | var timeStarted = -1; 8 | var timePlayed = 0; 9 | var duration = 0; 10 | // If video metadata is laoded get duration 11 | if(video.readyState > 0) 12 | getDuration.call(video); 13 | //If metadata not loaded, use event to get it 14 | else 15 | { 16 | video.addEventListener('loadedmetadata', getDuration); 17 | } 18 | // remember time user started the video 19 | function videoStartedPlaying() { 20 | timeStarted = new Date().getTime()/1000; 21 | } 22 | function videoStoppedPlaying(event) { 23 | // Start time less then zero means stop event was fired vidout start event 24 | if(timeStarted>0) { 25 | var playedFor = new Date().getTime()/1000 - timeStarted; 26 | timeStarted = -1; 27 | // add the new ammount of seconds played 28 | timePlayed+=playedFor; 29 | } 30 | $("#played_"+id).html(Math.round(timePlayed)); 31 | } 32 | 33 | function getDuration() { 34 | duration = video.duration; 35 | $("#duration_"+id).html(new Text(Math.round(duration)+"")); 36 | console.log("Duration: ", duration); 37 | } 38 | function onTrackedVideoFrame(event, currentTime, duration){ 39 | var videoId = event.currentTarget.id; 40 | videoId = videoId.split("_")[1]; 41 | $(".current_"+videoId).text("Current Time: "+currentTime); //Change #current to currentTime 42 | $(".duration_"+videoId).text("Video Length: "+ duration) 43 | } 44 | $(".activeState").bind("timeupdate", function(event){ 45 | 46 | 47 | 48 | onTrackedVideoFrame(event, this.currentTime, this.duration); 49 | }); 50 | 51 | video.addEventListener("play", videoStartedPlaying); 52 | video.addEventListener("playing", videoStartedPlaying); 53 | 54 | video.addEventListener("ended", videoStoppedPlaying); 55 | video.addEventListener("pause", videoStoppedPlaying); 56 | } 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /tackingVideoFrame.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 14 | 20 |
21 | User watched 0 seconds out of 22 | seconds. (only updates when the video pauses) 23 |
24 |
Current Time: 0:00
25 |
Video Length: 0:00
26 |
27 | 28 | 29 |
30 | 33 | 39 |
40 | User watched 0 seconds out of 41 | seconds. (only updates when the video pauses) 42 |
43 |
Current Time: 0:00
44 |
Video Length: 0:00
45 |
46 | 47 | 48 | 49 | 50 | --------------------------------------------------------------------------------