0byt3m1n1-V2

Path: /var/www/i2i.live/ultimate-video-player/start/ [ Home ]
File: API-example.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Ultimate Video Player</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=1 user-scalable=no" />
		
		<link rel="stylesheet" type="text/css"  href="content/global.css"/>
		<script type="text/javascript" src="java/FWDUVPlayer.js"></script>
		
		<!-- Setup video player-->
		<script type="text/javascript">
			FWDUVPUtils.onReady(function(){

				new FWDUVPlayer({		
					//main settings
					instanceName:"player1",
					parentId:"myDiv",
					playlistsId:"playlists",
					mainFolderPath:"content",
					skinPath:"minimal_skin_dark",
					displayType:"responsive",
					initializeOnlyWhenVisible:"no",
					useVectorIcons:"no",
					fillEntireVideoScreen:"no",
					playsinline:"yes",
					privateVideoPassword:"428c841430ea18a70f7b06525d4b748a",
					useHEXColorsForSkin:"no",
					normalHEXButtonsColor:"#FF0000",
					selectedHEXButtonsColor:"#000000",
					googleAnalyticsTrackingCode:"",
					useResumeOnPlay:"no",
					useDeepLinking:"yes",
					showPreloader:"yes",
					preloaderBackgroundColor:"#000000",
					preloaderFillColor:"#FFFFFF",
					addKeyboardSupport:"yes",
					autoScale:"yes",
					showButtonsToolTip:"yes", 
					stopVideoWhenPlayComplete:"no",
					playAfterVideoStop:"no",
					autoPlay:"no",
					loop:"no",
					shuffle:"no",
					maxWidth:980,
					maxHeight:552,
					buttonsToolTipHideDelay:1.5,
					volume:.8,
					backgroundColor:"#000000",
					videoBackgroundColor:"#000000",
					posterBackgroundColor:"#000000",
					buttonsToolTipFontColor:"#5a5a5a",
					//logo settings
					showLogo:"yes",
					hideLogoWithController:"yes",
					logoPosition:"topRight",
					logoLink:"http://www.webdesign-flash.ro/",
					logoMargins:5,
					//playlists/categories settings
					showPlaylistsSearchInput:"yes",
					usePlaylistsSelectBox:"yes",
					showPlaylistsButtonAndPlaylists:"yes",
					showPlaylistsByDefault:"no",
					thumbnailSelectedType:"opacity",
					startAtPlaylist:0,
					buttonsMargins:0,
					thumbnailMaxWidth:350, 
					thumbnailMaxHeight:350,
					horizontalSpaceBetweenThumbnails:40,
					verticalSpaceBetweenThumbnails:40,
					//playlist settings
					showPlaylistButtonAndPlaylist:"yes",
					playlistPosition:"right",
					showPlaylistByDefault:"yes",
					showPlaylistName:"yes",
					showSearchInput:"yes",
					showLoopButton:"yes",
					showShuffleButton:"yes",
					showNextAndPrevButtons:"yes",
					showThumbnail:"yes",
					forceDisableDownloadButtonForFolder:"yes",
					addMouseWheelSupport:"yes", 
					startAtRandomVideo:"no",
					stopAfterLastVideoHasPlayed:"no",
					randomizePlaylist:'no',
					folderVideoLabel:"VIDEO ",
					playlistRightWidth:310,
					playlistBottomHeight:599,
					startAtVideo:0,
					maxPlaylistItems:50,
					thumbnailWidth:70,
					thumbnailHeight:70,
					spaceBetweenControllerAndPlaylist:2,
					spaceBetweenThumbnails:2,
					scrollbarOffestWidth:8,
					scollbarSpeedSensitivity:.5,
					playlistBackgroundColor:"#000000",
					playlistNameColor:"#FFFFFF",
					thumbnailNormalBackgroundColor:"#1b1b1b",
					thumbnailHoverBackgroundColor:"#313131",
					thumbnailDisabledBackgroundColor:"#272727",
					searchInputBackgroundColor:"#000000",
					searchInputColor:"#999999",
					youtubeAndFolderVideoTitleColor:"#FFFFFF",
					folderAudioSecondTitleColor:"#999999",
					youtubeOwnerColor:"#888888",
					youtubeDescriptionColor:"#888888",
					mainSelectorBackgroundSelectedColor:"#FFFFFF",
					mainSelectorTextNormalColor:"#FFFFFF",
					mainSelectorTextSelectedColor:"#000000",
					mainButtonBackgroundNormalColor:"#212021",
					mainButtonBackgroundSelectedColor:"#FFFFFF",
					mainButtonTextNormalColor:"#FFFFFF",
					mainButtonTextSelectedColor:"#000000",
					//controller settings
					showController:"yes",
					showControllerWhenVideoIsStopped:"yes",
					showNextAndPrevButtonsInController:"no",
					showRewindButton:"yes",
					showPlaybackRateButton:"yes",
					showVolumeButton:"yes",
					showTime:"yes",
					showQualityButton:"yes",
					showInfoButton:"yes",
					showSubtitleButton:"yes",
					showDownloadButton:"yes",
					showShareButton:"yes",
					showEmbedButton:"yes",
					showFullScreenButton:"yes",
					disableVideoScrubber:"no",
					showScrubberWhenControllerIsHidden:"yes",
					showMainScrubberToolTipLabel:"yes",
					showDefaultControllerForVimeo:"no",
					repeatBackground:"yes",
					controllerHeight:37,
					controllerHideDelay:3,
					startSpaceBetweenButtons:7,
					spaceBetweenButtons:8,
					scrubbersOffsetWidth:2,
					mainScrubberOffestTop:14,
					timeOffsetLeftWidth:5,
					timeOffsetRightWidth:3,
					timeOffsetTop:0,
					volumeScrubberHeight:80,
					volumeScrubberOfsetHeight:12,
					timeColor:"#888888",
					youtubeQualityButtonNormalColor:"#888888",
					youtubeQualityButtonSelectedColor:"#FFFFFF",
					scrubbersToolTipLabelBackgroundColor:"#FFFFFF",
					scrubbersToolTipLabelFontColor:"#5a5a5a",
					//advertisement on pause window
					aopwTitle:"Advertisement",
					aopwWidth:400,
					aopwHeight:240,
					aopwBorderSize:6,
					aopwTitleColor:"#FFFFFF",
					//subtitle
					subtitlePath:"subtitle.txt",
					showSubtitileByDefault:"no",
					//subtitle
					subtitlesOffLabel:"Subtitle off",
					//popup add windows
					showPopupAdsCloseButton:"yes",
					//embed window and info window
					embedAndInfoWindowCloseButtonMargins:0,
					borderColor:"#333333",
					mainLabelsColor:"#FFFFFF",
					secondaryLabelsColor:"#a1a1a1",
					shareAndEmbedTextColor:"#5a5a5a",
					inputBackgroundColor:"#000000",
					inputColor:"#FFFFFF",
					//loggin
					isLoggedIn:"yes",
					playVideoOnlyWhenLoggedIn:"yes",
					loggedInMessage:"Please login to view this video.",
					//audio visualizer
					audioVisualizerLinesColor:"#0099FF",
					audioVisualizerCircleColor:"#FFFFFF",
					//lightbox settings
					lightBoxBackgroundOpacity:.6,
					lightBoxBackgroundColor:"#000000",
					//sticky on scroll
					stickyOnScroll:"no",
					stickyOnScrollShowOpener:"yes",
					stickyOnScrollWidth:"700",
					stickyOnScrollHeight:"394",
					//sticky display settings
					showOpener:"yes",
					showOpenerPlayPauseButton:"yes",
					verticalPosition:"bottom",
					horizontalPosition:"center",
					showPlayerByDefault:"yes",
					animatePlayer:"yes",
					openerAlignment:"right",
					mainBackgroundImagePath:"content/minimal_skin_dark/main-background.png",
					openerEqulizerOffsetTop:-1,
					openerEqulizerOffsetLeft:3,
					offsetX:0,
					offsetY:0,
					//playback rate / speed
					defaultPlaybackRate:1, //0.25, 0.5, 1, 1.25, 1.2, 2
					//cuepoints
					executeCuepointsOnlyOnce:"no",
					//annotations
					showAnnotationsPositionTool:"no",
					//ads
					openNewPageAtTheEndOfTheAds:"no",
					playAdsOnlyOnce:"no",
					adsButtonsPosition:"left",
					skipToVideoText:"You can skip to video in: ",
					skipToVideoButtonText:"Skip Ad",
					adsTextNormalColor:"#888888",
					adsTextSelectedColor:"#FFFFFF",
					adsBorderNormalColor:"#666666",
					adsBorderSelectedColor:"#FFFFFF",
					//a to b loop
					useAToB:"yes",
					atbTimeBackgroundColor:"transparent",
					atbTimeTextColorNormal:"#888888",
					atbTimeTextColorSelected:"#FFFFFF",
					atbButtonTextNormalColor:"#888888",
					atbButtonTextSelectedColor:"#FFFFFF",
					atbButtonBackgroundNormalColor:"#FFFFFF",
					atbButtonBackgroundSelectedColor:"#000000",
					//thumbnails preview
					thumbnailsPreviewWidth:196,
					thumbnailsPreviewHeight:110,
					thumbnailsPreviewBackgroundColor:"#000000",
					thumbnailsPreviewBorderColor:"#666",
					thumbnailsPreviewLabelBackgroundColor:"#666",
					thumbnailsPreviewLabelFontColor:"#FFF",
					// context menu
					showContextmenu:'yes',
					showScriptDeveloper:"no",
					contextMenuBackgroundColor:"#1f1f1f",
					contextMenuBorderColor:"#1f1f1f",
					contextMenuSpacerColor:"#333",
					contextMenuItemNormalColor:"#888888",
					contextMenuItemSelectedColor:"#FFFFFF",
					contextMenuItemDisabledColor:"#333"
				});
				
				registerAPI();
			});
			
			//Register API (an setInterval is required because the player is not available until the youtube API is loaded).
			var registerAPIInterval;
			function registerAPI(){
				clearInterval(registerAPIInterval);
				if(window.player1){
					player1.addListener(FWDUVPlayer.READY, readyHandler);
					player1.addListener(FWDUVPlayer.ERROR, errorHandler);
					player1.addListener(FWDUVPlayer.PLAY, playHandler);
					player1.addListener(FWDUVPlayer.PAUSE, pauseHandler);
					player1.addListener(FWDUVPlayer.STOP, stopHandler);
					player1.addListener(FWDUVPlayer.UPDATE, updateHandler);
					player1.addListener(FWDUVPlayer.UPDATE_TIME, updateTimeHandler);
					player1.addListener(FWDUVPlayer.UPDATE_VIDEO_SOURCE, updateVideoSourceHandler);
					player1.addListener(FWDUVPlayer.UPDATE_POSTER_SOURCE, updatePosterSourceHandler);
					player1.addListener(FWDUVPlayer.START_TO_LOAD_PLAYLIST, startToLoadPlaylistHandler);
					player1.addListener(FWDUVPlayer.LOAD_PLAYLIST_COMPLETE, loadPlaylistCompleteHandler);
					player1.addListener(FWDUVPlayer.PLAY_COMPLETE, playCompleteHandler);
				}else{
					registerAPIInterval = setInterval(registerAPI, 100);
				}
			};

			//API event listeners examples
			function readyHandler(e){
				//console.log("API -- ready to use");
			}
			
			function errorHandler(e){
				console.log(e.error);
			}

			function playHandler(e){
				//console.log("API -- play");
			}

			function pauseHandler(e){
				//console.log("API -- pause");
			}

			function stopHandler(e){
				//console.log("API -- stop");
			}
			
			function updateHandler(e){
				//console.log("API -- update video, percent played: " + e.percent);
			}
			
			function updateTimeHandler(e){
				//console.log("API -- update time: " + e.currentTime + "/" + e.totalTime);
			}

			function updateVideoSourceHandler(e){
				//console.log("API -- video source update: " + player1.getVideoSource());
			}

			function updatePosterSourceHandler(e){
				//console.log("API -- video source update: " + player1.getPosterSource());
			}
			
			function startToLoadPlaylistHandler(e){
				//console.log("API -- start to load playlist: " + player1.getCurCatId());
			}
			
			function loadPlaylistCompleteHandler(e){
				//console.log("API -- playlist load complete: " + player1.getCurCatId());
			}
			
			function playCompleteHandler(e){
				//console.log("API -- play complete");
			}
			

			//API methods examples
			function play(){
				player1.play();
			}

			function playNext(){
				player1.playNext();
			}

			function playPrev(){
				player1.playPrev();
			}

			function playShuffle(){
				player1.playShuffle();
			}
			
			function playVideo(videoId){
				player1.playVideo(videoId);
			}
			
			function pause(){
				player1.pause();
			}

			function stop(){
				player1.stop();
			}

			function scrub(percent){
				player1.scrub(percent);
			}

			function setVolume(percent){
				player1.setVolume(percent);
			}
			
			function share(){
				player1.share();
			}
			
			function download(){
				player1.downloadVideo();
			}

			function goFullScreen(){
				player1.goFullScreen();
			}
			
			function showCategories(){
				player1.showCategories();
			}
			
			

			function loadPlaylist(playlistId){
				player1.loadPlaylist(playlistId);
			}

		</script>
		
	</head>

	<body style="background-color:#999999; padding:0px; margin:0px;">	
	
		<div id="myDiv"></div>
		
		<div style="max-width:960px;">
			<button type="button" onclick="play()">play</button>
			<button type="button" onclick="playNext()">play next</button>
			<button type="button" onclick="playPrev()">play prev</button>
			<button type="button" onclick="playShuffle()">play shuffle</button>
			<button type="button" onclick="playVideo(1)">play video 1</button>
			<button type="button" onclick="pause()">pause</button>
			<button type="button" onclick="stop()">stop</button>
			<button type="button" onclick="scrub(.5)">scrub to half</button>
			<button type="button" onclick="setVolume(.5)">set volume to half</button>
			<button type="button" onclick="share()">open share window</button>
			<button type="button" onclick="download()">download video</button>
			<button type="button" onclick="showCategories()">show categories</button>
			<button type="button" onclick="goFullScreen()">go full screen</button>
			<button type="button" onclick="loadPlaylist(0)">load HTML playlist</button>
			<button type="button" onclick="loadPlaylist(1)">load Youtube playlist</button>
			<button type="button" onclick="loadPlaylist(2)">load mixed (youtube and mp4) playlist</button>
			<button type="button" onclick="loadPlaylist(3)">load XML playlist</button>
			<button type="button" onclick="loadPlaylist(4)">load Vimeo playlist</button>
			<button type="button" onclick="loadPlaylist(5)">load from folder playlist</button>
		</div>
	
		<!--  Playlists -->
		<ul id="playlists" style="display:none;">
			<li data-source="playlist1" data-playlist-name="MY HTML PLAYLIST 1" data-thumbnail-path="content/thumbnails/large1.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My HTML playlist 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>HTML</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using html elements, videos are loaded and played from the server.</p>
			</li>
			
			<li data-source="list=PLxKHVMqMZqUQFbRO0VWaHMaWuQagIgpJe"  data-playlist-name="MY YOUTUBE PLAYLIST 1" data-thumbnail-path="content/thumbnails/large2.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My Youtube playlist 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>YOUTUBE</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created by loading a Youtube playlist, videos are loaded and played from Youtube.</p>
			</li>
			
			<li data-source="mixedPlaylist" data-playlist-name="MY MIXED PLAYLIST 1" data-thumbnail-path="content/thumbnails/large3.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My mixed playlist 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>MIXED</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using HTML elements, videos are loaded and played from the server or Youtube.</p>
			</li>
			
			<li data-source="http://www.webdesign-flash.ro/p/uvp/content/playlist_dark.xml" data-playlist-name="MY XML PLAYLIST 1" data-thumbnail-path="content/thumbnails/large4.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My XML playlist 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>XML</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using a XML file, videos are loaded and played from the server or Youtube.</p>
			</li>
			
			<li data-source="vimeoPlaylist" data-playlist-name="VIMEO PLAYLIST" data-thumbnail-path="content/thumbnails/large19.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>MY VIMEO PLAYLIST 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>VIMEO</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using HTML elements, videos are loaded and played from Vimeo.</p>
			</li>
			
			<li data-source="folder=videos" data-playlist-name="MY FOLDER PLAYLIST 1" data-thumbnail-path="content/thumbnails/large5.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My folder playlist 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>FOLDER</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using a folder with mp4 files, videos are loaded and played from the server.</p>
			</li>
		
			<li data-source="playlist1" data-playlist-name="MY HTML PLAYLIST 2" data-thumbnail-path="content/thumbnails/large6.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My HTML playlist 2</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>HTML</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using html elements, videos are loaded and played from the server.</p>
			</li>
			
			<li data-source="https://vimeo.com/manage/albums/5913812" data-user-id="44212356" data-playlist-name="MY VIMEO ALBUM" data-thumbnail-path="content/thumbnails/large5.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My vimeo album 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>VIMEO ALBUM</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using a Vimeo album URI.</p>
			</li>
			
		</ul>
		
		<!--  HTML playlist -->
		<ul id="playlist1" style="display:none;">
				
				<li data-thumb-source="content/thumbnails/small-fwd.jpg" data-video-source="[{source:'content/videos2/fwd-480p.mp4', label:'small version'}, {source:'content/videos2/fwd-720p.mp4', label:'hd720'},{source:'content/videos2/fwd-1080p.mp4', label:'hd1080'}]" data-start-at-video="2" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-subtitle-soruce="[{source:'content/english_subtitle.txt', label:'English'}, {source:'content/romanian_subtitle.txt', label:'Romanian'},{source:'content/spanish_subtitle.txt', label:'Spanish'}]"  data-start-at-subtitle="2" data-downloadable="yes">	<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">VIDEO TITLE</p>
							<p class="minimalDarkThumbnailDesc">Each video can contain a short description, the description can be formatted with CSS as you like.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">VIDEO TITLE</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>
				
				<li data-thumb-source="content/thumbnails/small-grid.jpg" data-video-source="content/videos/grid.mp4,content/videos/grid-mobile.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-downloadable="yes">
				<ul data-ads="">
						<li data-source="content/videos/ad.mp4" data-time-start="00:00:20" data-time-to-hold-ads=4 data-thumbnail-source="content/images/thumbnail.jpg" data-link="http://www.webdesign-flash.ro" data-target="_blank"></li>
						<li data-source="https://www.youtube.com/watch?v=Bv09DRd4lsM" data-time-start="00:00:32" data-time-to-hold-ads=4 data-thumbnail-source="content/images/thumbnail.jpg" data-link="http://www.webdesign-flash.ro" data-target="_blank"></li>
						<li data-source="content/images/ad.jpg" data-time-start="00:00:48" data-time-to-hold-ads=4 data-add-duration="00:00:20" data-thumbnail-source="" data-link="http://www.webdesign-flash.ro/p/evp/content/images/ad.jpg" data-target="_blank"></li>
					</ul>
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">HORIZONTAL GRIDFOLIO PRO</p>
							<p class="minimalDarkThumbnailDesc">Fully responsive media grid plugin with HTML content support.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">HORIZONTAL GRIDFOLIO PRO</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/horizontal-gridfolio-pro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>
				
				<li data-thumb-source="content/thumbnails/small-rap.jpg" data-video-source="[{source:'content/videos2/fwd-480p.mp4', label:'small version'}, {source:'content/videos2/fwd-720p.mp4', label:'hd720'},{source:'content/videos2/fwd-1080p.mp4', label:'hd1080'}]" data-start-at-video="2" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-downloadable="yes">
				<div data-video-short-description="">
					<div>
						<p class="classicDarkThumbnailTitle">ROYAL AUDIO PLAYER</p>
						<p class="minimalDarkThumbnailDesc">HTML5 mp3 player for your website that runs on all major browsers and mobile devices.</p>
					</div>
				</div>
				<div data-video-long-description="">
					<div>
						<p class="minimalDarkVideoTitleDesc">ROYAL AUDIO PLAYER</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/rap/" target="_blank">this link</a></p>
					</div>
				</div>
				<ul data-annotations="">
						<li data-start-time="00:00:01" data-end-time="00:00:29" data-left="8" data-top="96" data-show-close-button="yes" data-normal-state-class="UVPAnnotationNormal">
							<div> Annotations like this can be added with ease!</div>
						</li>
						
						<li data-start-time="00:00:02" data-end-time="00:00:29" data-left="10" data-top="135" data-show-close-button="yes" data-click-source="http://www.webdesign-flash.ro" data-click-source-target="_blank" data-normal-state-class="UVPAnnotationLinkNormal" data-selected-state-class="UVPAnnotationLinkSelected">
							<div><span style="font-weight:bold; text-decoration: underline;">LINK</span> support, href and target can be specified, also animation between annotation states is possible as you can see here on hover.</div>
						</li>
						
						<li data-start-time="00:00:03" data-end-time="00:00:29" data-left="10" data-top="222" data-show-close-button="yes" data-click-source="alert('This is a javascript function called using the annotations feature of Ultimate Video Player!');" data-click-source-target="_blank" data-normal-state-class="UVPAnnotationJavascriptNormal" data-selected-state-class="UVPAnnotationJavascriptSelected">
							<div><span <span style="font-weight:bold; text-decoration: underline;">JAVASCRIPT</span> support, a javascript function can be called on click.</div>
						</li>
						
						<li data-start-time="00:00:04" data-end-time="00:00:29" data-left="670" data-top="280" data-normal-state-class="UVPAnnotationCSSNormal">
							<div>
							<p><span style="color:#0099FF; font-familly:myFont; font-weight:bold;">FULL CSS SUPPORT</span></p>
							<p><span style="color:#FFFFFF; font-familly:myFont; font-weight:bold;">OPTIONAL CLOSE BUTTON</span></div></p>
							<p><span style="color:#0099FF; font-familly:myFont; font-weight:bold;">FULL HTML SUPPORT</span></div></p>
							<p>The <span style="color:#0099FF; font-familly:myFont; font-weight:bold; text-decoration: underline;">start</span> / <span style="color:#0099FF; font-familly:myFont; font-weight:bold; text-decoration: underline;">show</span> time and <span style="color:#FFFFFF; font-familly:myFont; font-weight:bold; text-decoration: underline;">end</span> / <span style="color:#FFFFFF; font-familly:myFont; font-weight:bold; text-decoration: underline;">stop</span> time for each annotation can be specified with ease.</p>
						</li>
						
						<li data-start-time="00:00:32" data-end-time="00:01:06" data-left="590" data-top="98" data-show-close-button="no" data-normal-state-class="UVPAnnotationAPINormal">
							<div>ANNOTATIONS CAN BE USED TO CALL API METHODS!</div>
						</li>
						
						<li data-start-time="00:00:33" data-end-time="00:01:06" data-left="790" data-top="132" data-show-close-button="no" data-click-source="player1.play();" data-normal-state-class="UVPAnnotationPlayNormal" data-selected-state-class="UVPAnnotationPlaySelected">
							<div>play</div>
						</li>
						
						<li data-start-time="00:00:34" data-end-time="00:01:06" data-left="790" data-top="177" data-show-close-button="no" data-click-source="player1.pause();" data-normal-state-class="UVPAnnotationPlayNormal" data-selected-state-class="UVPAnnotationPlaySelected">
							<div>pause</div>
						</li>
						
						<li data-start-time="00:00:35" data-end-time="00:01:06" data-left="790" data-top="222" data-show-close-button="no" data-click-source="player1.scrub(0.6);" data-normal-state-class="UVPAnnotationPlayNormal" data-selected-state-class="UVPAnnotationPlaySelected">
							<div>scrub to 60%</div>
						</li>
						
						<li data-start-time="00:00:36" data-end-time="00:01:06" data-left="790" data-top="266" data-show-close-button="no" data-click-source="player1.setVolume(0.5);" data-normal-state-class="UVPAnnotationPlayNormal" data-selected-state-class="UVPAnnotationPlaySelected">
							<div>set volume to 50%</div>
						</li>
						
						<li data-start-time="00:00:37" data-end-time="00:01:06" data-left="790" data-top="310" data-show-close-button="no" data-click-source="player1.goFullScreen();" data-normal-state-class="UVPAnnotationPlayNormal" data-selected-state-class="UVPAnnotationPlaySelected">
							<div>go full screen</div>
						</li>
						
					</ul>
			</li>

				
			<li data-thumb-source="content/thumbnails/small-r3dcov.jpg" data-video-source="content/videos/grid.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-downloadable="yes">
				<div data-video-short-description="">
					<div>
						<p class="classicDarkThumbnailTitle">ROYAL 3D COVERFLOW</p>
						<p class="minimalDarkThumbnailDesc">Fully responsive 3D Coverflow that allows to display media or HTML content with an unique layout.</p>
					</div>
				</div>
				<div data-video-long-description="">
					<div>
						<p class="minimalDarkVideoTitleDesc">ROYAL 3D COVERFLOW</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/royal-3d-coverflow/" target="_blank">this link</a></p>
					</div>
				</div>
				<div data-add-popup="">
				<p data-image-path="content/images/img.jpg" data-time-start="00:00:01" data-time-end="00:00:10" data-link="http://www.webdesign-flash.ro" data-target="_blank"></p>
					<p data-image-path="content/images/img2.jpg" data-time-start="00:00:11" data-time-end="00:00:20" data-link="http://www.google.com" data-target="_blank"></p>
					<p data-google-ad-client="ca-pub-9227170916808685" data-google-ad-slot="7711195609" data-google-ad-width=400 data-google-ad-height=100 data-time-start="00:00:21" data-time-end="00:00:30"></p>
					<p data-google-ad-client="ca-pub-9227170916808685" data-google-ad-slot="7711195609" data-google-ad-width=400 data-google-ad-height=300 data-time-start="00:00:31" data-time-end="00:00:40"></p>
				</div>
			</li>
			
			<li data-thumb-source="content/thumbnails/small-r3dcar.jpg" data-video-source="[{source:'content/videos2/fwd-480p.mp4', label:'small version'}, {source:'content/videos2/fwd-720p.mp4', label:'hd720'},{source:'content/videos2/fwd-1080p.mp4', label:'hd1080'}]" data-downloadable="yes">	
				<div data-video-short-description="">
					<div>
						<p class="classicDarkThumbnailTitle">VIDEO TITLE</p>
						<p class="minimalDarkThumbnailDesc">Each video can contain a short description, the description can be formatted with CSS as you like.</p>
					</div>
				</div>
				<div data-video-long-description="">
					<div>
						<p class="minimalDarkVideoTitleDesc">VIDEO TITLE</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
					</div>
				</div>
				<ul data-cuepoints="">
					<li data-time-start="00:00:10" data-javascript-call="alert('cuepoint called at time: 00:00:10');"></li>
					<li data-time-start="00:00:20" data-javascript-call="alert('cuepoint called at time: 00:00:20');"></li>
				</ul>
			</li>
			
			<li data-thumb-source="content/thumbnails/small-msp.jpg" data-video-source="content/videos2/fwd-1080p.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-is-private="yes" data-private-video-password="428c841430ea18a70f7b06525d4b748a">
				<div data-video-short-description="">
					<div>
						<p class="minimalDarkThumbnailTitle">PRIVATE VIDEO EXAMPLE</p>
						<p class="minimalDarkThumbnailDesc">Support for private videos.</p>
					</div>	
				</div>
				<div data-video-long-description="">
					<div>
						<p class="minimalDarkVideoTitleDesc">MP3 STICKY PLAYER</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/msp/" target="_blank">this link</a></p>
					</div>
				</div>
			</li>
			
			<li data-thumb-source="content/thumbnails/small-rap.jpg" data-video-source="content/videos2/fwd-1080p.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-start-at-time="00:00:10" data-stop-at-time="00:00:40">
				<div data-video-short-description="">
					<div>
						<p class="minimalDarkThumbnailTitle">START / STOP AT TIME EXAMPLE</p>
						<p class="minimalDarkThumbnailDesc">UVP can be set to start or / and stop at a specified time.</p>
					</div>	
				</div>
				<div data-video-long-description="">
					<div>
						<p class="minimalDarkVideoTitleDesc">MP3 STICKY PLAYER</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/msp/" target="_blank">this link</a></p>
					</div>
				</div>
			</li>
			
			<li data-thumb-source="content/thumbnails/small-rap.jpg" data-video-source="content/videos2/fwd-1080p.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-advertisement-on-pause-source="http://www.webdesign-flash.ro/iframe.html">
				<div data-video-short-description="">
					<div>
						<p class="minimalDarkThumbnailTitle">ADVERTISEMENT WINDOW ON PAUSE EXAMPLE</p>
						<p class="minimalDarkThumbnailDesc">The source can be any webpage.</p>
					</div>	
				</div>
				
			</li>
			
			<li data-thumb-source="content/thumbnails/small-s3dcov.jpg" data-video-source="content/videos2/fwd-1080p.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-downloadable="no" data-vast-url="content/vast-pod.xml" data-vast-clicktrough-target="_blank" data-vast-linear-astart-at-time="00:00:00">
				<div data-video-short-description="">
					<div>
						<p class="classicDarkThumbnailTitle">VAST XML EXAMPLE</p>
						<p class="minimalDarkThumbnailDesc">Support for VAST <span style='color:#FFFFFF'> "Video Ad Serving Template"</span> pre-roll, mid-roll, post roll with unique functionality.</p>
					</div>	
				</div>
				<div data-video-long-description="">
					<div>
						<p class="classicDarkThumbnailTitle">VAST XML EXAMPLE</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/s3dcov/" target="_blank">this link</a></p>
					</div>
				</div>
			</li>
				
		</ul>
			
		<!--  HTML mixed playlist -->
		<ul id="mixedPlaylist" style="display:none;">
				<li data-thumb-source="content/thumbnails/small-fwd.jpg" data-video-source="[{source:'content/videos2/fwd-480p.mp4', label:'small version'}, {source:'content/videos2/fwd-720p.mp4', label:'hd720'},{source:'content/videos2/fwd-1080p.mp4', label:'hd1080'}]" data-start-at-video="2" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-subtitle-soruce="[{source:'content/english_subtitle.txt', label:'English'}, {source:'content/romanian_subtitle.txt', label:'Romanian'},{source:'content/spanish_subtitle.txt', label:'Spanish'}]"  data-start-at-subtitle="2" data-downloadable="no">
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">VIDEO TITLE</p>
							<p class="minimalDarkThumbnailDesc">Each video can contain a short description, the description can be formatted with CSS as you like.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">VIDEO TITLE</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>
				
				<li data-thumb-source="content/thumbnails/small-lora.jpg" data-video-source="https://www.youtube.com/watch?v=oIHyVibVwVA" data-poster-source="content/posters/youtube-poster.jpg,content/posters/youtube-poster-mobile.jpg" data-downloadable="no">
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">LORA PUISOR</p>
							<p class="minimalDarkThumbnailDesc">Each video can contain a short description, the description can be formatted with CSS as you like.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">LORA - PUISOR</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>
				
				<li data-thumb-source="content/thumbnails/v1.jpg" data-video-source="https://vimeo.com/channels/top/62092214" data-poster-source="content/posters/vimeo-poster.jpg,content/posters/vimeo-poster-mobile.jpg">
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">BITING ELBOWS</p>
							<p class="minimalDarkThumbnailDesc">Support 'Hardcore' - the spiritual sequel to Bad Motherfucker on Indiegogo.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">BITING ELBOWS</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>
			</ul>
				
		<!--  HTML vimeo playlist -->
		<ul id="vimeoPlaylist" style="display:none;">
				<li data-thumb-source="content/thumbnails/v1.jpg" data-video-source="https://vimeo.com/channels/top/62092214" data-poster-source="content/posters/vimeo-poster.jpg,content/posters/vimeo-poster-mobile.jpg">
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">BITING ELBOWS</p>
							<p class="minimalDarkThumbnailDesc">Support 'Hardcore' - the spiritual sequel to Bad Motherfucker on Indiegogo.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">BITING ELBOWS</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>
				
				<li data-thumb-source="content/thumbnails/v2.jpg" data-video-source="https://vimeo.com/channels/top/22439234" data-poster-source="content/posters/vimeo-poster.jpg,content/posters/vimeo-poster-mobile.jpg">
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">THE MOUNTAIN</p>
							<p class="minimalDarkThumbnailDesc">This was filmed between 4th and 11th April 2011. I had the pleasure of visiting El Teide.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">THE MOUNTAIN</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>
			</ul>
		
	</body>
</html>