Video verplicht bekijken.
Ik heb een vraagje.
Ik wil mensen verplicht een video helemaal laten kijken, voordat ze door kunnen gaan naar de pagina. Ik werk met een "levelsysteem", waar bij ieder level een andere film moet worden gekenen.
Ik heb het volgende idee:
1. Met een ifje controleren of er een 1 in de database staat
2. Ik zet een filmpje van YouTube op mijn website.
*3. Na het volledig bekijken van een filmpje wordt er een button zichtbaar, die je doorleidt naar de volgende pagina.
4. Deze pagina insert in de colom van de gebruiker een 1 bij "video level ...".
5. De gebruiker kan verder naar de volgende pagina van het desbetreffende level.
Nu weet ik niet of puntje 3 mogelijk is, en zoja, hoe ik dit moet doen.
Weet iemand dit, of een veel "makkelijkere" oplossing.
Tim
Is hier eigenlijk wel een oplossing voor, of niet.
[17-11-13 21:29:16] Frank: Je moet de tijd van het filmpje in de database zetten
[17-11-13 21:29:23] Frank: dus bij. 361 seconden
[17-11-13 21:29:33] Frank: En dan na 361 seconden komt de knop.. :)
Weet alleen niet hoe ik de laatste regel moet doen, maar dat zoek ik wel uit.
Bedank alle
Code (php)
1
Math.floor(Video.YTPlayer.getCurrentTime());
en heeft ook een 'hide/disable controls' optie.
Code (php)
1
playerVars: { 'autoplay': 1, 'controls': 0 },
Je kunt ook de totale tijd ophalen van het filmpje, deze sla je dan op in de database, en zou je dan met ajax elke seconde kunnen controleren of de 'current time' het zelfde is als de tijd in de database.
Als je de trailer van "Jurassic Park 1" niet uitkijkt, krijg je de meest memorabele animated gif van de 90's te zien.
Als je de video volledig ziet, verschijnt een link.
Code (php)
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
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
<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<div id="message"></div>
<div id="controls">
<a href="javascript: stopVideo()">Stop</a>
<a href="javascript: startVideo()">Start</a>
</div>
<script>
// globals
var videoId;
var player;
var done;
var timer = null;
var video_completely_seen = false;
var video_skipped = false;
function youtube(id, controls) {
videoId = id;
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
done = false;
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: videoId,
playerVars: { 'autoplay': 1, 'controls': 1 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
/**
* event callbacks. reageren op commando van Google.
*/
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (timer == null && evt.data == YT.PlayerState.PLAYING && !done) {
// we gaan de timer aanzeten. We verwachten dat var done nog op false staat na x aantal seconden, zijnde de duur van de video
timer = setTimeout(function() {
video_completely_seen = true;
// knop tonen, tenzij men al heeft proberen vals spelen
if (video_skipped == false) {
document.getElementById('message').innerHTML = '<a href="#">KLIK om verder te gaan</a>';
}
},
Math.floor(1000 * player.getDuration())
);
return;
}
if (timer != null && video_completely_seen == false) {
video_skipped = true;
// een error message mee sturen
document.getElementById('message').innerHTML = '<img src="http://stream1.gifsoup.com/view2/1349477/ah-ah-ah-o.gif">';
}
}
/**
* simpele controls
*/
function stopVideo() {
player.stopVideo();
}
function startVideo() {
player.playVideo();
}
window.onload = function() {
youtube('lc0UehYemQA', null);
}
</script>
</body>
</html>
<html>
<body>
<div id="player"></div>
<div id="message"></div>
<div id="controls">
<a href="javascript: stopVideo()">Stop</a>
<a href="javascript: startVideo()">Start</a>
</div>
<script>
// globals
var videoId;
var player;
var done;
var timer = null;
var video_completely_seen = false;
var video_skipped = false;
function youtube(id, controls) {
videoId = id;
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
done = false;
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: videoId,
playerVars: { 'autoplay': 1, 'controls': 1 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
/**
* event callbacks. reageren op commando van Google.
*/
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (timer == null && evt.data == YT.PlayerState.PLAYING && !done) {
// we gaan de timer aanzeten. We verwachten dat var done nog op false staat na x aantal seconden, zijnde de duur van de video
timer = setTimeout(function() {
video_completely_seen = true;
// knop tonen, tenzij men al heeft proberen vals spelen
if (video_skipped == false) {
document.getElementById('message').innerHTML = '<a href="#">KLIK om verder te gaan</a>';
}
},
Math.floor(1000 * player.getDuration())
);
return;
}
if (timer != null && video_completely_seen == false) {
video_skipped = true;
// een error message mee sturen
document.getElementById('message').innerHTML = '<img src="http://stream1.gifsoup.com/view2/1349477/ah-ah-ah-o.gif">';
}
}
/**
* simpele controls
*/
function stopVideo() {
player.stopVideo();
}
function startVideo() {
player.playVideo();
}
window.onload = function() {
youtube('lc0UehYemQA', null);
}
</script>
</body>
</html>
Er mist ongetwijfeld nog logica.
Maar je ziet wel op welke plek je kan ingrijpen
Gewijzigd op 18/11/2013 17:02:06 door Kris Peeters
Enorm bedankt.
Aleen misschien een klein, lullig vraagje hoor: Waar weizig ik de video?
Tim
Tim Klein op 18/11/2013 17:14:47:
Kris,
Enorm bedankt.
Aleen misschien een klein, lullig vraagje hoor: Waar weizig ik de video?
Tim
Enorm bedankt.
Aleen misschien een klein, lullig vraagje hoor: Waar weizig ik de video?
Tim
Hier als het goed is :
Code (php)
1
2
3
2
3
window.onload = function() {
youtube('lc0UehYemQA', null); # lc0UehYemQA is youtube id
}
youtube('lc0UehYemQA', null); # lc0UehYemQA is youtube id
}
Nee, ik bedoel ...
toon eens de HTML die jij op je pagina zou willen zien.
Als je ergens een search <input> zet, kan ik die doen reageren.
Ondertussen staat de id van de video op lijn 80. Als het een video is die jij als webmaster (vast) bepaalt, kan je simpelweg lijn 80 aanpassen.
Helaas had ik nog geen code geschreven, omdat ik niet wist wat nu helemaal precies de beste oplossing was.
IK WEL JE ENORM BEDNAKEN!
Groetjes, Tim
Gewijzigd op 18/11/2013 17:36:15 door Tim Klein