Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>test page</title>
- </head>
- <body>
- <h3>Test page</h3>
- <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
- <div id="points-container"><span id="points">0</span> of 750</div>
- <div id="player"></div>
- <script>
- var videoDuration = 0;
- // 2. This code loads the IFrame Player API code 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);
- // 3. This function creates an <iframe> (and YouTube player)
- // after the API code downloads.
- var player;
- function onYouTubeIframeAPIReady() {
- player = new YT.Player('player', {
- height: '390',
- width: '640',
- videoId: 'M7lc1UVf-VE',
- events: {
- 'onReady': onPlayerReady,
- 'onStateChange': onPlayerStateChange
- }
- });
- }
- // 4. The API will call this function when the video player is ready.
- function onPlayerReady(event) {
- event.target.playVideo();
- }
- var isCouting = false;
- function onPlayerStateChange(event) {
- if (event.data == YT.PlayerState.PLAYING) {
- videoDuration = player.getDuration();
- window.setInterval(logCurrentTimeVideo, 2000);
- isCounting = true;
- } else {
- isCounting = false;
- }
- }
- function logCurrentTimeVideo() {
- if (isCounting) {
- console.log(player.getCurrentTime());
- console.log(videoDuration);
- console.log((player.getCurrentTime()/videoDuration)*100 + "%");
- document.getElementById("points").innerHTML = "" + (Math.round((player.getCurrentTime()/videoDuration)*750));
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement