How to create an Movie Website.

How to create an Movie Website.

We will be using CSS and Html5 To create a simple Media player.

In future tutorials I will be showing you how to incorporate other players into your website. But for now we will use this:

Firstly you want to create a header, body, Footer. Which can all be found out on how to make by going here:

http://webtechtutz.blogspot.co.uk/2013/08/website-layout-part-1-tutorial-header.html

http://webtechtutz.blogspot.co.uk/2013/08/website-layout-part-2-tutorial-body.html

http://webtechtutz.blogspot.co.uk/2013/08/PageWrappingCss.html

Now once you have this I would firstly start by putting it in its own div.

SO lets make a proper start:

<Div id="MoviePlayer">


</Div>

HTML5 has designed a video tag for ease of use so lets begin we need to use <video> </video>

Inside these tags we can set the width and height of the player. So we so this by simply adding these properties.

<video width="320" height="240" controls> </video>

Now we add the source of the movie/ where it is located by path:

<source src="./Media/movie.mp4" type="video/mp4">

Or you can change the movie type along with the extension. as you see below. In the third line of code.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

easy stuff. now the browsers that this doesnt work in:

Internet Explorer 9+     YES     NO       NO
Chrome 6+                    YES     YES     YES
Firefox 3.6+                  NO     YES     YES
Safari 5+                       YES     NO     NO
Opera 10.6+                  NO     YES     YES

Now adding the code that will play and do all the things you would expect of a basic media player:

<button onclick="playPause()">Play/Pause</button>
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>

and we need to use javascript to tell if play is paused or playing or not.

<script>
var Video=document.getElementById("video1");

function playPause()
{
if (Video.paused)
  Video.play();
else
  Video.pause();
}

function Big()
{
Video.width=560;
}

function Small()
{
Video.width=320;
}

function Normal()
{
Video.width=420;
}
</script> 

using button onclicks function this is made easy and simply add this directly above your code in the div that you set and it is all ready to go!

Thanks again, I might make a site tutorial like putlocker also if you comment that you like.