Mediaplayer

A project developed for the "Manipulating DOM" course in Platzi to work on manipulating a 'video' as a HTMLMediaElement.

Project URL

🚀 You can check the project working in the following link: https://wfercanas.github.io/Mediaplayer/

Project Description

Create a web page that enables the user to play videos while he can control its reproduction (play, pause, volume, screen). As complement, the user can change the current video for another from within a list of recommended videos.

Little extra add-ons

Apart from the main purpose of the video player, you will find certain DOM Manipulations that were interesting to test while in the context of this exercise. You are kindly invited to find them while testing the page.

Main Objective

As was mentioned before, the intention of this project is to practice DOM Manipulation. Here you must add the content of the page creating, appending and removing elements or you must modify its behavior when certain actions are performed by the user -like playing or pausing the video, changing the video for another, changing volume, or more alike actions-.

Technologies used

This project was developed using HTML, CSS and Vanilla JS.

Special Challenges

The project has special parts to practice the DOM Manipulation of HTMLMediaElementes:

1. Every HTMLMediaElement has a set of specific properties and methods that should enable you to control the media you are manipulating. This can be an audio element or, as it is in this case, a video element.
2. For any video element in HTML, you can activate the video controls included in the browser by adding the controls atributte. In this case, the controls panel is developed entirely to control the video behavior through events related to our panel.
3. The actions that our controls panel should enable are: play/pause video, video time progress in a bar form and in a chrono way, play next video, mute video, volume control and fullscreen mode.
4. In the play next video functionality, the web has to have a set of videos available to autoplay the next video.

Key JavaScript Concepts Used

1. createElement()
2. append(), remove()
3. HTMLMediaElement, HTMLVideoElement.
4. addEventListener()
5. setInterval(), clearInterval()
6. scrollTop, scrollHeight

Things to improve

1. Although tries to be responsive, there are certain elements in the layout that can be improved.
2. Also in mobile, there is a default behavior within the mobile browsers that enables by default the media control of the browser and overlaps the use of the project controls. Is there a way to prevent this default behavior? Look for it! 🕵️‍♀️
3. In the livechat section, would be fun to add some random mesagges from fictional users in random intervals.
4. The share button could open a new window in the browser to share this project in twitter.
5. When a video finished, would be nice to show a countdown in screen and right after the end push the next video in autoplay.

Acknowledgements

To @jonalvarezz and @platzi for this amazing course 💚.