“Easy Video Player ” Documentation by FWDesign


Easy Video Player

Version: 9.2
By:© FWD (FLASH WEB DESIGN)
Email: contact@webdesign-flash.ro

Thank you for purchasing our script. If you have any questions that are beyond the scope of this help file, please feel free to email via our email. Thanks so much!


Table of Contents

  1. Important notes read this before anything else.
  2. Install Easy Video Player into your html page.
  3. Setup video / audio and poster source.
  4. Setup ads (pre-roll, mid-roll, post-roll)/ advertisement video.
  5. Setup VAST, VMAP and IMA / DFP advertising.
  6. Setup cuepoints
  7. Constructor parameters.
  8. Setup subtitles.
  9. Setup pop-up commercial ads and google adsense pop-up ads.
  10. Setup annotations.
  11. Setup private videos.
  12. Encrypt video / subtitle path.
  13. Google Drive, Dropbox, Amazon S3.
  14. Setup advertisement on pause window.
  15. API.
  16. Setup google analytics.
  17. Redirect / open page when the video has finished to play.
  18. Starting / stopping the video at a specified time using timestamps.
  19. Using vector icons icons for the skin.
  20. A to B loop.
  21. Thumbnails preview.
  22. Chromecast.
  23. Sources and Credits

A) Important notes make sure you read this! - top

Please note that the Easy Video Player installation and configuration is not complicated but because it has a lot of customizable settings it might seem complicated, please go through the entire documentation before trying to install it into your own page. Basically what it must be done is to copy some html code from the examples we provided and paste it into your own html page and of course add your own video file.

Easy Video Player only requires the mp4 video format and it will work in all browsers on a desktop machine or on a mobile device, this is extremely important because there is no need to create multiple video formats for browsers that dose not support mp4, also please note that the mp4 video format is recommended and used by all major browsers distributors like Google, Microsoft, Apple, Mozzila etc.!

The server is character case sensitive so make sure that the Easy Video Player settings are identical to those from the provided examples.

When using mp4 video files located on your server with relative paths you must add all folders that contains mp4's videos in the content folder, this is extremely important in order for all features to work correctly.

It is important to understand that the more video instances are used the browser will be more stressed and problems may occur specially on mobile. If you think at all popular video websites like youtube or video they are only using a single video instance and this is done because of performance issues... Try to keep the Easy Video Player instances to a maximum of six instances if possible even less, this will help the browser to perform great. This recommendation applies to all video players available on the web including youtube or vimeo!

When testing local on IE7/IE8 or on an older browser that dose not support HTML5 video it will not work because the flash (.swf) file is trying to communicate with the browser and this is not allowed, of course it will work fine when tested online.

Some of the features will not work local like the share button or playing youtube videos on some browsers like IE and Opera, or like playng vimeo videos, this is normal behavior because most browser does not allow this, once uploaded on the server it will function properly.

If you don't need to use youtube set useYoutube:"no" the same applies if you don't want to use Vimeo set useVimeo:"no", this is important because it will not createa the Vimeo or Youtube instances this will improve overall performance.

When something is wrong with a Easy Video Player actions a info box with the problem description will appear over the Easy Video Player, please note that this box is there to help you understand the problem, for example if a mp4 video file is not found the box will appear and inform you about the problem. The box can be closed when clicked or touched.

The Easy Video Player skin is constructed from .png images, only a few settings for changing colors are possible like changing the time color. If you want a different skin the .png files must be modified. The skin is really flexible this is allowing to skin the Easy Video Player as you like. We have a great designer in our team so if you need a custom skin please contact us!

To use EVP as a video a video background for your website set displayType:"backgroundVideo" .

B) Install Easy Video Player into your html page. - top

EVP has multiple display types (fluid width, responsive, fixed, fullscreen, after prt), each display type is explained in detail below.

Responsive installation

In the download files there is a start folder and in this folder there are html files starting with the label "responsive", each of this examples have exactly the same structure with different constructor settings. You can use one of them to copy and paste the required html code based on skin that you need, I will use the responsive-skin-minimal-dark.html as an example for this tutorial.

The skin is created using javascript and .png images, if you want a custom skin please contact us. If you want to create a skin of your own modify the ones we already provided.

This is how the player is installed in a HTML page, please read the Constructor parameters section to understand the Easy Video Player properties

Lightbox installation. - top

To install the EVP player in lightbox the exact same steps as in the Responsive installation must be followed, the only difference is that the displyType property must be set to lightbox as follows : displyType:"lightbox". Inside the start folder there is a HTML file as reference called LIGHTBOX-example.html.

Sticky installation. - top

To install the EVP player in a sticky display type the exact same steps as in the Responsive installation must be followed, the only difference is that the displyType property must be set to sticky as follows : displyType:"sticky". Inside the start folder there is a HTML file as reference called STICKY-example.html.

