问题描述:

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 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.

相关阅读:
Top