How to Make Your Own Web Video Player
Last time, I showed you how to create a customized Audio Web Player. This time, we’re going to take it up a notch and dive into creating a Web Video Player. With this player, you can watch videos right on your website! It’s super cool!
To get started, we’ll be using the HTML5 element to embed our video player. This means that any browser that supports HTML5 can play your awesome videos. But don’t worry if your browser doesn’t support it – we’ve got you covered! We’ll also have a backup plan with an embedded flash player. Just make sure you have the Flash plugin installed before trying to play the video. Take a look at the screenshot below to see how amazing our video player is going to look.
Contents
Getting Ready
Before we dive into the code, we have to take care of a few things, starting with the video. In this lesson, we’ll be using a TED Talk video by Kelli Anderson on YouTube. To download the video, you can use a web tool called KeepVid.com.
Now, to ensure that the video works on different browsers, we need to have two formats: MP4 and OGV. When you download videos from YouTube using KeepVid.com, you’ll most likely get the MP4 format. If you need to convert it to OGV, you can use a free tool called Miro Video Converter. It works on both Windows and OS X.
Additionally, we’ll need an image file for the video cover. To create the cover, you can play the video using VLC and then follow these steps: go to Video > Snapshot to capture a snapshot of the video.
As for the user interface icon, we’ll be using FontAwesome. Lastly, we’ll need jPlayer and jQuery to run the video, along with a new CSS file where we can store the video skin styles.
Once you have gathered all these elements, place them in their respective folders as illustrated below:
Creating an HTML Document
Alright, let’s start by creating a new HTML document. To get things set up, we’ll need to link a couple of important libraries – jQuery and jPlayer – along with a CSS file. Here’s how you can do it:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
<script src=”jquery.js”></script>
<script src=”jplayer.js”></script>
</head>
<body>
<!– Your content goes here –>
</body>
</html>
Now that we have the basic structure in place, let’s move on to building our video player. The HTML structure is actually quite similar to what we used for creating an audio player in the previous tutorial. The only difference is that this time, we want to include a button for fullscreen playback and a play button at the center of the video. Here’s the code you can use:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
<script src=”jquery.js”></script>
<script src=”jplayer.js”></script>
</head>
<body>
<section>
<button class=”fullscreen-button”>Fullscreen</button>
<div id=”video-container”>
<video id=”my-video”>
<source src=”video.m4v” type=”video/mp4″>
<source src=”video.ogv” type=”video/ogg”>
</video>
<div id=”play-button”></div>
</div>
</section>
</body>
</html>
Hey there! Guess what? Our video player is a bit dull at the moment. Take a look at the screenshot below to see what I mean.
But don’t worry, we can jazz it up a bit! I’m going to show you a nifty little trick using some code. So, get ready to add some pizzazz to your video player!
First things first, let’s set up our video player. We need to make sure it’s all connected and ready to go. Take a peek at the code snippet below:
$(“(document)”).ready(function() {
$(“#jquery_jplayer_1”).jPlayer({
ready: function () {
$(this).jPlayer(“setMedia”, {
m4v: “vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp4”,
ogv: “vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogv”,
poster: “vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.png”
});
},
swfPath: “/js”,
supplied: “m4v, ogv”
});
});
Now, with this snazzy little code, we can make some magic happen! Once you have it all set up, you’ll see that your video player is transformed into something truly awesome.
So, what are you waiting for? Go ahead and give it a try! See how you can turn a plain video player into something that wows everyone who sees it. Trust me, it’s totally worth it!
I hope you enjoyed this little trick and have fun playing around with your new and improved video player. Happy coding!
Adding Some Style
Alright, now that we’ve got those scripts in place, we’re ready to get this video playing. But honestly, the player is looking pretty blah at the moment. So, let’s spruce it up a bit by adding some styles.
Grab that style.css file we made earlier, and let’s dive in.
First things first, let’s add a little flavor with the @font-face rule and get rid of those pesky underlines on the links.
“`
@font-face {
font-family: “FontAwesome”;
src: url(‘fonts/fontawesome-webfont.eot’);
src: url(‘fonts/fontawesome-webfont.eot?#iefix’) format(‘eot’),
url(‘fonts/fontawesome-webfont.woff’) format(‘woff’),
url(‘fonts/fontawesome-webfont.ttf’) format(‘truetype’),
url(‘fonts/fontawesome-webfont.svg#FontAwesome’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
“`
Now that we’ve got our font situation sorted, let’s move on to the video container. We’re going to give it a specific width and center it in the browser window. A little something like this:
Video Width
“`css
.video-container {
width: 600px;
margin: 0 auto;
}
“`
Video Title
When I want to change the color of the title to dark grey, specify the font size, and align it to the center, I use the HTML markup .jp-title h1
Play Button
Next, I style the play button. I position this button at the top of the video and to show the “Play” icon, I assign the FontAwesome font family to it using the HTML markup .jp-video-play a.
Video User Interface
The User Interface of our video player will have a gradient with an orange color scheme. The icons to control the video, such as Play, Pause, and Volume, will be displayed in white. I achieve this with the HTML markup .jp-interface.
/* HTML Markup */
.jp-interface {
width: 100%;
bottom: 0;
position: relative;
background: #f34927;
background: -moz-linear-gradient(top, #f34927 0%, #dd3311 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));
background: -webkit-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: -o-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: -ms-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: linear-gradient(to bottom, #f34927 0%,#dd3311 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f34927′, endColorstr=’#dd3311′,GradientType=0 );
overflow: hidden;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.jp-interface a {
color: #fff;
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.jp-controls, .jp-toggles{
padding: 0;
margin: 0;
font-family: “FontAwesome”;
}
.jp-toggles {
position: absolute;
top: 14px;
right: 14px;
}
.jp-controls li, .jp-toggles li {
display: inline;
}
.jp-play, .jp-pause {
width: 55px;
height: 40px;
display: inline-block;
text-align: center;
line-height: 43px;
}
.jp-mute, .jp-unmute {
position: absolute;
right: 85px;
top: 0;
width: 20px;
height: 40px;
display: inline-block;
line-height: 43px;
}
.jp-progress {
background-color: #992E18;
border-radius: 20px 20px 20px 20px;
overflow: hidden;
position: absolute;
left: 55px;
top: 14px;
width: 55%;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
}
.jp-play-bar {
height: 12px;
background-color: #fff;
border-radius: 20px 20px 20px 20px;
}
.jp-volume-bar {
position: absolute;
right: 40px;
top: 16px;
width: 45px;
height: 8px;
border-radius: 20px 20px 20px 20px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
background-color: #992E18;
overflow: hidden;
}
.jp-volume-bar-value {
background-color: #fff;
height: 8px;
border-radius: 20px 20px 20px 20px;
}
.jp-current-time {
/* Your styles here */
}
Now, check out how our video player is starting to look! Take a look at the screenshot below:
Watch in Fullscreen Mode
Did you know you can watch videos in fullscreen? It’s a great way to immerse yourself in the experience. To enable fullscreen mode, we need to add some special styles to make sure everything looks just right. This includes adjusting the size of the Play button, the width of the progress bar, and making sure the video displays on top of everything else.
.jp-video-full {
/* Styles for Internet Explorer 6 (fullscreen) */
width: 480px;
height: 270px;
/* Styles for Internet Explorer 7 (fullscreen) */
position: static !important;
position: relative;
}
/* The z-index rule allows for overlays, like subtitles, to be displayed on top of the video */
.jp-video-full div div {
z-index: 1000;
}
.jp-video-full .jp-jplayer {
top: 0;
left: 0;
position: fixed !important;
position: relative;
/* Styles for Internet Explorer 6 (fullscreen) */
overflow: hidden;
}
.jp-video-full .jp-interface {
position: absolute !important;
position: relative;
/* Styles for Internet Explorer 6 (fullscreen) */
bottom: 0;
left: 0;
}
.jp-video-full .jp-gui {
position: fixed !important;
position: static;
/* Styles for Internet Explorer 6 (fullscreen) */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1001; /* 1 layer above the others */
}
.jp-video-full .jp-video-play a {
font-size: 3em;
height: 80px;
width: 80px;
line-height: 95px;
}
.jp-video-full .jp-progress {
/* Styles for the progress bar */
}
Hey there! Want to see our video player in fullscreen mode? Well, check it out!
Add Some Shadow
Hey there! Here’s a little extra something we can add to make the video player stand out and look even better – some shadow. It’s totally optional, but I think it’ll give it that extra touch of elegance and make it more noticeable.
.jp-video-270p .jp-type-single
And there you have it, we’re all set with the codes! Now you can watch the video and also download the file source from the links below. Pretty cool, right?