Fullscreen and popup installation. - top

To install the EVP player in fullscreen the exact same steps as in the Responsive installation must be followed, the only difference is that the displyType property must be set to fullscreen as follows : displyType:"fullscreen". Inside the start folder there are html files examples for each skins, this examples are starting with the label "fullscreen".

To popup the EVP there is a POPUP-example.html example includded in the start file. Please check out the source to see how this is accomplished.

Atter prt installation

This display type is resizing EVP width and height to fill the available prt div width and height, this is really useful if you have a responsive div and you want EVP to resize based on it's size. To use this display type follow the same installation steps from Responsive installation section, the only difference is the displayType property which must be set to afterParent like this displayType:afterParent. In the start folder there is a html file called AFTER-PARENT.html, you can use it as reference.

C) Setup video / audio and poster source. - top

Evp can play mp4 videos from your server, a different server youtube or vimeo. If you are using relative source paths for your videos make sure that all of them are situated inside the content folder, this is really important in order for the player to function correctly,

To play a video from your server set the videoSource property to point to the mp4 video path, relative or absolute paths can be used, also evp can be set to play, multiple video sources. This is ilustrated below.

		//multiple sources
		videoSource:[
			{source:"content/videos/fwd-480p.mp4", label:"small version"},
			{source:"content/videos/fwd-720p.mp4", label:"hd720"},
			{source:"content/videos/fwd-1080p.mp4", label:"hd1080"}
		],
		
		//single source
		videoSource:[
			{source:"content/videos/fwd-1080p.mp4", label:"hd1080"}
		],
		

To add add a second source to be played if the first source fails to load just add a source2 parameter in the video object, example below. All EVP formats are supported using the fail source2, video tutorial here.

		//multiple sources
		videoSource:[
			{source:"content/videos/fwd-480p.mp4", source2:"content/videos/fwd-480p-2.mp4", label:"small version"},
			{source:"content/videos/fwd-720p.mp4", source2:"content/videos/fwd-720p-2.mp4", label:"hd720"},
			{source:"content/videos/fwd-1080p.mp4", source2:"content/videos/fwd-1080p-2.mp4", label:"hd1080"}
		],
		
		//single source
		videoSource:[
			{source:"content/videos/fwd-1080p.mp4", source2:"content/videos/fwd-1080p-2.mp4", label:"hd1080"}
		],
		


To add a poster for the video set posterPath to point to the poster image (jpg, jpeg, png), please note that an optional source for mobile devices can be added seprated by ",". Example below:

		posterPath:"content/posters/mp4-poster.jpg, content/posters/mp4-poster-mobile.jpg",
		

To play a HLS / m3u8 video file set the videoSource property to point to HLS / m3u8 video URL also there is an option called isLive, if you have a live stream set it to yes otherwise set it to no, this is illustrated below.

		videoSource:[
			{source:"http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8", label:"", isLive:"no"}
		],
		

To play a video from youtube set the videoSource property to point to youtube video URL, this is illustrated below.

		videoSource:[
			{source:"https://www.youtube.com/watch?v=5wAHG-tPgc0"}
		],
		

To play a video from vimeo set the videoSource property to point to vimeo video URL, this is illustrated below.

		videoSource:[
			{source:"https://vimeo.com/187418097"}
		],
		

To play a mp3 file set the videoSource property to point to the mp3 file relative or absolute path, this is illustrated below.

		videoSource:[
			{source:"content/audio/1.mp3"}
		],
		

To play a 360 degree / VR video set the videoSource property to point to video video URL and there is an extra parameter named videoType that has to be set to 360DegreeVideo, to enable VR you have to set the show360DegreeVideoVrButton:"yes" in the player constructor, this, pelase check the code below:.

		videoSource:[
			{source:"content/videos/360.mp4", label:"", videoType:"360DegreeVideo"}
		],
		

There are also two extra parameters that allows to adjust the start rotation of the video in degrees and to start the VR session when the play button is clicked, please check the code below, for more info please watch this video tutorial

		videoSource:[
			{source:"content/videos/360.mp4", label:"", videoType:"360DegreeVideo", startWhenPlayButtonClick360DegreeVideo:false, rotationY360DegreeVideo:-90}
		],
		

To play a green screen video set the videoSource property to point to video video URL and there is an extra parameter named videoType that has to be set to greenScreenVideo, this will enable this feature for the current video as illustrated below. In the start file there is a HTML file called GREENSCREEN-example.html, you can use it as reference. Please note that this feature will only work when tested online on a http protocol it will not work local, locally only the audio is playing, also the mp4 video has to be from the same domain with the domain on which the video player is running.

		videoSource:[
			{source:"content/videos/zombie.mp4", label:"", videoType:"greenscreenvideo"}
		],
		

To play a mp3 or mp4 file from google drive set the videoSource property to point to the mp3 / mp4 google frive video source, this is explained in the tutorial below.

		videoSource:[
			{source:"content/audio/1.mp3"}
		],
		

Method 1:

Go to Disc – My drive.

Right click on get shareable link the like on screenshot: get video id 1 get video id 2 and use that video ID to create google drive video URL.

This is final URL how google drive video URL should look:https://drive.google.com/uc?export=download&id=videoID

Replace videoID with the id taken from the previous step and use it as the video source:https://drive.google.com/uc?export=download&id=0B4Au_agYmWFZQWdHdHN3OVJLX0E


Method 2 for larger google drive video files:

Go to Disc – My drive.

Right click on get shareable link the like on screenshot: get video id 1 get video id 2

Copy that URL of the video directly into browser then search for the video src, please see get video src.

Right click on video -> inspect element -> find div with class ‘drive-viewer-video-player’ -> open up iframe -> document -> html -> body -> player -> html5-video-player -> and you will see a <video> tags with the ‘src’ of the video, you need copy/paste that ‘src’ into the player options.

Use the mp4 or mp3 src as the the video source.


Method 3 if the other methods doesn't work:

Go to https://get.google.com/albumarchive/ and select your video to play. (If you don’t have videos there, you’ll need to create album and upload all videos in the album, on this link: https://photos.google.com/albums

Press F12 to open console in Chrome.

Click on the arrow in top left corner of console (“Select an element in the page to inspect it”)

Click on the video.

Copy src from <video> tag and paste it in Elite video player as “mp4 video”.

Video tag: <video tabindex=”-1” class=”video-stream html5-main-video” controlslist=”nodownload” style=”width: 1280px; height: 720px; left: 0px; top: 0px;” src=”https://lh3.googleusercontent.com/VyGA_8xX2002wE21RBA3BW1gGSaDRRqzR2QxfCGT5FlSddS65U0w6OzYo1Rb7tfBnL0NTvvDFBJEndgjUdbU1f7jhXiveCzWCWyE03sxbN0RHp5GDEg8UtTT7QwXysd7-ebZfi1IsAFBPRUm55TqjdvPFsciSbi4Re9e2NpJMAq-H7G8GR_6mrIDKxqAYy7WTaRHQ9WYYKurFdsnvvNZn2ajR-NS35oHlNxRxugfxZBoNHjkShacmuZ-CtiLarvAyLudEq_VbTTIsDdJqPUZ2fFbxN1MUlUYtUqoTEinvTYxJRS69uKTzCmlXyaDheJKKLknRmknTbDo8ZB77FBUXKdF5bJlgjh4dP4KmyW0pD3AdUhyua6hf8rlbC83MOPsBMjgcjk6nVoVZzEQ-gdEN16SfBy92QkJOROnyUsKWYdD5hOjGA_JcBsl7pStABjS8L0SVQ-PQOarDWI3XjLF0Ni2WjNw51zEtP_lZxxkzRO19pqmd9U0ABv18Qbdalllva0dYLoLkWBL2feNR6FMpDb9AKaBUMXnz6BVqh_Gag2uHNU_67t-oc34uPTewwaXdJD_KKGe1WuZKompFceHW03Uhni8SsIzGv10eC9TJIBgjJFycx1mzKL4R0ByoIJd5YsM0S6O2qUeT96LK_DYtInsTzJC-LwEBSQ_sY0HJ8CkEkAlzOE6kg=m15?cpn=akto9TqdnblFYysA&c=WEB_EMBEDDED_PLAYER&cver=20190905;></video>

Your mp4 url is: https://lh3.googleusercontent.com/VyGA_8xX2002wE21RBA3BW1gGSaDRRqzR2QxfCGT5FlSddS65U0w6OzYo1Rb7tfBnL0NTvvDFBJEndgjUdbU1f7jhXiveCzWCWyE03sxbN0RHp5GDEg8UtTT7QwXysd7-ebZfi1IsAFBPRUm55TqjdvPFsciSbi4Re9e2NpJMAq-H7G8GR_6mrIDKxqAYy7WTaRHQ9WYYKurFdsnvvNZn2ajR-NS35oHlNxRxugfxZBoNHjkShacmuZ-CtiLarvAyLudEq_VbTTIsDdJqPUZ2fFbxN1MUlUYtUqoTEinvTYxJRS69uKTzCmlXyaDheJKKLknRmknTbDo8ZB77FBUXKdF5bJlgjh4dP4KmyW0pD3AdUhyua6hf8rlbC83MOPsBMjgcjk6nVoVZzEQ-gdEN16SfBy92QkJOROnyUsKWYdD5hOjGA_JcBsl7pStABjS8L0SVQ-PQOarDWI3XjLF0Ni2WjNw51zEtP_lZxxkzRO19pqmd9U0ABv18Qbdalllva0dYLoLkWBL2feNR6FMpDb9AKaBUMXnz6BVqh_Gag2uHNU_67t-oc34uPTewwaXdJD_KKGe1WuZKompFceHW03Uhni8SsIzGv10eC9TJIBgjJFycx1mzKL4R0ByoIJd5YsM0S6O2qUeT96LK_DYtInsTzJC-LwEBSQ_sY0HJ8CkEkAlzOE6kg=m15?cpn=akto9TqdnblFYysA&c=WEB_EMBEDDED_PLAYER&cver=20190905

To play a mp3 or mp4 file from openload follow the below steps: Video tutorial

Click play button and start playing video.

Open Chrome console with F12.

Click on ‘inspect element’ icon in top left corner of Chrome console, and after that click on the playing video.

Copy / paste ‘src’, if it dosen't have https://openload.co/ at the beginning make sure to ad it and add at the end of it ?.mp4 if it is a video or ?.mp3 if it is an audio use it as the source for the player. Ex: https://openload.co/stream/3jl0yBGimuU~1552812702~2a02:2f08::~-TRTr5vA?mime=true?.mp4


D) Setup ads (pre-roll, mid-roll, post-roll)/ advertisement video. - top

First of all to add ads to a video the adsSource parameter has to be set an array of ads like showed below. Inside it there are the ads, you can add as many as you like by stacking them one after each other. Each object contains the ads data as follows :

source - the ad source, it can be a mp4 video path, an image path, webpage URL or a youtube video url.
timeStart - the ad start time when it will appear in hours:minutes:seconds format.
timeToHoldAds - the ad time until the skip button will appear in seconds format. If you don't need the skip button set this to 0.
thumbnailSource - optional tumbnail source that will appear as a small preview in the skip button.
link - the link to open when the ad is clicked.
target - the link target (_blank or _self).
addDuration - this is optional if the ad is an image or a webpage(iframe) and it represents the time to hold the image or webpage(iframe) ad in in hours:minutes:seconds format.

		adsSource:[
				{source:"https://www.cinemagia.ro/filme-2017/", timeStart:"00:00:20", addDuration:"00:00:60", timeToHoldAds:4, thumbnailSource:"content/images/thumbnail.jpg",  target:"_blank"},
				{source:"content/videos/ad.mp4", timeStart:"00:00:20", timeToHoldAds:4, thumbnailSource:"content/images/thumbnail.jpg", link:"http://www.webdesign-flash.ro", target:"_blank"},
				{source:"https://www.youtube.com/watch?v=Bv09DRd4lsM", timeStart:"00:00:40", timeToHoldAds:4, thumbnailSource:"content/images/thumbnail.jpg", link:"http://www.google.ro", target:"_blank"},
				{source:"content/images/ad.jpg", timeStart:"00:00:55", addDuration:"00:00:20", timeToHoldAds:4, thumbnailSource:"content/images/thumbnail.jpg", link:"http://www.webdesign-flash.ro/p/evp/content/images/ad.jpg", target:"_blank"}
		]
		


E) Setup VAST, VMAP and IMA / DFP advertising. - top

Please open in a text editor the VAST-example.html as reference. EVP currently support inline linear (pre-roll, mid-roll, post-roll, pods) and nonlinear ads. To add an VAST, VMAP or Google IMA file to the player to be played set the vastSource in the EVP constructor to point to the file path, this is showed in detail in the VAST-example.html. Please note that if this type of advertising is used the default advertisement will be ignored. Please note this includes adsense as well, below is a test URL example for adsense that can be used for testing.

	http://googleads.g.doubleclick.net/pagead/ads?ad_type=video&client=ca-video-pub-4968145218643279&videoad_start_delay=0&description_url=http%3A%2F%2Fwww.google.com&max_ad_duration=40000&adtest=on
		


F) Setup couepoints. - top

To add quepoints to a video the cuepoints parameter has to be set to an array of quepoints like showed below. Inside it there are the cuepoints, you can add as many as you like by stacking them one after eachother. Each object contains the quepoints data as follows :

timeStart: - the time in format "hours:minutes:seconds" at which the cuepoint will execute the javascript code, for example to execute the quepoint code at second 10 into the video playe set this option to 00:00:10.
javascriptCall: - a function name for example myFunction() or a javascript snipet code like alert('cuepoint at time 00:00:10'), this will be executed at quepoint time start.

		cuepoints:[
			{timeStart:"00:00:10", javascriptCall:"alert('cuepoint at time 00:00:10')"},
			{timeStart:"00:00:30", javascriptCall:"alert('cuepoint at time 00:00:30')"}
		]
		


G) Constructor parameters. - top

Please open any of the .html files provided with a text editor as reference.

These parameters represents the possible setting for the Easy Video Player they are all visible in the below image and described below.

		

//-- global settings --//

//-- main settings --//

//-- VAST advertisement settings --// //-- logo settings --// //-- controller settings --// //-- playback rate / speed --// //-- loggin --// //-- embed window --// //-- lightbox settings --// //- sticky on scroll settings --/
  • stickyOnScroll:"no" - This can be yes or no. If you want show the player in a sticky form when the page is scrolled and the player is not in the viewport area set this to yes otherwise leave it no.
  • stickyOnScrollShowOpener:"no" - This can be yes or no.
  • stickyOnScrollWidth:700 - The maximum width in px.
  • stickyOnScrollHeight:394 - The maximum height in px.
  • //-- sticky display settings --// //advertisement on pause window //-- subtitle --// //-- ads / advertisement video --// //-- a to b loop --// //--thumbnails preview --// //-- context menu --//


    H) Setup subtitles. - top

    EVP can load a .srt or .txt files as a subtitile file, the txt file have the same structure as the a file, for reference you can open with a text editor the subtitle_english.txt from the content folder, the structure is self explanatory. To change the subtitle style just edit the class EVPSubtitle from the global.css file.

    To add one or more subtitles please see the code sample below, the code is self explanatory.

    Please note that for IOS if the native player is used only .VTT format is working!

    		//subtitles
    		showSubtitleButton:"yes",
    		subtitlesOffLabel:"Subtitle off",
    		startAtSubtitle:1,
    		subtitlesSource:[
    			{subtitlePath:"content/subtitiles/english_subtitle.vtt", subtileLabel:"English"},
    			{subtitlePath:"content/subtitiles/romanian_subtitle.vtt", subtileLabel:"Romanian"},
    			{subtitlePath:"content/subtitiles/spanish_subtitle.vtt", subtileLabel:"Spanish"}
    		],
    		


    I) Setup pop-up image ads and google adsense pop-up ads. - top

    Adding pop-up image ads window or windows can be done with ease, some code has to be added inside the video player constructor, the example below will show better what I mean by that. Below you can see the code that has to be added into the constructor, the parameters are self explanatory, you can add one or as many as you like. Please note that only image format is supported as the popup source (.jpg, .jpeg, .png). Also I've provided a HTML example labeled POPUP-ADS.html.

    		//popup commercial ads
    		showPopupAdsCloseButton:"yes",
    		popupCommercialAdsSource:[
    			{imagePath:"content/images/img.jpg", timeStart:"00:00:01", timeEnd:"00:00:28", link:"http://www.webdesign-flash.ro", target:"_blank"},
    			{imagePath:"content/images/img2.jpg", timeStart:"00:00:31", timeEnd:"00:00:52", link:"http://www.webdesign-flash.ro", target:"_blank"}
    		],
    		

    Adding google adsense popup window or windows can be done with ease but it is a a little different then a pop-up image, some code has to be added inside the video player constructor, the example below will show better what I mean by that. Below you can see the code that has to be added into the constructor, the parameters are self explanatory, you can add one or as many as you like. Please note that your adsense account has to be approved and active with the domain name where you will install the player also be very very careful with the google_ad_client and google_ad_slot, they have to be identical with the values from the add when you add them to the popup ad. If the account is not active or the google_ad_client or google_ad_slot are not correct the add will not appear and there will be no error displayed basically the google adsense server dosen't throw any error it will just fail silently.

    		//popup commercial ads
    		showPopupAdsCloseButton:"yes",
    		popupCommercialAdsSource:[
    			{google_ad_client:"ca-pub-9227170916808685", google_ad_slot:"7711195609", timeStart:"00:00:06", timeEnd:"00:00:12", google_ad_width:800, google_ad_height:150},
    			{google_ad_client:"ca-pub-9227170916808685", google_ad_slot:"7863647968", timeStart:"00:00:13", timeEnd:"00:00:20", google_ad_width:500, google_ad_height:85}
    		],
    		

    There google_ad_client and google_ad_slot must be taken from the google adsense code, please see below code, the google_ad_width and google_ad_height represents the ad width and height, is best to set it to the exact size as the ad itself:

    			
    			
    			
    			
    		

    Also they can be combined, please see below code

    		//popup commercial ads
    		showPopupAdsCloseButton:"yes",
    		popupCommercialAdsSource:[
    			{imagePath:"content/images/img.jpg", timeStart:"00:00:01", timeEnd:"00:00:05", link:"http://www.webdesign-flash.ro", target:"_blank"},
    			{google_ad_client:"ca-pub-9227170916808685",  google_ad_width:800, timeStart:"00:00:06", timeEnd:"00:00:12", google_ad_slot:"7711195609", google_ad_height:150},
    			{google_ad_client:"ca-pub-9227170916808685",  google_ad_slot:"7863647968", timeStart:"00:00:13", timeEnd:"00:00:20", google_ad_width:500, google_ad_height:85},
    			{imagePath:"content/images/img2.jpg", timeStart:"00:00:22", timeEnd:"00:00:52", link:"http://www.webdesign-flash.ro", target:"_blank"}
    		],
    		



    J) Setup annotations. - top

    There is an example includded in the download files called ANNOTATIONS-example.html, you can use it as reference. First of all to add annotations to a video an ul element with the structure presented below has to be added in the page. Inside it there are the annotations, you can add as many as you like by stacking them one after eachother. The li element that holds the annotation data has some attributes that consturct their logic:

    data-start-time - the start time when the annotaton show in hours:minutes:seconds format.
    data-end-time - the end time when the annotaton hide in hours:minutes:seconds format.
    data-left - the left postion in px.
    data-top - the top position in px.
    data-normal-state-class - a css class that represents the annotation normal state.
    data-selected-state-class - a css class that represents the annotation selected state, when the annotation is hovered this class will be applied, please note that this is optional if you don't want a selected state don't add this attribute
    data-show-close-button - this can be yes or no, shows or hides the annotation close button.
    data-click-source - this can contain a page URL or a javascript name ex:data-click-source="myJavascritpFunction();", this attribute is optional if you don't want to open a page or to call a javascript function on click don't add this attribute.
    data-click-source-target - if you want to open a page this is this attribute holds the page target (_blank, _self).

    After the annotation element is created the id of it has to be passed in the constructor annotiationsListId property like this annotiationsListId:annottaionId in this case annotiationsListId:fwdAnnotations.

    		
    		

    To find the correct postion for the annotation in the constructor set showAnnotationsPositionTool:"yes", this will allow to drag the annotation in the position that you like and the top and left postion will be displayed this way you will know the exact postion for the annotation. Please don't forget to click the play button and scrub to see your annotation/annotations, when you see the annotation for which you want to find the postion pause the video and drag the annoation at the postion that you like, then just set data-left and data-top to the desired position. After this process is finished set showAnnotationsPositionTool:"no".


    K) Setup private videos. - top

    To set a video private just set the isPrivate parameter in the video source to "yes", this is showed below.

    		videoSource:[
    			{source:"content/videos/fwd-720p.mp4", label:"hd720", videoType:"normal", isPrivate:"yes"}
    		],
    		

    To set the video password there is a tool I have created that will encrypt the password at this link, enter your desired password in the input field then click on the Encrypt passowrd button, once this is done copy the encrypted password and paste it as a value of the privateVideoPassword parameter from the constructor. Doing this steps will configure EVP to request a password before the video can play. The default password is Melinda and there is example provided in the start folder called PRIVATE-VIDEO-example.html.

    L) Encrypt video / subtitle path. - top

    To encrypt the video / subtitle path I have created a tool that will encrypt the video / subtitle path at this link, enter the video / subtitle path (this applies all video / audio / subtitle paths) in the input field then click on the Encrypt media button, once this is done copy the encrypted video path and paste it as the video source parameter from the constructor. There is example provided in the start folder called ENCRYPTED-VIDEO-PATH-example.html and also below there is a sample code illustrating this. The same rule apply to the video poster.

    			videoSource:[
    				{source:"encrypt:Y29udGVudC92aWRlb3MvZndkLTEwODBwLm1wNA==", label:"hd1080"}
    			],
    			subtitlesSource:[
    				{subtitlePath:"encrypt:Y29udGVudC92aWRlb3MvZndkLTEwODBwLm", subtileLabel:"English"},
    			],
    		

    M) Google Drive, Dropbox, Amazon S3. - top



    Google Drive

    Method 1 - this is the recommend one please use it:

    For this method I've created a video tutorial here so plese watch it.

    https://www.googleapis.com/drive/v3/files/[file_id]?alt=media&key=[api_key]&v=[.mp4][.mp3]

    Example of working .mp4 file https://www.googleapis.com/drive/v3/files/0B4Au_agYmWFZNHNtZTlXUm1UUUE?alt=media&key=AIzaSyBsJ8HRNI4iHUqpszDtx3Ijq3ZKoXLUx-E&v=.mp4 and mp3 file https://www.googleapis.com/drive/v3/files/0B4Au_agYmWFZVG0zc2pzalVCVjg?alt=media&key=AIzaSyBsJ8HRNI4iHUqpszDtx3Ijq3ZKoXLUx-E&v=.mp3 .


    Method 2:

    Go to Disc – My drive.

    Right click on get shareable link the like on screenshot: get video id 1 get video id 2 and use that video ID to create google drive video URL.

    This is final URL how google drive video URL should look:https://drive.google.com/uc?export=download&id=videoID

    Replace videoID with the id taken from the previous step and use it as the video source:https://drive.google.com/uc?export=download&id=0B4Au_agYmWFZQWdHdHN3OVJLX0E


    Method 2 for larger google drive video files:

    Go to Disc – My drive.

    Right click on get shareable link the like on screenshot: get video id 1 get video id 2

    Copy that URL of the video directly into browser then search for the video src, please see get video src.

    Right click on video -> inspect element -> find div with class ‘drive-viewer-video-player’ -> open up iframe -> document -> html -> body -> player -> html5-video-player -> and you will see a <video> tags with the ‘src’ of the video, you need copy/paste that ‘src’ into the player options.

    Use the mp4 or mp3 src as the the video source.


    Method 3:

    Go to Disc – My drive.

    Right click on get shareable link the like on screenshot: get video id 1 get video id 2 and use that video ID to create google drive video URL.

    This is how the final URL should look: http://api.getlinkdrive.com/getlink?url=https://drive.google.com/file/d/GOOGLE_DRIVE_VIDEO_ID/view where GOOGLE_DRIVE_VIDEO_ID represents the video id taken for the shareable link

    Once open the link will answer with a JSON, use the JSON value of the url paramaeter as the video source.

    Dropbox

    Copy the drop box video link, then replace www.dropbox.com with dl.dropboxusercontent.com.

    Thus the URL: https://www.dropbox.com/s/abcd/file.mp4?dl=0 will become: https://dl.dropboxusercontent.com/s/acbd/file.mp4?dl=0 .


    For openload please watch this video tutorial.


    N) Setup advertisement on pause window. - top

    EVP can open a advertisement window when the video is paused that will appear over the video and this window can load a webpage, the page content can be anything, to enable it just set the aopwSource value to the page link / url that you want to open in it for example aopwSource:"http://www.webdesigh-flash.ro/iframe.html".

    O) API. - top

    Inside the donwload files there is HTML file called API-example.html, in this file I have added all events and methods for reference, open the page source to see them. Full reference below. Please note that the properties are read only and they can only be written in the consturctor for more info about this please read the Constructor parameters section.

    API - public methods:

    Function Method Description

    getVideoSource

    getVideoSource():String Return the video source path if the video is from the server or youtube id if the video is playing from youtube.

    getPosterSource

    getPosterSource():String Return the poster source.

    getCurrentTime

    getCurrentTime(format:String):String Return the current time source. The format parameter can be text(hh:mm:ss), seconds or milliseconds.

    getTotalTime

    getTotalTime(format:String):String Return the video total time / duration.The format parameter can be text(hh:mm:ss), seconds or milliseconds.

    goFullScreen

    goFullScreen():void Set video player to fullscreen.

    play

    play():void Start / play playback.

    pause

    pause():void Pause the playback.

    setVideoSource

    setVideoSource(videoSource:String):void Set the video source path or youtube video id. Please read the Setup video and poster source.

    setPosterSource

    setPosterSource(posterSource:String):void Set the poster source path. Please read the Setup video and poster source.

    share

    share():void Share current track on facebook.

    setVolume

    setVolume( Number ):void Set the video volume, this method accepts a parameter that represents a number between 0 (video mute state) and 1 (video maximum volume).

    scrub

    scrub( Number ):void Notify instance to scrub (set the video position), this method accepts a parameter that represents a number between 0 (video start position) and 1 (video end position).

    scrubbAtTime

    scrubbAtTime(time:String):void Notify instance to scrub at a specified time, the time argument has to be in hours:minutes:seconds format ex:00:01:20.

    stopVideo

    stopVideo():void Stops the playback and the loading process if the loading process has started.

    API - event listeners:

    Event Prefix Description

    error

    FWDEVPlayer.ERROR

    Dispatched when the Easy Video Player instance can't load or play the video file, this event has a property of type string that represents the error message.

    goFullScreen

    FWDEVPlayer.GO_FULLSCREEN

    Dispatched when the Easy Video Player is set to fullscreen.

    goNormalScreen

    FWDEVPlayer.GO_NORMALSCREEN

    Dispatched when the Easy Video Player is set to normalscreen.

    ready

    FWDEVPlayer.READY

    Dispatched when the Easy Video Player instance API is actually available.

    stop

    FWDEVPlayer.STOP

    Dispatched when the Easy Video Player instance is stopped.

    play

    FWDEVPlayer.PLAY

    Dispatched when the Easy Video Player instance playback start to play.

    pause

    FWDEVPlayer.PAUSE

    Dispatched when the Easy Video Player instance playback is paused.

    update

    FWDEVPlayer.UPDATE

    Dispatched when the Easy Video Player instance is playing and it's position is changing (useful to update a custom scrub bar), this event has a property of type number between 0 (video start position) and 1 (video end position).

    updateTime

    FWDEVPlayer.UPDATE_TIME

    Dispatched when the Easy Video Player instance current duration is changing. This event has two properties of type string curTime and totalTime.

    playComplete

    FWDEVPlayer.PLAY_COMPLETE

    Dispatched when the Easy Video Player instance playback has reached the end of the video file.

    playbackRateChange

    FWDEVPlayer.PLAYBACK_RATE_CHANGE

    Dispatched when the Easy Video Player playback rate is changed. This event has a property of type string called rate that returns the current playback rate.

    safeToScrub

    FWDEVPlayer.SAFE_TO_SCRUB

    Dispatched when the Easy Video Player instance is safe to scrub.

    P) Setup google analytics - top

    I've decided a video tutorial will be better to explain this feature so please watch this video tutorial

    Q) Redirect / open page when the video has finished to play - top

    EVP allows to open a new page or to replace the current page with a new one by setting the redirectURL to point to the page that you want to open. Please see below example.

    			//redirect at video end
    			redirectURL:"http://www.webdesign-flash.ro",
    			redirectTarget:"_blank",
    		

    If you don't want this feature leave redirectURL blank or remove it entirely

    R) Starting / stopping the video at a specified time using timestamps - top

    It is possible to start and / or stop a video at a specified time adding a timestamp as part of the player URL, the format should be t=hours[h]minutes[m]seconds[s] the hours, minutes and seconds should be higher the 59, some examples as follows to start a video t=0h2m30s or to stop a video e=0h2m40s, to start and stop use something like t=0h2m30s&e=0h2m35s.

    This string is part of the URL for example http://www.videoplayer-domain.com/#t=0h30m2s&e=0h30m20s.

    S) Using vector icons icons for the skin - top

    To use the vector icons instead of the png icons just set in the player constructor useVectorIcons:"yes", that is all that has to be done. There is an example in the start folder called VECTOR-ICONS-example.html, open it in a text editor for refference.


    T) A to B loop - top

    The a to b loop feature is basically a plugin for EVP this way it will not add to the total file size if it is not used. To enable it set in the constructor useAToB:"yes" this will make sure that the plugin js file will be loaded, the js file can be found in the content->java->FWDEVPATB.js. To activate this feature for a video add this attribute data-use-a-to-b="yes" when adding a video. Example below.

    			
  • ROYAL 3D COVERFLOW

    Fully responsive 3D Coverflow that allows to display media or HTML content with an unique layout.



  • U) Thumbnails preview - top

    The thumbnails preview is basically a plugin for EVP this way it will not add to the total file size if it is not used. To enable it set in the constructor thumbnailsPreview:"your-file.vtt"where your-file.vtt is the file that contains the data to load and display thumbnails. This will make sure that the plugin js file will be loaded, the js file can be found in the content->java->FWDEVPThumbnailsPreview.js so.If you don't want to use this just leave thumbnailsPreview empty like this thumbnailsPreview:"". Using the .vtt file is self explanatory and it is illustrated below, please note that the .vtt file can contain as many images as you need.

    For atutomatic thumbnails preview set thumbnailsPreview:"auto", live auto-generated video thumbnails, now is possible to auto-generate video preview thumbnails directly from video. This feature works with self hosted or external hosted mp4/video, HLS/m3u8, Google drive, Dropbox, Amazon S3 and more.... example here, video tutorial here.

    		WEBVTT  
    
    		00:00:00.000 --> 00:00:10.000
    		content/images/t1.jpg
    
    		00:00:10.000 --> 00:00:20.000
    		content/images/t2.jpg
    
    		00:00:20.000 --> 00:00:30.000
    		content/images/t3.jpg
    		

    V) Chromecast - top

    EVP has support for using chromecast, this will enable to play video or audio on a big TV screen and to control the media using the video player interface from the web page.

    You will need a TV that supports chromecast or a chromecast dongle like this one.

    To enable this feature set in the player constructor showChromecastButton:"yes" if you don't need it just set it to showChromecastButton:"no".

    There are some limitations, this feature will only work on google chrome and has support for mp4 and mp3 media files (HLS, Youtube, Vimeo and advertisement are not supported) also your webpage will have to run on a https protocol.

    If the media content is not mp3 or mp4 and the chromecast is connected, the connection to the TV is stopped and the chroemcast button is removed from the player control bar.

    For all videos, subtitles and posters CORS has to be enabled, you can read about CORS here, to enable CORS is done by adding a .htaccess file in the folder that contains the videos, posters and subtitles, you can find this file in the start/content/subtitles folder. If you are using external files then those files have to be CORS enabled otherwise they will not work. This is a requirement of chromecast so there is no hack around this so this rules has to be followed.


    W) Sources and Credits - top

    This component was made by Tibi from FWD (FWDesign) FLASH WEB DESIGN, for more information and support contact us at tibi_diablo@yahoo.com

    Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions regarding this Easy Video Player and I'll do my best to assist.

    FWDesign

    Go To Table of Contents