Videos have become a key part of websites and online businesses. This is mainly due to the fact that people in general are getting faster (and in most cases cheaper) internet data plans on mobile devices. Another factor that comes into play is the higher engagement with video content. People are more likely to watch and remember a well-made interesting video than they are to read a lot of text.
-
15 Best HTML5 Video Players
-
15 Best HTML5 Audio Players
-
15 Best WordPress Audio Player and Video Player Plugins
-
Best Video Background Plugins for WordPress
If you are serious about getting more people to talk and know about your business, it's high time that you get serious about video. In this tutorial, we will help you get started right away with a step-by-step guide to using the Easy Video Player script from CodeCanyon. You can use this JavaScript library to add videos to your webpages.
Why Use Easy Video Player?
You might be wondering why you should use Easy Video Player instead of a free alternative or any other paid script.
One of the biggest reasons to choose this player is that it is feature packed. First of all, it is responsive. This means that it will look nice of devices of all sizes. It has been optimized for playing videos on both mobile devices as well as desktops.
It has support for multiple video qualities so that users can switch between SD, HD or Full HD versions of a video similar to YouTube. You can also control the playback speed of the video at runtime. It is also possible to add subtitles for multiple languages to a single video. Users can then choose the subtitles they want to display at runtime.
You can also allow the viewers to download the video with an optional download button. It is possible to show the button either globally or on individual videos.
Easy Video Player can also play videos from a variety of sources. You can use it to play local videos, stream videos from a server or to embed YouTube or Vimeo videos.
You can monetize these videos using pre-roll, mid-roll or post-roll ads. It is also possible to add popup ads to the videos and control their show and hide time. Easy Video Player also allows you to show advertisements whenever users pause the video.
It is also possible to encrypt the video paths in order to make sure that users can't steal a video by simply crawling the page source. You can also password protect the videos in order to limit access to specific set of users.
The list of features does not end here. My suggestion would be that you visit the script description page in order to read about all the features of Easy Video Player.
What We'll Be Building
Once you have completed this tutorial, you will have a fully functional video player that supports annotations. The final version of the video player will look like the image below.
We will be using a video of a robin from Pixabay for this tutorial.
Getting Started
After reading that the Easy Video Player comes with so many features, you might think that it would be hard to configure or use. However, as you will see in the tutorial, getting up and running with the script is not complicated at all.
One thing that I should point out before we get started is that any local videos on your server that you play using the Easy Video Player should be located inside a folder titled content. This way you can be sure that all the features of the player will work as expected.
After you purchase the Easy Video Player from CodeCanyon, you will be able to download the script as well as the documentation. The documentation contains a lot of working examples that can be added directly to your website by simply changing the source path or URL for the videos. The fastest and easiest way for you to quickly embed videos in your webpage using this player is to use parts from the working examples themselves. Just make appropriate changes to suit your own needs.
The first step would be to include the CSS and JavaScript files in your webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Easy Video Player - TutsPlus Example </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="content/global.css">
<script type="text/javascript" src="java/FWDEVPlayer.js"></script>
</head>
<body>
<!-- WE WILL ADD OUR VIDEO PLAYER HERE -->
</body>
</html>
By default, the player keeps CSS file in the content folder and JavaScript file in the java folder. If you change the location of these files, make sure that you update their path in the webpage as well.
Now, you have to specify a container for the video player. This container div will have a unique id which is passed to the constructor of Easy Video Player. You can set the CSS property margin to auto for this div in order to center it horizontally on the webpage but that is optional.
Add the following HTML inside the body of the webpage where you want the video player to appear.
<div id="topVideo"></div>
While it is not necessary, you can add some CSS in order to make the video player look even nicer or to position it properly on the webpage. Here is the CSS that we would use for this purpose.
body {
background-color: #efefef;
cursor: auto;
}
#topVideo {
box-shadow: 0 0 20px #989898, 0 0 50px #b0b0b0;
margin: 50px auto;
}
Initializing the Video Player
Now, you simply need to initialize the Easy Video Player by passing a bunch of parameters to the constructor. These parameters control all aspects of the video player so you should read the documentation to understand how each of them works. In this tutorial, I will give you a brief overview of the options that we will modify in our own player.
This is the code that you have to put in your webpage for initializing the player. It might look very long and complicated but the parameters have self-explanatory names and they will have the same value from one player instance to another. Most of the times, you will be able to directly take the initialization parameters from the examples in documentation and make changes as needed.
<script type="text/javascript">
FWDEVPUtils.onReady(function(){
FWDEVPlayer.videoStartBehaviour = "pause";
new FWDEVPlayer({
//main settings
instanceName:"player1",
parentId:"topVideo",
mainFolderPath:"content",
initializeOnlyWhenVisible:"no",
skinPath:"minimal_skin_white",
displayType:"responsive",
fillEntireVideoScreen:"no",
playsinline:"yes",
autoScale:"yes",
openDownloadLinkOnMobile:"no",
useVectorIcons:"no",
useResumeOnPlay:"no",
goFullScreenOnButtonPlay:"no",
useHEXColorsForSkin:"no",
normalHEXButtonsColor:"#FF0000",
selectedHEXButtonsColor:"#FFFFFF",
privateVideoPassword:"428c841430ea18a70f7b06525d4b748a",
startAtTime:"",
stopAtTime:"",
startAtVideoSource:2,
videoSource:[
{source:"content/videos/robin_sd.mp4", label:"small version"},
{source:"content/videos/robin_hd.mp4", label:"hd720"},
{source:"content/videos/robin_full_hd.mp4", label:"hd1080"}
],
posterPath:"content/posters/robin-poster.png",
showErrorInfo:"yes",
fillEntireScreenWithPoster:"yes",
disableDoubleClickFullscreen:"no",
addKeyboardSupport:"yes",
useChromeless:"no",
showPreloader:"yes",
preloaderColors:["#999999", "#FFFFFF"],
autoPlay:"no",
enableAutoplayOnMobile:"no",
loop:"no",
scrubAtTimeAtFirstPlay:"00:00:00",
maxWidth:980,
maxHeight:552,
volume:.8,
//logo settings
showLogo:"yes",
hideLogoWithController:"yes",
logoPosition:"topRight",
logoLink:"https://code.tutsplus.com/",
logoMargins:5,
//controller settings
showController:"yes",
showDefaultControllerForVimeo:"no",
showScrubberWhenControllerIsHidden:"yes",
showControllerWhenVideoIsStopped:"yes",
showVolumeScrubber:"yes",
showVolumeButton:"yes",
showTime:"yes",
showRewindButton:"yes",
showQualityButton:"yes",
showSubtitleButton:"yes",
showShareButton:"yes",
showDownloadButton:"yes",
showMainScrubberToolTipLabel:"yes",
showChromecastButton:"no",
showFullScreenButton:"yes",
repeatBackground:"yes",
controllerHeight:41,
controllerHideDelay:3,
startSpaceBetweenButtons:7,
spaceBetweenButtons:9,
mainScrubberOffestTop:14,
scrubbersOffsetWidth:4,
timeOffsetLeftWidth:5,
timeOffsetRightWidth:3,
volumeScrubberWidth:80,
volumeScrubberOffsetRightWidth:0,
timeColor:"#777777",
youtubeQualityButtonNormalColor:"#777777",
youtubeQualityButtonSelectedColor:"#FFFFFF",
scrubbersToolTipLabelBackgroundColor:"#FFFFFF",
scrubbersToolTipLabelFontColor:"#5a5a5a",
//redirect at video end
redirectURL:"",
redirectTarget:"_blank",
//playback rate / speed
showPlaybackRateButton:"yes",
defaultPlaybackRate:"1", //0.25, 0.5, 1, 1.25, 1.5, 2
//embed window
embedWindowCloseButtonMargins:0,
borderColor:"#333333",
mainLabelsColor:"#FFFFFF",
secondaryLabelsColor:"#a1a1a1",
shareAndEmbedTextColor:"#5a5a5a",
inputBackgroundColor:"#000000",
inputColor:"#FFFFFF",
//thumbnails preview
thumbnailsPreview:"",
thumbnailsPreviewWidth:196,
thumbnailsPreviewHeight:110,
thumbnailsPreviewBackgroundColor:"#000000",
thumbnailsPreviewBorderColor:"#666",
thumbnailsPreviewLabelBackgroundColor:"#666",
thumbnailsPreviewLabelFontColor:"#FFF",
// context menu
showContextmenu:'yes',
showScriptDeveloper:"yes",
contextMenuBackgroundColor:"#1f1f1f",
contextMenuBorderColor:"#1f1f1f",
contextMenuSpacerColor:"#333",
contextMenuItemNormalColor:"#888888",
contextMenuItemSelectedColor:"#FFFFFF",
contextMenuItemDisabledColor:"#444"
});
});
</script>
Two parameters that have to be unique every time are instanceName and parentId. The parentId parameter is the id of the container for your video. The value of instanceName parameter is used to identify the player when calling methods like play().
The videoSource parameter is used to specify the path to different versions of the same video so that users can play it in SD, HD or Full HD format. The posterPath parameter specifies the path of image file that shows up before the video starts playing.
A lot of other parameters are used to control the spacing, color or background of different UI elements used in the player. If you load the webpage in a browser now, you should see something similar to the image below.
Adding Annotations to Your Video
There are many situations where you will want to give the viewers some additional information while they are watching a video. Annotations are very helpful in that situation. Luckily, Easy Video Player provides a convenient way of adding annotations to your videos
You just need to use a little HTML with special data attributes. In our case, we will use annotations to tell readers a fact about robins and then link to Wikipedia if they want to read more about the bird. Here is the markup that you have to add to the webpage. It might be better to add it right below the video player container.
<ul id="vidAnnotations" style="display:none">
<li data-start-time="00:00:01" data-end-time="00:00:05" data-left="600" data-top="100" data-normal-state-class="EVPAnnotationNormal">
<p>The robin was declared Britain’s National Bird on December 15th, 1960.</p>
</li>
<li data-start-time="00:00:15" data-end-time="00:00:20" data-left="40" data-top="400" data-show-close-button="yes" data-click-source="https://en.wikipedia.org/wiki/European_robin" data-click-source-target="_blank" data-normal-state-class="EVPAnnotationLinkNormal">
<p>You can learn more about this bird on the Wikipedia page about <strong>European Robins</strong>.</p>
</li>
</ul>
Setting display to none for the annotations will hide them from appearing the webpage. The attributes specified with each annotation will determine when and where they appear in the video. The distance of the annotations from the left and top side can be specified using the data-top and data-left attributes. The data-start-time and data-end-time attributes determine when the annotations will show up and disappear. You can also give users the option to close the annotations manually by setting the data-show-close-button attribute to true. You can read about all other attributes in the documentation available with the download.
Keep in mind that the annotations don't start working as soon as you add them to the webpage. Right now, the video player does not know about their existence. So, you have to specify a couple of parameters in its constructor to help it determine where to find the annotations.
annotiationsListId:"vidAnnotations", showAnnotationsPositionTool:"no",
If someone plays the video now, they will see the annotations after the specified time as in the image below.
Final Thoughts
In this tutorial, we have created a feature-rich fully functional responsive video player which supports annotations using the Easy Video Player script from CodeCanyon. This is just one of the ways of using the plugin. The plugin also offers a lot of other features which increase its usefulness. For example, the script allows you to integrate different kinds of ads in your video to help you monetize your content. You can also use it to play videos inside a lightbox.
Once you purchase this script, you will get 6 months of free support and life time free updates. The plugin is well worth its price due to all the features it offers.
-
HTML515 Best HTML5 Video Players
-
HTML515 Best HTML5 Audio Players
-
WordPress15 Best WordPress Audio Player and Video Player Plugins
-
WordPressBest Video Background Plugins for WordPress
by Monty Shokeen via Envato Tuts+ Code
No comments:
Post a Comment