This is a interactive Course builder and player which is made using HTML / CSS / JS. there is simple backend which is made with PHP. Only Youtube iframe api, jQuery and google's web font Roboto has been used as extrenal library and asset.
"CHALLENGE 1 - CHOOSE YOUR OWN ADVENTURE VIDEO MAKER"
Go to this link for live Demo : https://talgol.com/thinkific-video/teacher/teacher.html
-
Goto http://localhost/thinkific-video/teacher/teacher.html
- Type your course title
- Add a video url from youtube
- add interaction
- Get of the url of the course from top right corner
-
Goto player using url from last step. If the player does not load (please refresh)
- Play the video
- enjoy the interactive course.
This demo project contents 3 parts.
- teacher (course builder)
- student (course Player)
- backend
There is 2 dependce,
- The base folder name "video_player" should be "thinkific-video"
- Data folder inside the backend folder should be writeable. (if your are using mac or linux)
- Insall Apache severver / Xampp / Nginx with PHP.
- goto your web root
- git clone git@github.com:happy56/video_player.git thinkific-video
- make /thinkific-video/backend/data writeable
Building an engaging course meterials for students is a challange for the teachers. To make that process easier for the teachers this project is designed.
For this project, I had very little amount of time. So, I was planning to a quick prototype of course builder and gradually i'll add specificaiton.
I am using youtube videos cause they the well documented api. and almost everyone in internet knows how to play youtube video.
The example course builders I found very complicated and hard to follow. You need a 4-5 hour training to understand what to do and how it should be done. Personally, I like simplicity. I designed the whole experince using the familiar youtube video player.
To keep the user interface simple and easy to use. we kept the most of the option hidden. which will not over warm a new user. The app ask what ever is requied at that time of the point.
This is an non-blocking web app. I made using a "event driven" architecture. There are event lisetener and everything from user click, youtube players info, server response everthing triggers (try to trigger) a event.
if the there is no eventlisner the software does not fails or breaks. browsers handdles the events accodingly so the app does not get stuck.