I search how Force a user to watch the whole video, and have a small button at the end of each video, which triggers a javascript function Any type of video or reader. Thanks
-
I don't think your users will take kindly to being "forced" to watch a whole video (or being "forced" to do anything else, for that matter).– Paul RMar 16, 2015 at 17:11
-
I agree with @Paul R. You can't really force them to do anything, but you can do something like you are talking about with JavaScript, so that something becomes visible/etc. at the end of the video. Many advertising sites do exactly that.– dub styleeMar 16, 2015 at 17:16
1 Answer
I wanted to implement a similar concept and I tried asking for help but did not get any so I implemented it using jquery DOM manipulation. Below is the code:
<html>
<head>
<script src="http://www.youtube.com/player_api"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="youtubevideo"></div>
<script>
// create player
var youtubevideo;
function onYouTubePlayerAPIReady() {
youtubevideo = new YT.Player('youtubevideo', {
height: '390',
width: '640',
videoId: 'hS5CfP8n_js',
//Here the video autoplays, the player hide controls and disable keyboard to prevent users from running past the video. NB: Autoplay only works on PCs. iOS 8 also forces Native controls.
playerVars:{'rel':0,'showinfo':0,'autoplay':1,'controls':0,'disablekb':1,'modestbranding':1},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
//This tells the youtube player to trigger the hello() function when done
function onPlayerStateChange(event) {
if(event.data === 0) {
hello();
}
}
//THe hello function uses ajax to bring up html after the video ends. It is achieved using jquery DOM manupulation
function hello(){var i='HTML GOES HERE';$("body").html(i)}
</script>
</body
<html>
You can check it out here: http://jsfiddle.net/Ljbwbjsf/1/
You can implement this in many players, I just used youtube as an example.