How to creat an online video and music app like , DSTV, GOTV, Youtube, facebook, and Neflix.

 Hello! guys, it's another special oppotunity for us to expore and apply our  coding skills in development of a real life project. Our aim and objective today is to design and develop  an amazing video and music  web application. Let us start with this:

All these following listed programming languages will be use for this project:

  • HTML 5
  • CSS
  • JAVASCRIPT /JQUARY
  • AND BOOTSTRAP 5
  • EMBEDED VIDEO FROM YOUTUBE
You will also need browser ,Note pad++  or visual studio  for desktop IDE or Anwriter for andriod ID to write your code. You can download them on your browser / google playstore.

NOTE: To build your own personal video and music app, you must have downloaded and save many video and music on your local storage such as flash drive,CD, SD card etc. Therefore,you can code it into your app.

Int:
Since we understand that all the above programming languages has there immidiate framwork,attributes,refrences or tags. Basically,it is important to know our html video and music tag and attributes: follow this link to learn them:https://www.w3schools.com/tags/ref_av_dom.asp

Let us take a look of this video code:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">

</video>

Movie.ogg and movie.mp4 are your video which you have to save in the same file where your code is located. All video and music has diffrent file path such as .mp4,.ogg,.mp3 etc. Therefore you must check for each video's or music's properties before embeded it into your code. Another important thing to put into action when embeding your video or music is to give it a simple name.

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.


With this basic understanding of ours, let us process to our today's project.

Open your text editor put this inside it:

<!DOCTYPE html>
<html>
<head>
<title>My vidoe app</title>
</head>
<body>

<style> 

..all our styling (css) will be place here..

</style>

<script>

..all your javascript(js) will be place here

</script>



</body>
</html>



I will be using embeded video from youtube for this project, you can use video from your local storage(RAM OR ROM). If you want to use the same youtube video. Navigate to your browser and search for youtube, click on any vedio. click on share,then click on embed, copy and past the code into your project.

e.g

<iframe width="560" height="315" src="https://www.youtube.com/embed/k3zsRfdYLj4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>



Create A Mobile Navigation Menu

Step 1) Add HTML:

Example

<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="#home" class="active">Logo</a>
  <!-- Navigation links (hidden by default) -->
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#Video">Video</a>
    <a href="#Music">Music</a>
  </div>
  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
Step 2) Add CSS:

Example

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
}
Step 3) Add Javascript:
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}




Create A Slideshow Video Gallery

Step 1) Add HTML:

Example

<!-- Container for the image gallery -->
<div class="container">

  <!-- Full-width images with number text -->
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/k3zsRfdYLj4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 6</div>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/syIVBTjwDzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 6</div>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/syIVBTjwDzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <div class="mySlides">
    <div class="numbertext">4 / 6</div>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/syIVBTjwDzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <div class="mySlides">
    <div class="numbertext">5 / 6</div>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/syIVBTjwDzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <div class="mySlides">
    <div class="numbertext">6 / 6</div>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/syIVBTjwDzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

  <!-- Image text -->
  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <!-- Thumbnail images -->
  <div class="row">
    <div class="column">
      <img class="demo cursor" src="https://www.youtube.com/embed/syIVBTjwDzA" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.youtube.com/embed/syIVBTjwDzA" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.youtube.com/embed/syIVBTjwDzA" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.youtube.com/embed/syIVBTjwDzA" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.youtube.com/embed/syIVBTjwDzA" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.youtube.com/embed/syIVBTjwDzA" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
    </div>
  </div>
</div>
Step 2) Add CSS:

Style the image gallery, next and previous buttons, the caption text and the dots:

Example

* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
Step 3) Add JavaScript:

Example

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}


How TO Creat- Four column Card Video Layout

Step 1) Add HTML:

Example

<div class="row">
  <div class="column">
    <div class="card">
<iframe width="560" height="315" src="https://www.youtube.com/embed/syIVBTjwDzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  </div>
  <div class="column">
    <div class="card">
<iframe width="560" height="315" src="https://www.youtube.com/embed/syIVBTjwDzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  </div>
  <div class="column">
    <div class="card"><iframe width="560" height="315" src="https://www.youtube.com/embed/syIVBTjwDzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  </div>
  <div class="column">
    <div class="card"><iframe width="560" height="315" src="https://www.youtube.com/embed/syIVBTjwDzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  </div>
</div>
Step 2) Add CSS:

Example

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

You can learn how to modify this project with this website:


Free website source code links :



About Me


Akinpelu Abiodun


I am Akinpelu Abiodun Moses by name. I am a programmer and a graphics designer.
Follow my google website link to know more about me:


Popular Post

  • Wifi hacking with python
  • Complete html,css and javascript web page
  • Facebook login and sign up form with html,css and javascript 
  • Resturant,college,hostital and pharmercy store management system with python
  • online shopping website with html,css and javascript 
  • Text to speech app with html,css and javascript 
  • Online text editor with html,css and javascript 
  • Quiz app with html,css and javascript 
  • To -do app with html,css and javascript 
You can contact me for there source code on my website:







Comments

Post a Comment

Popular posts from this blog

Home Automation using NodeMCU ESP8266 and Blynk 2.0(IOT)

Image
 Hello! guys,let us develop another real life project today. we are about to control any of our home electronics,lighting and power system with our  smart phone . We are using a diffrent micro controller with wifi module called NodeMCU ESP8266 to hook up all our connection to cloud . In addition, we are using Blynk 2.0 as our mobile app to control all the embeded system from our smart phones. THE WORK FLOW IS AS FOLLOWING: CODE<------>NodeMCU ESP8266<---->CLOUD<---->BLYNK2.0<------>RELAYS<-->LOADS<--->CODE Circuit of the Blynk NodeMCU Home Automation projects The circuit is very simple, I have used  D1, D2, D5 & D6  GPIO pins to control the 4-channel relay module. And the GPIO  SD3, D3, D7  &  RX  are connected with the switches to control the relay module manually. I have used the  INPUT_PULLUP  function in Arduino IDE instead of using the pull-up resistors with each switch. As per t...
Read more