Using videos in eLearning courses not only keeps learners engaged, but also enables them to remember the content easily.Many industry experts recommend using videos in online courses to enhance their effectiveness. However, we face aproblem when we use videos directly in our courses’ slides.
Problem:The dimensions of videos should be adjusted based on the dimensions of the GUI (Interface). This may affect the viewing experiences, if there are minute objects or animations in the video.
Solution:In order to display the video better, the video needs to be opened in a new browser window so that we can set our own dimensions as per our requirement.
Step 1: Design your slides with the content.
Step 2: Develop anHTML page,and add your videotoit.Refer to the screenshot and code below.
Note 1: Adjust the height and width values in the above code as per your requirement.
Note 2: You can even make the video play automatically by adding the word ‘autoplay’ to your <video> tag.
Eg: <video width=”400″ height=”250″ autoplay>…</video>
Step 3: Add a button/object in your slide. On clicking it, your video needs to open.
window.open(“your_path/video.html”, “_blank”, “toolbar=0, scrollbars=yes, status=0, resizable=yes, top=200, left=200, width=400, height=300″);
Step 5: Publish your course,and check the output. The video with of the required size will open in a separate browser window as shown in the screenshot below.
In this way, you can display your video in a browser using Articulate Storyline.
Note: All your video, html file and .story file may be placed in the same folder to avoid complications as shown in the screenshot below.
Hope you find this post useful. Do share your thoughts.
Subscribe to Our Blogs
Get CommLab's latest eLearning articles straight to your inbox. Enter your email address below: