2D - SDG 11 - World Heritage Video Playlist (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

The SDGs are 17 goals adopted by the United Nations in 2015. They are a to-do list for everyone to work on together.

This tutorial is about the world’s cultural and natural heritages, which is related to the 11th goal of “sustainable cities and communities”.

You will create a video playlist, which contains Youtube videos that introduce a few heritages to the user. These are all national parks that are less known to many people.

Step 1 - Start a New Project

First, please create a new project on the CreatiCode playground, and remove the “Cody” sprite.

Step 2 - Add a Youtube Video Player Widget

Now, let’s add a youtube video player widget. To make it cover the enitre stage, we will place it at the center, with a width of 480 and a height of 360. We will also place it in the foreground, so that users can pause the video if they want to. The video player will be named “video1”.

For the first video, here is an example about the Ivindo National Park in Gabon:

To get its URL from this page, you can just click the “Share” button and then click “copy link”.

Now if you click the green flag, the video will be added to the stage, but it won’t start playing:

Step 3 - Start Playing the Video

To start the video, you can use this block to send the “start” command to the player. Note that you need to select the player named “video1”.

Now if you click the green flag button, the video will be added and played:

Step 4 - Add a “Next” Button

To allow the user to switch to the next video, let’s add a button that says “next” at the bottom of the stage. The name of the button will be “button1”.

Now when we run the project, we get the button at the bottom:

Step 5 - Switch to the Next Video

When the user clicks the “next” button, we want to play another video. To do that, we can “set the value” of the video player to a different URL:

This video is about the Vatnajökull National Park in Iceland.

Now when you click the button, the video will switch and start playing right away:

Step 6 - Use a Variable “id”

Suppose we want to switch to a third video. When we click “next”, we don’t know whether to play the second video or the third video. Therefore, we need to keep track of which video is currently being played.

To do that, we can add a new variable named “id”, and set it to 1 at the beginning, so we know the first video is being played at this time.

Step 7 - Play Video 2 If Video 1 is Playing

Now we can decide which video to play next based on the current video id. If “id” is 1, then we should switch to video 2. We should also update the value of “id” to 2, so that we know video 2 is being played now:

Step 8 - Play Video 3 If Video 2 is Playing

When the user clicks the “next” button, if we are already playing video 2, then we should switch to a third video, and update “id” to 3.

The third video is about the Chiribiquete National Park in Columbia:

Now if we run the project, we find a problem: the video will switch from video 1 to video 3 directly when we click “next”.

Can you find where is the bug in our program?

Step 9 - Print to Console Panel

To find out what’s happening, we can add 2 “print” blocks in our program to log the value of “id”:

When we run the program again, after we click “next” once, we find 2 lines are printed:

So it turns out when we click “next”, in the first “if” block, we set “id” to 2. After that, the second “if” condition of “id = 2” becomes true as well, so we run the blocks to play the third video right away.

Step 10 - Fix the Bug

To fix the bug, we should replace the “if” blocks with “if-else” blocks like this:

Here is the final demo with correct behaviors. Note that in full-screen mode the video will have a higher resolution.

Next Steps

Here are some ways that you can extend this project with your own creative ideas:

prev button: You add another “prev” button to allow the user to go back to the previous video
other videos: pick some other videos to create your own playlist. Here is a list of all the world heritages: https://en.wikipedia.org/wiki/List_of_World_Heritage_Sites_by_year_of_inscription
overlay descriptions: you can place a “label” widget on top of the video to add more descriptions about each video.