0

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

2
  • 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 R
    Mar 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 stylee
    Mar 16, 2015 at 17:16

1 Answer 1

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.