Confirming user has watched a video

Hi there,

Im looking to create a simple badge system to reward users after watching a youtube video. Does anybody know a way to create a workflow to change a yes/no field type on completion of a video? I cant see any ability to add workflows to video elements and am a little lost.

Any help would be much appreciated!!

Thanks

1 Like

Hi @harley.waine, you could use the iframe API.

You looking for player.getPlayerState() value = 0, which means is ended.

See here: YouTube Player API Reference for iframe Embeds

Thank you so much @yusaney1 thats exactly what i was looking for. I have been reading through all the documentation but I am a little unsure of how to enable the html element to interact with the bubble back end?

Apologies if this is a stupid question, any pointers would be really appreciated.

Thanks again for your help!

Hi. It should be simple to do. Just add this code to your HTML element.
I have added some //comments in the code explaining what each piece does.

If you want to connect the “trigger” with your bubble app to perform some actions in the current user, you will need to use the Toolbox plugin. This code calls the trigger event (bubble_fn_1) when the player detects the video has finished.

Also, you can hide the controls/customize the player to your needs.

<div id="player"></div>

<script>
	// 1. 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);

      // 2. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '520',
          width: '760',
          videoId: '1wkPMUZ9vX4', // ID of the video
          playerVars: {
            'playsinline': 1 //, 'controls': 0 uncomment to disable youtube controls.
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 3. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        console.log("player is ready");
		    event.target.playVideo(); // autoplay video
      }

      // 4. The API calls this function when the player's state changes.
      //    We need to find when the video has completed, so we will use player.getPlayerState
      function onPlayerStateChange(event) {
		    if (player.getPlayerState() === 0) {
          // Code that should run when the video is completed
          console.log("VID COMPLETED");
          bubble_fn_1();
        }
      }
</script>

Demo: Bubble | No-code apps
Editor: Ybapi | Bubble Editor

Redu.

1 Like

Thank you so much, thats incredibly helpful. The one final thing im missing to replicate is working out what element this is?

Thanks again, youve been amazingly helpful

You will need to install the plugin “Toolbox” to have that element.

Redu.