How to Design a Video Player based on Web

Hello friends today we gonna learn about How to Design a Video Player based on Web. So read this article, How to Design a Video Player based on Web step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Design a Video Player based on Web

In our previous post, we have one tutorial On how to create an Audio Web Player, as well how to adjust the player skin.

This time we are going to do it with video. Yes, we are going to make a web video player. The video player is embedded using the HTML5

If the browser does not support this, an embedded flash player will be provided as a fallback, so you must install the Flash plugin before you can play the video. This screenshot below shows the final output from our video player.

back to menu ↑

Preparation

As usual, we need to prepare some things, especially the video, before we get started with the code. In this tutorial, we’ll use this video from TED Talk by Kelli Anderson on Youtube. To download it, you can use this web tool called KeepVid.com.

For wider browser compatibility, we need two video formats, MP4 and OGV. When you download videos from YouTube with KeepVid.com, you will get MP4 format by default. You can use Miro Video Converter to convert MP4 video to OGV format, it is available for both Windows and OS X machines for FREE.

Furthermore, we also need an image file for a video cover. To make this cover, you can play the video with VLC and then go Video> Snapshot to take a snapshot of the videoRegarding the user interface icon, we are going to use FontAwesome. Finally, we also need jPlayer, jQuery to run the video, as well as a new CSS file to save the video skin styles.

After gathering all of this, put them in the appropriate folders as shown below:

back to menu ↑

HTML structure

Now create a new HTML document and link the jQuery, jPlayer libraries and the CSS file in the section, like so.

As for the HTML format for our video player, it is actually similar to the how to make an audio player from the previous one tutorial

Only this time we have one button to change the video in full screen format and a play button in the middle of the video. Place this code below in the -part.

Kelli Anderson – Disruptive miracle for a change

Activate the video

Activating the video is also similar to our previous audio player. The only difference is that this time we have to link the video poster and the included formats are now m4v and ogv. Put all these scripts directly below the jquery and jplayer links we added earlier.

At this stage, our video player still looks clear as shown in the following screenshot.

back to menu ↑

Add styles

After adding that script, you should now be able to play the video. But the player still doesn’t look representative, so let’s make it more beautiful by adding styles.

Open up the style.css file we created earlier in this post.

We’ll start by adding the @ font-face line and removing the underlines from all 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;} a {text-decoration: none;}

Video width

Then we specify the width of the video container and place it in the center of the browser window as so.

.jp video {margin: 0 auto; position: relative; font-family: Arial, sans-serif;}. jp-video-270p {width: 480px;}

title of the video

We change the color of the title to dark gray, specify the font size and align it to the center.

.jp-title h1 {font-size: 1em; text-align: center; color: # 555;}

Play Button

Then we style the piece buttonWe post this button at the top of the video and around it Play icon, we assign FontAwesome font family to it.

.jp-video-play {font-family: “FontAwesome”; position: absolute; top: 45%; left: 46%;}. jp-video-play a {font-size: 2em; color: rgba (255,255,255,7); display: inline-block; width: 50px; height: 50px; line height: 55px; text-align: center; background color: rgba (0,0,0,8); border-radius: 5px;}

Video user interface

The user interface for our video player looks similar. It has a gradient with the orange color scheme, while the icons to control the video like the Play, Pause and Volume will be in white.

.jp interface {width: 100%; bottom: 0; position: relative; background: # f34927; background: -moz-linear gradient (top, # f34927 0%, # dd3311 100%); background: -webkit- gradient (linear, top left, bottom left, 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 (down, # 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) bet; box-shadow: 0 1px 1px 0 rgba (0.0, 0.0.2) bet;}. 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) bet; box shadow: 0 1px 1px 0 rgba (0,0,0,0.1) bet; background color: # 992E18; overflow: hidden;}. JP volume bar value {background color: #fff; height: 8px; border radius: 20px 20px 20px 20px;}. JP-current-time {color: #FFF; font-size: 12px; line-height: 14px; position: absolute; right: 115px; top: 13px; text-shadow: 1px 1px 0 rgba (0,0,0,0.3);}

At this point our video player starts to look fine as shown in the following screenshot.

web video player

Full screen video

We can switch the video to full screen. For that reason, we also need to add styles to target specifically when the video is in full screen, including adjusting the width and height of the Play button, the width of the progress bar and video should be on top of others by making the z-index larger.

.jp-video-full {/ * Rules for IE6 (full screen) * / width: 480px; height: 270px; / * Rules for IE7 (full screen) – Otherwise, the relative container will cause other page items not in the correct position: static (default) to appear over the video / gui. * / position: static! important; position: relative;} / * The z-index rule is defined this way to enable Popcorn plug-ins that add overlays to the video area. EG. Subtitles. * /. jp-video-full div div {z-index: 1000;}. jp-video-full .jp-jplayer {top: 0; left: 0; position: fixed! important; position: relative; / * Rules for IE6 (full screen) * / overflow: hidden;}. Jp video-full .jp interface {position: absolutely! Important; position: relative; / * Rules for IE6 (full screen) * / bottom: 0; left: 0;}. Jp-video-full .jp-gui {position: fixed! Important; position: static; / * Rules for IE6 (full screen) * / above: 0; left: 0; width: 100%; height: 100%; z index: 1001; / * 1 layer above the other.

.jp-video-full .jp-video-play a {font-size: 3em; height: 80px; width: 80px; line-height: 95px;}. jp-video-full .jp-progress {width: 83%;}

And this is what our video player looks like in full screen.

full screen

Add shadow

This is optional only, but I would like to add shading to make the video player look more beautiful and prominent.

.jp-video-270p .jp-type-single {-webkit-box-shadow: 0px 0px 5px 0px rgba (0, 0, 0, 0.5); – moz-box-shadow: 0px 0px 5px 0px rgba (0, 0, 0, 0.5); box-shadow: 0px 0px 5px 0px rgba (0, 0, 0, 0.5);}

And that’s all the codes we need, now you can see the video and download the file source from the following links.

  • View demo
  • Download source
back to menu ↑

How to Design a Video Player based on Web: benefits

  • The How to Design a Video Player based on Web tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Design a Video Player based on Web guide is free.

back to menu ↑

Faq

Tutorial summary of How to Design a Video Player based on Web

In this guide, we told you about the How to Design a Video Player based on Web; please read all steps so that you understand How to Design a Video Player based on Web in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Design a Video Player based on Web, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Design a Video Player based on Web tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Design a Video Player based on Web. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Design a Video Player based on Web, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Design a Video Player based on Web”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Design a Video Player based on Web, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart