Video in H5P presentation. How to create a H5P slide with multiple videos?February 4, 2021 0 By admin
In this post I will walk you through creating a H5P slide with multiple videos. Using video in H5P presentation is great way to introduce the team, topics or course modules. This approach can be also used to gamify your slides or provide more information about complex concepts or diagrams.
Create a H5P slide with multiple videos in 5 steps:
Videos in H5P presentation – how to create a H5P slide with multiple videos
You can watch the video explaining how to insert many videos into one H5P slides, or read the transcript below.
Videos in H5P presentation – how to create a H5P slide with multiple videos (trancript)
H5P enables users to create interactive and engaging presentations using a range of functionalities. Embedding videos in the slides is one of these functionalities. What you can do, for instance, is to embed multiple videos in one slide to introduce the team members, educators on course, module in a single slide. Instead of pages of text or several slides, you can use video clips allowing each member introducing themselves or areas they are responsible. This way, you create a much more personalised experience for your learners or website visitors.
Check out the mock-up example below in the first slide (just a note that the videos embedded in the slide have no audio)
The same concept can be applied to other scenarios:
You can introduce content – with the video, you can present a more detailed outline of modules on a single slide that it would be possible with text.
You can explain concepts or graphs – you might add videos on the slide where the spoken explanation would work better than text or diagram on its own.
You can use video to gamify your content. You can create a sort of quiz – ask a question and give three answers. When learners choose the solution, the feedback video will play. This trick allows giving instant feedback.
You can also use videos for creating branching scenarios, but there is a bit more to plan and design around here (so basically more slides with more options linked to each other would be required).
Step 1. Create your H5P slide
You can log in for free, and create your own account on www.H5P.org, where you can start creating your designs for free with this tool.
I work on WordPress website where I create all the H5P artefacts. H5P is added there a a plug in. If you have your courses on MOODLE, Brightspace or one of these other LMSs you should be able to use H5P. If you are not sure how to get access – check with the LMS administrators how to do that.
At this stage I suggest you start think about the number of sections or videos you want to include. Is there going to be some text too? Is there anything else you would like to include? This will dictate your slide layout.
Step 2 – Add background (optional)
You might decide to have some text or additional visuals on the background – remember that the H5P is quite limited in terms of typography, colours and fonts. It might be easier to create the background for that slide using a different tool (e.g. Canva, Google slides, Pixlr).
I quite often include an image grid on my background. This grid will later guide me where images will sit. In Google slides, or Canva you can distribute images, so they are tidy and symmetrically organised on the page.
I created my background in Canva.
Step 3 – Source or create your videos
You need to find or create your videos and create cover images that will be used as video thumbnails. As for videos – the H5P allows you to upload files, or embed videos from the internet.
Step 4 – upload your videos, thumbnails into an H5P presentation.
While in your presentation on the slide you want to have your videos in..
- Click on the video icon
- Type video title
- Choose your video – I am choosing here videos from my drive, but you can also select a YouTube video.
- Under visuals choose video poster image (thumbnail) and upload.
- Under playback, you have two options. In this case, I am not changing them. But if you have a slide where you would like the video to start playing automatically, you should choose auto. And loop if you want to play over and over again.
- Under accessibility, you can add captions. I am not doing it in this case.
- The next option here that interests us is whether to display it as a button. (I am not activating video as a button in this case, but consider this option if you use videos in diagrams or complex charts – buttons takes less space).
Step 5 – resize and position videos on the H5P slide.
Ok, so you have your video in the slide. Now you need to resize it and move it where you want it to sit. It can be tricky, so I usually have some grid on my background art. It helps to organise the videos quicker.
To resize, you need to grab the square on one of the edges and drag it. As you drag this square, you can see the size of your video changing in the little popup box.
So this is the first video.
For all others, I use a different technique. I am going to use that little popup menu and type the dimensions that I want.
So here is my video uploaded –
- Click on the clip,
- Click on the arrows – this is a Transform option. From here, you can change position and size.
- The first video was 180X180, and I want this one to be exactly the same, so I type my dimensions and click the tab or enter key.
- I also can match the position using this menu – let's have a look – the first image sites are 120 (position y) – let's do the same for the new second video. Type the 120 and… Voila! Unfortunately, H%P doesn't have an option to arrange the images evenly across the slide. This needs to be done manually (you can drag the image across the slide, but I think you can get a more precise result if you click on the thumb and then use the arrows on your keyboard to move the image point by point to the right or left.)
- H5P screenshots from: www.H5P.org
- Video Music: www.bensound.com
As we all continue to experience vast advances in technology and social media advertising, blogs, websites and the like, audio…Read more
Learn more about H5P:
Download H5P presentation template