This is another take on the last episode we made: We are going to implement this into your website:
This is a really nice designed media player using the HTML5 and it is designed by VideoJs. Go to the website and you can even customize your media player design and download it as a new package. But for this tutorial we will be using the default package. It is so simple and can get your movie website / business up and running straight away!
Lets get started. By now you should already know how to make a header footer and body.
So lets place all of this code in a centered body.
But first we need to link the JavaScript you can download these and host them yourself but it is easy for me to explain using the provided urls'.
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>
Now we need to set our parameters. as seen in the last tutorial we start with the <video> Tag.
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster ="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
Now I shall break down the code:
<video id="example_video_1"
giving the id for the css for further editing
class="video-js vjs-default-skin"
Declaring the skin base
controls preload="auto" width="640" height="264"
Now this is setting the controls to auto and the desired width and height of the player
poster ="http://video-js.zencoder.com/oceans-clip.png"
The image that the browser shows before you press play
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
Now telling you where should I locate the movie, so you declare the source and type of movie you can tell this
by looking at the extension type which is .mp4
The final code is this:
<body> <center><video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster ="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> </video> </center> </body>
Hope you enjoy and keep updated for my next post!
No comments:
Post a Comment