Easy Video Player by FWDesign

<!doctype html>   <html class="no-js " lang="en">  <head> <meta charset="utf-8"> <script src="https://public-assets.envato-static.com/assets/market/core/datadog-c9dadca4b1354094f125388491f85039fc6c2017f1bbf824b789caa4c03450a2.js" nonce="o2lKMfhkB/rZy+RNr8uV4Q=="></script> <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ window.DD_RUM && window.DD_RUM.init({ clientToken: 'puba7a42f353afa86efd9e11ee56e5fc8d9', applicationId: '8561f3f6-5252-482b-ba9f-2bbb1b009106', site: 'datadoghq.com', service: 'marketplace', env: 'production', version: 'ae74f4f2fe1abc8e145ae4d1de11a56f712f302a', sampleRate: 0.2, premiumSampleRate: 5, trackInteractions: false, defaultPrivacyLevel: 'mask-user-input', beforeSend: (event, context) => { if (typeof window.datadog_attributes == 'object') event.context = {...event.context, ...window.datadog_attributes} }, }) //]]> </script> <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ var rollbarEnvironment = "production" var codeVersion = "ae74f4f2fe1abc8e145ae4d1de11a56f712f302a" //]]> </script> <script src="https://public-assets.envato-static.com/mp/packs/js/rollbar-304e0de7661e0a12bfed.js" nonce="o2lKMfhkB/rZy+RNr8uV4Q=="></script> <meta content="origin-when-cross-origin" name="referrer" /> <link rel="dns-prefetch" href="//s3.envato.com" /> <link rel="preload" href="https://market-resized.envatousercontent.com/codecanyon.net/files/442213136/Preview-image.jpg?auto=format&q=94&cf_fit=crop&gravity=top&h=8000&w=590&s=c923b78ebd170650044924c66f7a567d30c9e04105e84e189c4893292dcb1e4f" as="image" /> <link rel="preload" href="https://public-assets.envato-static.com/assets/generated_sprites/logos-20f56d7ae7a08da2c6698db678490c591ce302aedb1fcd05d3ad1e1484d3caf9.png" as="image" /> <link rel="preload" href="https://public-assets.envato-static.com/assets/generated_sprites/common-5af54247f3a645893af51456ee4c483f6530608e9c15ca4a8ac5a6e994d9a340.png" as="image" /> <title>Easy Video Player by FWDesign | CodeCanyon</title> <meta name="description" content="Buy Easy Video Player by FWDesign on CodeCanyon. #1 Video player on Envato Market What is Easy Video Player ? Easy Video Player is a powerful responsive video player..."> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="shortcut icon" type="image/x-icon" href="https://public-assets.envato-static.com/assets/icons/favicons/favicon-1147a1221bfa55e7ee6678c2566ccd7580fa564fe2172489284a1c0b1d8d595d.png" /> <link rel="apple-touch-icon-precomposed" type="image/x-icon" href="https://public-assets.envato-static.com/assets/icons/favicons/apple-touch-icon-72x72-precomposed-ea6fb08063069270d41814bdcea6a36fee5fffaba8ec1f0be6ccf3ebbb63dddb.png" sizes="72x72" /> <link rel="apple-touch-icon-precomposed" type="image/x-icon" href="https://public-assets.envato-static.com/assets/icons/favicons/apple-touch-icon-114x114-precomposed-bab982e452fbea0c6821ffac2547e01e4b78e1df209253520c7c4e293849c4d3.png" sizes="114x114" /> <link rel="apple-touch-icon-precomposed" type="image/x-icon" href="https://public-assets.envato-static.com/assets/icons/favicons/apple-touch-icon-120x120-precomposed-8275dc5d1417e913b7bd8ad048dccd1719510f0ca4434f139d675172c1095386.png" sizes="120x120" /> <link rel="apple-touch-icon-precomposed" type="image/x-icon" href="https://public-assets.envato-static.com/assets/icons/favicons/apple-touch-icon-144x144-precomposed-c581101b4f39d1ba1c4a5e45edb6b3418847c5c387b376930c6a9922071c8148.png" sizes="144x144" /> <link rel="apple-touch-icon-precomposed" type="image/x-icon" href="https://public-assets.envato-static.com/assets/icons/favicons/apple-touch-icon-precomposed-c581101b4f39d1ba1c4a5e45edb6b3418847c5c387b376930c6a9922071c8148.png" /> <link rel="stylesheet" media="all" href="https://public-assets.envato-static.com/assets/market/core/index-6c69a94a8baf3f4c3819d01881b93c5df72551f3f91ec87d2f599bb75ba7ca88.css" /> <link rel="stylesheet" media="all" href="https://public-assets.envato-static.com/assets/market/pages/default/index-43c9e199b223db5c5bba332e76ddb21b8a94a6038c1f49a8e7d1d258d5b02293.css" /> <link rel="stylesheet" media="screen" href="https://public-assets.envato-static.com/mp/packs/css/components/brand_neue_tokens-a3eebe3f.css" /> <meta name="theme-color" content="#333333"> <link rel="canonical" href="https://codecanyon.net/item/easy-video-player/7152281" /> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "CodeCanyon", "url": "https://codecanyon.net" } </script> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"Product","category":"Media","url":"https://codecanyon.net/item/easy-video-player/7152281","description":"#1 Video player on Envato Market What is Easy Video Player ? Easy Video Player is a powerful responsive video player that can play local video or audio, streaming videos from a server, mp3 / mp4, HLS / HTTP live streaming,Youtube,Vimeo , VR / 360°,google drive, openload / openload.co and other cloud platforms and much more. It only requires themp4 format (the best and most used format on the web) and it will work on mobile devices and desktop machines no matter which browser is used. Packed with a huge amount of features like responsive layout, multiple instances manager, flexible skin,HTTP Live Streaming /HLS /m3u8 video support, DASH MPEG,360 degree video / virtual reality / VR, share window, embed window,cu","name":"Easy Video Player","image":"https://s3.envato.com/files/442213135/Thumbnail.jpg","brand":{"@type":"Brand","name":"FWDesign"},"sku":7152281,"mpn":"E-7152281","productionDate":"2024-11-09T11:34:27+11:00","releaseDate":"2024-11-09T11:34:27+11:00","offers":{"@type":"Offer","price":"29.00","priceCurrency":"USD","priceValidUntil":"2024-11-26T23:59:59+11:00","itemCondition":"http://schema.org/NewCondition","availability":"http://schema.org/InStock","url":"https://codecanyon.net/item/easy-video-player/7152281"},"aggregateRating":{"@type":"AggregateRating","ratingValue":"4.61","reviewCount":"62"},"review":{"@type":"Review","reviewRating":{"@type":"Rating","ratingValue":"5","bestRating":"5"},"author":{"@type":"Person","name":"tommyinnn"}}} </script> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://codecanyon.net"},{"@type":"ListItem","position":2,"name":"Files","item":"https://codecanyon.net/category/all"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https://codecanyon.net/javascript"},{"@type":"ListItem","position":4,"name":"Media"}]} </script> <script type="application/ld+json"> {"@type":"SoftwareApplication","applicationCategory":"Media","aggregateRating":{"@type":"AggregateRating","itemReviewed":"Easy Video Player","ratingCount":62,"ratingValue":4.5},"@context":"http://schema.org","datePublished":"2024-11-09T11:34:27+11:00","dateCreated":"2014-03-16T23:10:23+11:00","name":"Easy Video Player","description":"#1 Video player on Envato Market What is Easy Video Player ? Easy Video Player is a powerful responsive video player that can play local video or audio, streaming videos from a server, mp3 / mp4, HLS / HTTP live streaming,Youtube,Vimeo , VR / 360°,google drive, openload / openload.co and other cloud platforms and much more. It only requires themp4 format (the best and most used format on the web) and it will work on mobile devices and desktop machines no matter which browser is used. Packed with a huge amount of features like responsive layout, multiple instances manager, flexible skin,HTTP Live Streaming /HLS /m3u8 video support, DASH MPEG,360 degree video / virtual reality / VR, share window, embed window,cu","url":"https://codecanyon.net/item/easy-video-player/7152281","thumbnailUrl":"https://s3.envato.com/files/442213136/Preview-image.jpg","author":{"@type":"Person","name":"FWDesign","url":"https://codecanyon.net/user/fwdesign"}} </script> <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ window.dataLayer = window.dataLayer || []; //]]> </script> <meta name="bingbot" content="nocache"> <meta name="twitter:card" content="product" /> <meta name="twitter:site" content="@envatomarket" /> <meta /> <meta name="twitter:data1" content="$29 USD" /> <meta name="twitter:label1" content="Price" /> <meta name="twitter:data2" content="CodeCanyon" /> <meta name="twitter:label2" content="Marketplace" /> <meta name="twitter:domain" content="codecanyon.net" /> <meta property="og:title" content="Easy Video Player" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://codecanyon.net/item/easy-video-player/7152281" /> <meta property="og:image" content="https://s3.envato.com/files/442213135/Thumbnail.jpg" /> <meta property="og:description" content=" #1 Video player on Envato Market What is Easy Video Player ? Easy Video Player is a powerful responsive video player that can play local video or audio, streaming vide..." /> <meta property="og:site_name" content="CodeCanyon" /> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="t8mk_4U_pk-TGLzBZiryyMwIIFMnOTNKT1XQWVLrybNOiZSWHw6I13vez_p3n-29so6oYL0Zn-6Qm8MqlO7bgA" /> <meta name="turbo-visit-control" content="reload"> <script type="text/plain" nonce="o2lKMfhkB/rZy+RNr8uV4Q==" data-cookieconsent="statistics"> //<![CDATA[ var container_env_param = ""; (function(w,d,s,l,i) { w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''; j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+container_env_param; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-W8KL5Q5'); //]]> </script> <script type="text/plain" nonce="o2lKMfhkB/rZy+RNr8uV4Q==" data-cookieconsent="marketing"> //<![CDATA[ var gtmId = 'GTM-KGCDGPL6'; var container_env_param = ""; // Google Tag Manager Tracking Code (function(w,d,s,l,i) { w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''; j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+container_env_param; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer', gtmId); window.addEventListener('load', function() { window.dataLayer.push({ event: 'pinterestReady' }); }); //]]> </script> <script src="https://public-assets.envato-static.com/assets/market/core/head-27cdb5ede34aef07336dc99fceecaf31a2d50c9615e8116fc60965812916e464.js" nonce="o2lKMfhkB/rZy+RNr8uV4Q=="></script> </head> <body class="color-scheme-light" data-view="app impressionTracker" data-responsive="true" data-user-signed-in="false" > <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ var gtmConfig = {} //]]> </script>  <script src="https://public-assets.envato-static.com/mp/packs/js/gtm_measurements-0a96144c452c1dfda6b2.js" nonce="o2lKMfhkB/rZy+RNr8uV4Q=="></script> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8KL5Q5" height="0" width="0" style="display:none;visibility:hidden" > </iframe> </noscript> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KGCDGPL6" height="0" width="0" style="display:none;visibility:hidden" > </iframe> </noscript> <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ (function() { function normalizeAttributeValue(value) { if (value === undefined || value === null) return undefined var normalizedValue if (Array.isArray(value)) { normalizedValue = normalizedValue || value .map(normalizeAttributeValue) .filter(Boolean) .join(', ') } normalizedValue = normalizedValue || value .toString() .toLowerCase() .trim() .replace(/&/g, '&') .replace(/'/g, "'") .replace(/\s+/g, ' ') if (normalizedValue === '') return undefined return normalizedValue } var pageAttributes = { app_name: normalizeAttributeValue('Marketplace'), app_env: normalizeAttributeValue('production'), app_version: normalizeAttributeValue('ae74f4f2fe1abc8e145ae4d1de11a56f712f302a'), page_type: normalizeAttributeValue('item'), page_location: window.location.href, page_title: document.title, page_referrer: document.referrer, ga_param: normalizeAttributeValue(''), event_attributes: null, user_attributes: { user_id: normalizeAttributeValue(''), market_user_id: normalizeAttributeValue(''), } } dataLayer.push(pageAttributes) dataLayer.push({ event: 'analytics_ready', event_attributes: { event_type: 'user', custom_timestamp: Date.now() } }) })(); //]]> </script> <div class="page"> <div class="page__off-canvas--left overflow"> <div class="off-canvas-left js-off-canvas-left"> <div class="off-canvas-left__top"> <a href="https://codecanyon.net">Envato Market</a> </div> <div class="off-canvas-left__current-site -color-codecanyon"> <span class="off-canvas-left__site-title"> Code </span> <a class="off-canvas-left__current-site-toggle -white-arrow -color-codecanyon" data-view="dropdown" data-dropdown-target=".off-canvas-left__sites" href="#"></a> </div> <div class="off-canvas-left__sites is-hidden" id="off-canvas-sites"> <a class="off-canvas-left__site" href="https://themeforest.net/?auto_signin=true"> <span class="off-canvas-left__site-title"> Web Themes & Templates </span> <i class="e-icon -icon-right-open"></i> </a> <a class="off-canvas-left__site" href="https://videohive.net/?auto_signin=true"> <span class="off-canvas-left__site-title"> Video </span> <i class="e-icon -icon-right-open"></i> </a> <a class="off-canvas-left__site" href="https://audiojungle.net/?auto_signin=true"> <span class="off-canvas-left__site-title"> Audio </span> <i class="e-icon -icon-right-open"></i> </a> <a class="off-canvas-left__site" href="https://graphicriver.net/?auto_signin=true"> <span class="off-canvas-left__site-title"> Graphics </span> <i class="e-icon -icon-right-open"></i> </a> <a class="off-canvas-left__site" href="https://photodune.net/?auto_signin=true"> <span class="off-canvas-left__site-title"> Photos </span> <i class="e-icon -icon-right-open"></i> </a> <a class="off-canvas-left__site" href="https://3docean.net/?auto_signin=true"> <span class="off-canvas-left__site-title"> 3D Files </span> <i class="e-icon -icon-right-open"></i> </a></div> <div class="off-canvas-left__search"> <form id="search" action="/category/all" accept-charset="UTF-8" method="get"> <div class="search-field -border-none"> <div class="search-field__input"> <input id="term" name="term" type="search" placeholder="Search" class="search-field__input-field" /> </div> <button class="search-field__button" type="submit"> <i class="e-icon -icon-search"><span class="e-icon__alt">Search</span></i> </button> </div> </form></div> <ul> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-all-items" href="/category/all"> All Items </a> <ul class="is-hidden" id="off-canvas-all-items"> <li> <a class="off-canvas-category-link--sub" href="/top-sellers">Popular Files</a> </li> <li> <a class="off-canvas-category-link--sub" href="/feature">Featured Files</a> </li> <li> <a class="off-canvas-category-link--sub" href="/search?date=this-month&sort=sales">Top New Files</a> </li> <li> <a class="off-canvas-category-link--sub" href="/follow_feed">Follow Feed</a> </li> <li> <a class="off-canvas-category-link--sub" href="/authors/top">Top Authors</a> </li> <li> <a class="off-canvas-category-link--sub" href="/page/top_new_sellers">Top New Authors</a> </li> <li> <a class="off-canvas-category-link--sub" href="/collections">Public Collections</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category">View All Categories</a> </li> </ul> </li> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-php-scripts" href="/category/php-scripts"> PHP Scripts </a> <ul class="is-hidden" id="off-canvas-php-scripts"> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts">Show all PHP Scripts</a> </li> <li> <a class="off-canvas-category-link--sub" href="/popular_item/by_category?category=php-scripts">Popular Items</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/add-ons">Add-ons</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/calendars">Calendars</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/countdowns">Countdowns</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/database-abstractions">Database Abstractions</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/forms">Forms</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/help-and-support-tools">Help and Support Tools</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/images-and-media">Images and Media</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/loaders-and-uploaders">Loaders and Uploaders</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/navigation">Navigation</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/news-tickers">News Tickers</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/polls">Polls</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/project-management-tools">Project Management Tools</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/ratings-and-charts">Ratings and Charts</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/search">Search</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/shopping-carts">Shopping Carts</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/social-networking">Social Networking</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/php-scripts/miscellaneous">Miscellaneous</a> </li> </ul> </li> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-wordpress" href="/category/wordpress"> WordPress </a> <ul class="is-hidden" id="off-canvas-wordpress"> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress">Show all WordPress</a> </li> <li> <a class="off-canvas-category-link--sub" href="/popular_item/by_category?category=wordpress">Popular Items</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/add-ons">Add-ons</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/advertising">Advertising</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/calendars">Calendars</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/ecommerce">eCommerce</a> </li> <li> <a class="off-canvas-category-link--sub" href="/attributes/compatible-with/elementor">Elementor</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/forms">Forms</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/forums">Forums</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/galleries">Galleries</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/interface-elements">Interface Elements</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/media">Media</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/membership">Membership</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/newsletters">Newsletters</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/seo">SEO</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/social-networking">Social Networking</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/utilities">Utilities</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/widgets">Widgets</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/miscellaneous">Miscellaneous</a> </li> <li> <a class="off-canvas-category-link--sub" href="https://themeforest.net/category/wordpress">WordPress Themes on ThemeForest</a> </li> </ul> </li> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-ecommerce" href="/search/ecommerce"> eCommerce </a> <ul class="is-hidden" id="off-canvas-ecommerce"> <li> <a class="off-canvas-category-link--sub" href="/search/ecommerce">Show all eCommerce</a> </li> <li> <a class="off-canvas-category-link--sub" href="/search?compatible_with=Easy+Digital+Downloads">Easy Digital Downloads</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/ecommerce/jigoshop">Jigoshop</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/magento-extensions">Magento Extensions</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/opencart">OpenCart</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/oscommerce">osCommerce</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/prestashop">Prestashop</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/ubercart">UberCart</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/virtuemart">VirtueMart</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/ecommerce/woocommerce">WooCommerce</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/ecommerce/wp-e-commerce">WP e-Commerce</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/ecommerce/standalone">WP Standalone</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/zen-cart">Zen Cart</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/wordpress/ecommerce/miscellaneous">Miscellaneous</a> </li> </ul> </li> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-javascript" href="/category/javascript"> JavaScript </a> <ul class="is-hidden" id="off-canvas-javascript"> <li> <a class="off-canvas-category-link--sub" href="/category/javascript">Show all JavaScript</a> </li> <li> <a class="off-canvas-category-link--sub" href="/popular_item/by_category?category=javascript">Popular Items</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/animated-svgs">Animated SVGs</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/calendars">Calendars</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/countdowns">Countdowns</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/database-abstractions">Database Abstractions</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/forms">Forms</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/images-and-media">Images and Media</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/loaders-and-uploaders">Loaders and Uploaders</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/media">Media</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/navigation">Navigation</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/news-tickers">News Tickers</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/project-management-tools">Project Management Tools</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/ratings-and-charts">Ratings and Charts</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/shopping-carts">Shopping Carts</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/sliders">Sliders</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/social-networks">Social Networks</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/javascript/miscellaneous">Miscellaneous</a> </li> </ul> </li> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-css" href="/category/css"> CSS </a> <ul class="is-hidden" id="off-canvas-css"> <li> <a class="off-canvas-category-link--sub" href="/category/css">Show all CSS</a> </li> <li> <a class="off-canvas-category-link--sub" href="/popular_item/by_category?category=css">Popular Items</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/css/animations-and-effects">Animations and Effects</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/css/buttons">Buttons</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/css/charts-and-graphs">Charts and Graphs</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/css/forms">Forms</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/css/layouts">Layouts</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/css/navigation-and-menus">Navigation and Menus</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/css/pricing-tables">Pricing Tables</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/css/tabs-and-sliders">Tabs and Sliders</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/css/miscellaneous">Miscellaneous</a> </li> </ul> </li> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-mobile" href="/category/mobile"> Mobile </a> <ul class="is-hidden" id="off-canvas-mobile"> <li> <a class="off-canvas-category-link--sub" href="/category/mobile">Show all Mobile</a> </li> <li> <a class="off-canvas-category-link--sub" href="/popular_item/by_category?category=mobile">Popular Items</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/mobile/android">Android</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/mobile/flutter">Flutter</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/mobile/ios">iOS</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/mobile/native-web">Native Web</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/mobile/titanium">Titanium</a> </li> </ul> </li> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-html5" href="/category/html5"> HTML5 </a> <ul class="is-hidden" id="off-canvas-html5"> <li> <a class="off-canvas-category-link--sub" href="/category/html5">Show all HTML5</a> </li> <li> <a class="off-canvas-category-link--sub" href="/popular_item/by_category?category=html5">Popular Items</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/3d">3D</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/ad-templates">Ad Templates</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/canvas">Canvas</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/charts-and-graphs">Charts and Graphs</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/forms">Forms</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/games">Games</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/libraries">Libraries</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/media">Media</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/presentations">Presentations</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/sliders">Sliders</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/storage">Storage</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/templates">Templates</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/html5/miscellaneous">Miscellaneous</a> </li> </ul> </li> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-ai-tools" href="/search/ai"> AI Tools </a> <ul class="is-hidden" id="off-canvas-ai-tools"> <li> <a class="off-canvas-category-link--sub" href="/search/ai">Show all AI Tools</a> </li> <li> <a class="off-canvas-category-link--sub" href="/search/ai?sort=sales">Popular Items</a> </li> <li> <a class="off-canvas-category-link--sub" href="/search/ai%20content">AI Writers and Content Generators</a> </li> <li> <a class="off-canvas-category-link--sub" href="/search/ai%20image">AI Image and Video Generators</a> </li> <li> <a class="off-canvas-category-link--sub" href="/search/ai%20chat">AI Chatbots</a> </li> </ul> </li> <li> <a class="off-canvas-category-link--empty" href="https://themeforest.net/category/wordpress"> WP Themes </a> </li> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-plugins" href="/category/plugins"> Plugins </a> <ul class="is-hidden" id="off-canvas-plugins"> <li> <a class="off-canvas-category-link--sub" href="/category/plugins">Show all Plugins</a> </li> <li> <a class="off-canvas-category-link--sub" href="/popular_item/by_category?category=plugins">Popular Items</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/concrete5">Concrete5</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/drupal">Drupal</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/expressionengine">ExpressionEngine</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/joomla">Joomla</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/magento-extensions">Magento Extensions</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/muse-widgets">Muse Widgets</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/opencart">OpenCart</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/oscommerce">osCommerce</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/prestashop">Prestashop</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/ubercart">Ubercart</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/virtuemart">VirtueMart</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/zen-cart">Zen Cart</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/plugins/miscellaneous">Miscellaneous</a> </li> </ul> </li> <li> <a class="off-canvas-category-link--empty" href="https://placeit.net/mockup-generator?utm_source=envatomarket&utm_medium=promos&utm_campaign=placeit_mkt-menu-photos&utm_content=mockup_generator"> Mockup Generator </a> </li> <li> <a class="off-canvas-category-link" data-view="dropdown" data-dropdown-target="#off-canvas-more" href="/category"> More </a> <ul class="is-hidden" id="off-canvas-more"> <li> <a class="off-canvas-category-link--sub" href="/category/net">.NET</a> </li> <li> <a class="off-canvas-category-link--sub" href="/category/apps">Apps</a> </li> <li> <a class="off-canvas-category-link--sub" href="/search?term=facebook&type=files">Facebook</a> </li> </ul> </li> <li> <a class="elements-nav__category-link external-link" target="_blank" data-analytics-view-payload="{"eventName":"view_promotion","contextDetail":"site switcher","ecommerce":{"promotionId":"switcher_mobile_31JUL2024","promotionName":"switcher_mobile_31JUL2024","promotionType":"elements referral"}}" data-analytics-click-payload="{"eventName":"select_promotion","contextDetail":"site switcher","ecommerce":{"promotionId":"switcher_mobile_31JUL2024","promotionName":"switcher_mobile_31JUL2024","promotionType":"elements referral"}}" href="https://elements.envato.com/?utm_campaign=switcher_mobile_31JUL2024&utm_medium=referral&utm_source=codecanyon.net">Unlimited Downloads</a> </li> </ul> </div> </div> <div class="page__off-canvas--right overflow"> <div class="off-canvas-right"> <a class="off-canvas-right__link--cart" href="/cart"> Guest Cart <div class="shopping-cart-summary is-empty" data-view="cartCount"> <span class="js-cart-summary-count shopping-cart-summary__count">0</span> <i class="e-icon -icon-cart"></i> </div> </a> <a class="off-canvas-right__link" href="/sign_up"> Create an Envato Account <i class="e-icon -icon-envato"></i> </a> <a class="off-canvas-right__link" href="/sign_in"> Sign In <i class="e-icon -icon-login"></i> </a> </div> </div> <div class="page__canvas"> <div class="canvas"> <div class="canvas__header"> <header class="site-header"> <div class="site-header__mini is-hidden-desktop"> <div class="header-mini"> <div class="header-mini__button--cart"> <a class="btn btn--square" href="/cart"> <svg width="14px" height="14px" viewBox="0 0 14 14" class="header-mini__button-cart-icon" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" role="img"> <title>Cart</title> <path d="M 0.009 1.349 C 0.009 1.753 0.347 2.086 0.765 2.086 C 0.765 2.086 0.766 2.086 0.767 2.086 L 0.767 2.09 L 2.289 2.09 L 5.029 7.698 L 4.001 9.507 C 3.88 9.714 3.812 9.958 3.812 10.217 C 3.812 11.028 4.496 11.694 5.335 11.694 L 14.469 11.694 L 14.469 11.694 C 14.886 11.693 15.227 11.36 15.227 10.957 C 15.227 10.552 14.886 10.221 14.469 10.219 L 14.469 10.217 L 5.653 10.217 C 5.547 10.217 5.463 10.135 5.463 10.031 L 5.487 9.943 L 6.171 8.738 L 11.842 8.738 C 12.415 8.738 12.917 8.436 13.175 7.978 L 15.901 3.183 C 15.96 3.08 15.991 2.954 15.991 2.828 C 15.991 2.422 15.65 2.09 15.23 2.09 L 3.972 2.09 L 3.481 1.077 L 3.466 1.043 C 3.343 0.79 3.084 0.612 2.778 0.612 C 2.777 0.612 0.765 0.612 0.765 0.612 C 0.347 0.612 0.009 0.943 0.009 1.349 Z M 3.819 13.911 C 3.819 14.724 4.496 15.389 5.335 15.389 C 6.171 15.389 6.857 14.724 6.857 13.911 C 6.857 13.097 6.171 12.434 5.335 12.434 C 4.496 12.434 3.819 13.097 3.819 13.911 Z M 11.431 13.911 C 11.431 14.724 12.11 15.389 12.946 15.389 C 13.784 15.389 14.469 14.724 14.469 13.911 C 14.469 13.097 13.784 12.434 12.946 12.434 C 12.11 12.434 11.431 13.097 11.431 13.911 Z"></path> </svg> <span class="is-hidden">Cart</span> <span class="header-mini__button-cart-cart-amount is-hidden"> 0 </span> </a> </div> <div class="header-mini__button--account"> <a class="btn btn--square" data-view="offCanvasNavToggle" data-off-canvas="right" href="#account"> <i class="e-icon -icon-person"></i> <span class="is-hidden">Account</span> </a> </div> <div class="header-mini__button--categories"> <a class="btn btn--square" data-view="offCanvasNavToggle" data-off-canvas="left" href="#categories"> <i class="e-icon -icon-hamburger"></i> <span class="is-hidden">Sites, Search & Categories</span> </a> </div> <div class="header-mini__logo"> <a href="https://codecanyon.net/?auto_signin=true"> <img alt="CodeCanyon" class="header-mini__logo--codecanyon" src="https://public-assets.envato-static.com/assets/common/transparent-1px-1f61547480c17dc67dd9a6c38545a5911cc4a8024f6f3c0992e7c1c81fb37578.png" /> </a></div> </div> </div> <div class="global-header is-hidden-tablet-and-below"> <div class='grid-container -layout-wide'> <div class='global-header__wrapper'> <a href="https://codecanyon.net"> <img height="20" alt="Envato Market" class="global-header__logo" src="https://public-assets.envato-static.com/assets/logos/envato_market-dd390ae860330996644c1c109912d2bf63885fc075b87215ace9b5b4bdc71cc8.svg" /> </a> <nav class='global-header-menu' role='navigation'> <ul class='global-header-menu__list'> <li class='global-header-menu__list-item'> <a class="global-header-menu__link" href="https://forums.envato.com"> <span class='global-header-menu__link-text'> Forums </span> </a> </li> <li class='global-header-menu__list-item'> <a class="global-header-menu__link" href="https://author.envato.com"> <span class='global-header-menu__link-text'> Start Selling </span> </a> </li> <li data-view="globalHeaderMenuDropdownHandler" class='global-header-menu__list-item--with-dropdown'> <a data-lazy-load-trigger="mouseover" class="global-header-menu__link" href="#"> <svg width="16px" height="16px" viewBox="0 0 16 16" class="global-header-menu__icon" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" role="img"> <title>Menu</title> <path d="M3.5 2A1.5 1.5 0 0 1 5 3.5 1.5 1.5 0 0 1 3.5 5 1.5 1.5 0 0 1 2 3.5 1.5 1.5 0 0 1 3.5 2zM8 2a1.5 1.5 0 0 1 1.5 1.5A1.5 1.5 0 0 1 8 5a1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 8 2zM12.5 2A1.5 1.5 0 0 1 14 3.5 1.5 1.5 0 0 1 12.5 5 1.5 1.5 0 0 1 11 3.5 1.5 1.5 0 0 1 12.5 2zM3.5 6.5A1.5 1.5 0 0 1 5 8a1.5 1.5 0 0 1-1.5 1.5A1.5 1.5 0 0 1 2 8a1.5 1.5 0 0 1 1.5-1.5zM8 6.5A1.5 1.5 0 0 1 9.5 8 1.5 1.5 0 0 1 8 9.5 1.5 1.5 0 0 1 6.5 8 1.5 1.5 0 0 1 8 6.5zM12.5 6.5A1.5 1.5 0 0 1 14 8a1.5 1.5 0 0 1-1.5 1.5A1.5 1.5 0 0 1 11 8a1.5 1.5 0 0 1 1.5-1.5zM3.5 11A1.5 1.5 0 0 1 5 12.5 1.5 1.5 0 0 1 3.5 14 1.5 1.5 0 0 1 2 12.5 1.5 1.5 0 0 1 3.5 11zM8 11a1.5 1.5 0 0 1 1.5 1.5A1.5 1.5 0 0 1 8 14a1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 8 11zM12.5 11a1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5z"></path> </svg> <span class='global-header-menu__link-text'> Our Products </span> </a> <div class='global-header-menu__dropdown-container'> <div class='global-header-dropdown'> <ul class='global-header-dropdown__list'> <li> <a class="global-header-dropdown__link" data-analytics-view-payload="{"eventName":"view_promotion","contextDetail":"product picker","ecommerce":{"promotionId":"elements_mkt-headernav_our_products_26AUG2024","promotionName":"elements_mkt-headernav_our_products_26AUG2024","promotionType":"elements referral"}}" data-analytics-click-payload="{"eventName":"select_promotion","contextDetail":"product picker","ecommerce":{"promotionId":"elements_mkt-headernav_our_products_26AUG2024","promotionName":"elements_mkt-headernav_our_products_26AUG2024","promotionType":"elements referral"}}" title="The unlimited creative subscription" target="_blank" href="https://elements.envato.com?utm_source=envatomarket&utm_medium=promos&utm_campaign=elements_mkt-headernav_our_products_26AUG2024&utm_content=headernav"> <span data-src="https://public-assets.envato-static.com/assets/header/EnvatoElements-logo-4f70ffb865370a5fb978e9a1fc5bbedeeecdfceb8d0ebec2186aef4bee5db79d.svg" data-alt="Envato Elements" data-class="global-header-dropdown__product-logo" class="lazy-load-img global-header-dropdown__product-logo"></span> <span class="global-header-dropdown__link-text -decoration-none">The unlimited creative subscription</span> </a> </li> <li> <a class="global-header-dropdown__link" data-analytics-view-payload="{"eventName":"view_promotion","contextDetail":"product picker","ecommerce":{"promotionId":"tutsplus_mkt-headernav_our_products_26AUG2024","promotionName":"tutsplus_mkt-headernav_our_products_26AUG2024","promotionType":""}}" data-analytics-click-payload="{"eventName":"select_promotion","contextDetail":"product picker","ecommerce":{"promotionId":"tutsplus_mkt-headernav_our_products_26AUG2024","promotionName":"tutsplus_mkt-headernav_our_products_26AUG2024","promotionType":""}}" title="Free creative tutorials and courses" target="_blank" href="https://tutsplus.com?utm_source=envatomarket&utm_medium=promos&utm_campaign=tutsplus_mkt-headernav_our_products_26AUG2024&&utm_content=headernav"> <span data-src="https://public-assets.envato-static.com/assets/header/EnvatoTuts-logo-5bb3e97bcf5ed243facca8a3dfada1cb1c916ab65d5ab88a541fbe9aface742b.svg" data-alt="Tuts+" data-class="global-header-dropdown__product-logo" class="lazy-load-img global-header-dropdown__product-logo"></span> <span class="global-header-dropdown__link-text -decoration-none">Free creative tutorials and courses</span> </a> </li> <li> <a class="global-header-dropdown__link" data-analytics-view-payload="{"eventName":"view_promotion","contextDetail":"product picker","ecommerce":{"promotionId":"placeit_mkt-headernav_our_products_26AUG2024","promotionName":"placeit_mkt-headernav_our_products_26AUG2024","promotionType":""}}" data-analytics-click-payload="{"eventName":"select_promotion","contextDetail":"product picker","ecommerce":{"promotionId":"placeit_mkt-headernav_our_products_26AUG2024","promotionName":"placeit_mkt-headernav_our_products_26AUG2024","promotionType":""}}" title="Customize mockups, design and video" target="_blank" href="https://placeit.net?utm_source=envatomarket&utm_medium=promos&utm_campaign=placeit_mkt-headernav_our_products_26AUG2024&utm_content=headernav"> <span data-src="https://public-assets.envato-static.com/assets/header/Placeit-logo-db4c3dfdec1cbc06ecfc092e600ff2712795f60ce4c50b32c93d450006d7ea8d.svg" data-alt="Placeit by Envato" data-class="global-header-dropdown__product-logo" class="lazy-load-img global-header-dropdown__product-logo"></span> <span class="global-header-dropdown__link-text -decoration-none">Customize mockups, design and video</span> </a> </li> </ul> <div class='global-header-dropdown-footer'> <ul> <li class='global-header-dropdown-footer__list-item'> Join the <a class="global-header-dropdown-footer__link" target="_blank" href="http://community.envato.com"> Envato community </a> </li> <li class='global-header-dropdown-footer__list-item'> Learn from others in <a class="global-header-dropdown-footer__link" target="_blank" href="https://forums.envato.com"> the forums </a> </li> </ul> </div> </div> </div> </li> <li class='global-header-menu__list-item -background-light -border-radius'> <a id="spec-link-cart" class="global-header-menu__link h-pr1" href="/cart"> <svg width="16px" height="16px" viewBox="0 0 16 16" class="global-header-menu__icon global-header-menu__icon-cart" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" role="img"> <title>Cart</title> <path d="M 0.009 1.349 C 0.009 1.753 0.347 2.086 0.765 2.086 C 0.765 2.086 0.766 2.086 0.767 2.086 L 0.767 2.09 L 2.289 2.09 L 5.029 7.698 L 4.001 9.507 C 3.88 9.714 3.812 9.958 3.812 10.217 C 3.812 11.028 4.496 11.694 5.335 11.694 L 14.469 11.694 L 14.469 11.694 C 14.886 11.693 15.227 11.36 15.227 10.957 C 15.227 10.552 14.886 10.221 14.469 10.219 L 14.469 10.217 L 5.653 10.217 C 5.547 10.217 5.463 10.135 5.463 10.031 L 5.487 9.943 L 6.171 8.738 L 11.842 8.738 C 12.415 8.738 12.917 8.436 13.175 7.978 L 15.901 3.183 C 15.96 3.08 15.991 2.954 15.991 2.828 C 15.991 2.422 15.65 2.09 15.23 2.09 L 3.972 2.09 L 3.481 1.077 L 3.466 1.043 C 3.343 0.79 3.084 0.612 2.778 0.612 C 2.777 0.612 0.765 0.612 0.765 0.612 C 0.347 0.612 0.009 0.943 0.009 1.349 Z M 3.819 13.911 C 3.819 14.724 4.496 15.389 5.335 15.389 C 6.171 15.389 6.857 14.724 6.857 13.911 C 6.857 13.097 6.171 12.434 5.335 12.434 C 4.496 12.434 3.819 13.097 3.819 13.911 Z M 11.431 13.911 C 11.431 14.724 12.11 15.389 12.946 15.389 C 13.784 15.389 14.469 14.724 14.469 13.911 C 14.469 13.097 13.784 12.434 12.946 12.434 C 12.11 12.434 11.431 13.097 11.431 13.911 Z"></path> </svg> <span class="global-header-menu__link-cart-amount is-hidden" data-view="headerCartCount" data-test-id="header_cart_count">0</span> </a></li> <li class='global-header-menu__list-item -background-light -border-radius'> <a class="global-header-menu__link h-pl1" data-view="modalAjax" href="/sign_in"> <span id="spec-user-username" class='global-header-menu__link-text'> Sign In </span> </a> </li> </ul> </nav> </div> </div> </div> <div class="site-header__sites is-hidden-tablet-and-below"> <div class="header-sites header-site-titles"> <div class="grid-container -layout-wide"> <nav class="header-site-titles__container"> <div class="header-site-titles__site"> <a class="header-site-titles__link t-link" alt="Web Templates" href="https://themeforest.net/?auto_signin=true">Web Themes & Templates</a> </div> <div class="header-site-titles__site"> <a class="header-site-titles__link t-link is-active" alt="Code" href="https://codecanyon.net/?auto_signin=true">Code</a> </div> <div class="header-site-titles__site"> <a class="header-site-titles__link t-link" alt="Video" href="https://videohive.net/?auto_signin=true">Video</a> </div> <div class="header-site-titles__site"> <a class="header-site-titles__link t-link" alt="Music" href="https://audiojungle.net/?auto_signin=true">Audio</a> </div> <div class="header-site-titles__site"> <a class="header-site-titles__link t-link" alt="Graphics" href="https://graphicriver.net/?auto_signin=true">Graphics</a> </div> <div class="header-site-titles__site"> <a class="header-site-titles__link t-link" alt="Photos" href="https://photodune.net/?auto_signin=true">Photos</a> </div> <div class="header-site-titles__site"> <a class="header-site-titles__link t-link" alt="3D Files" href="https://3docean.net/?auto_signin=true">3D Files</a> </div> <div class="header-site-titles__site elements-nav__container"> <a class="header-site-titles__link t-link elements-nav__main-link" href="https://elements.envato.com/?utm_campaign=elements_mkt-switcher_31JUL2024&utm_content=cc_item_7152281&utm_medium=referral&utm_source=codecanyon.net" target="_blank" > <span> Unlimited Downloads </span> </a> <a target="_blank" class="elements-nav__dropdown-container unique-selling-points__variant" data-analytics-view-payload="{"eventName":"view_promotion","contextDetail":"site switcher","ecommerce":{"promotionId":"elements_mkt-switcher_31JUL2024","promotionName":"elements_mkt-switcher_31JUL2024","promotionType":"elements referral"}}" data-analytics-click-payload="{"eventName":"select_promotion","contextDetail":"site switcher","ecommerce":{"promotionId":"elements_mkt-switcher_31JUL2024","promotionName":"elements_mkt-switcher_31JUL2024","promotionType":"elements referral"}}" href="https://elements.envato.com/?utm_campaign=elements_mkt-switcher_31JUL2024&utm_content=cc_item_7152281&utm_medium=referral&utm_source=codecanyon.net"> <div class="elements-nav__main-panel"> <img class="elements-nav__logo-container" loading="lazy" src="https://public-assets.envato-static.com/assets/header/EnvatoElements-logo-4f70ffb865370a5fb978e9a1fc5bbedeeecdfceb8d0ebec2186aef4bee5db79d.svg" alt="Elements logo" height="23" width="101" > <div class="elements-nav__punch-line"> <h2> Looking for unlimited downloads? </h2> <p> Subscribe to Envato Elements. <ul> <li> <img src="https://public-assets.envato-static.com/assets/header/badge-a65149663b95bcee411e80ccf4da9788f174155587980d8f1d9c44fd8b59edd8.svg" alt="badge" width="20" height="20" > Millions of premium assets </li> <li> <img src="https://public-assets.envato-static.com/assets/header/thumbs_up-e5ce4c821cfd6a6aeba61127a8e8c4d2d7c566e654f588a22708c64d66680869.svg" alt="thumbs up" width="20" height="20" > Great value subscription </li> </ul> <button class="brand-neue-button brand-neue-button__open-in-new elements-nav__cta">Let's create</button> </p> </div> </div> <div class="elements-nav__secondary-panel"> <img class="elements-nav__secondary-panel__collage" loading="lazy" src="https://public-assets.envato-static.com/assets/header/items-collage-1x-a39e4a5834e75c32a634cc7311720baa491687b1aaa4b709ebd1acf0f8427b53.png" srcset="https://public-assets.envato-static.com/assets/header/items-collage-2x-75e1ad16a46b9788861780a57feeb5fd1ad1026ecce9330302f0ef8f6f542697.png 2x" alt="Collage of Elements items" width="267" height="233" > </div> </a></div> <div class="header-site-floating-logo__container"> <div class=header-site-floating-logo__codecanyon ></div> </div> </nav> </div> </div> </div> <div class="site-header__categories is-hidden-tablet-and-below"> <div class="header-categories"> <div class="grid-container -layout-wide"> <ul class="header-categories__links"> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-0-dropdown" href="/category/all"> All Items </a> <div class="header-categories__links-dropdown js-categories-0-dropdown"> <ul class="header-dropdown"> <li> <a class="" href="/top-sellers">Popular Files</a> </li> <li> <a class="" href="/feature">Featured Files</a> </li> <li> <a class="" href="/search?date=this-month&sort=sales">Top New Files</a> </li> <li> <a class="" href="/follow_feed">Follow Feed</a> </li> <li> <a class="" href="/authors/top">Top Authors</a> </li> <li> <a class="" href="/page/top_new_sellers">Top New Authors</a> </li> <li> <a class="" href="/collections">Public Collections</a> </li> <li> <a class="" href="/category">View All Categories</a> </li> </ul> </div> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-1-dropdown" href="/category/php-scripts"> PHP Scripts </a> <div class="header-categories__links-dropdown js-categories-1-dropdown"> <ul class="header-dropdown"> <li> <a class=" header-dropdown__top" href="/popular_item/by_category?category=php-scripts">Popular Items</a> </li> <li> <a class="" href="/category/php-scripts/add-ons">Add-ons</a> </li> <li> <a class="" href="/category/php-scripts/calendars">Calendars</a> </li> <li> <a class="" href="/category/php-scripts/countdowns">Countdowns</a> </li> <li> <a class="" href="/category/php-scripts/database-abstractions">Database Abstractions</a> </li> <li> <a class="" href="/category/php-scripts/forms">Forms</a> </li> <li> <a class="" href="/category/php-scripts/help-and-support-tools">Help and Support Tools</a> </li> <li> <a class="" href="/category/php-scripts/images-and-media">Images and Media</a> </li> <li> <a class="" href="/category/php-scripts/loaders-and-uploaders">Loaders and Uploaders</a> </li> <li> <a class="" href="/category/php-scripts/navigation">Navigation</a> </li> <li> <a class="" href="/category/php-scripts/news-tickers">News Tickers</a> </li> <li> <a class="" href="/category/php-scripts/polls">Polls</a> </li> <li> <a class="" href="/category/php-scripts/project-management-tools">Project Management Tools</a> </li> <li> <a class="" href="/category/php-scripts/ratings-and-charts">Ratings and Charts</a> </li> <li> <a class="" href="/category/php-scripts/search">Search</a> </li> <li> <a class="" href="/category/php-scripts/shopping-carts">Shopping Carts</a> </li> <li> <a class="" href="/category/php-scripts/social-networking">Social Networking</a> </li> <li> <a class="" href="/category/php-scripts/miscellaneous">Miscellaneous</a> </li> </ul> </div> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-2-dropdown" href="/category/wordpress"> WordPress </a> <div class="header-categories__links-dropdown js-categories-2-dropdown"> <ul class="header-dropdown"> <li> <a class=" header-dropdown__top" href="/popular_item/by_category?category=wordpress">Popular Items</a> </li> <li> <a class="" href="/category/wordpress/add-ons">Add-ons</a> </li> <li> <a class="" href="/category/wordpress/advertising">Advertising</a> </li> <li> <a class="" href="/category/wordpress/calendars">Calendars</a> </li> <li> <a class="" href="/category/wordpress/ecommerce">eCommerce</a> </li> <li> <a class="" href="/attributes/compatible-with/elementor">Elementor</a> </li> <li> <a class="" href="/category/wordpress/forms">Forms</a> </li> <li> <a class="" href="/category/wordpress/forums">Forums</a> </li> <li> <a class="" href="/category/wordpress/galleries">Galleries</a> </li> <li> <a class="" href="/category/wordpress/interface-elements">Interface Elements</a> </li> <li> <a class="" href="/category/wordpress/media">Media</a> </li> <li> <a class="" href="/category/wordpress/membership">Membership</a> </li> <li> <a class="" href="/category/wordpress/newsletters">Newsletters</a> </li> <li> <a class="" href="/category/wordpress/seo">SEO</a> </li> <li> <a class="" href="/category/wordpress/social-networking">Social Networking</a> </li> <li> <a class="" href="/category/wordpress/utilities">Utilities</a> </li> <li> <a class="" href="/category/wordpress/widgets">Widgets</a> </li> <li> <a class="" href="/category/wordpress/miscellaneous">Miscellaneous</a> </li> <li> <a class=" header-dropdown__bottom" href="https://themeforest.net/category/wordpress">WordPress Themes on ThemeForest</a> </li> </ul> </div> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-3-dropdown" href="/search/ecommerce"> eCommerce </a> <div class="header-categories__links-dropdown js-categories-3-dropdown"> <ul class="header-dropdown"> <li> <a class="" href="/search?compatible_with=Easy+Digital+Downloads">Easy Digital Downloads</a> </li> <li> <a class="" href="/category/wordpress/ecommerce/jigoshop">Jigoshop</a> </li> <li> <a class="" href="/category/plugins/magento-extensions">Magento Extensions</a> </li> <li> <a class="" href="/category/plugins/opencart">OpenCart</a> </li> <li> <a class="" href="/category/plugins/oscommerce">osCommerce</a> </li> <li> <a class="" href="/category/plugins/prestashop">Prestashop</a> </li> <li> <a class="" href="/category/plugins/ubercart">UberCart</a> </li> <li> <a class="" href="/category/plugins/virtuemart">VirtueMart</a> </li> <li> <a class="" href="/category/wordpress/ecommerce/woocommerce">WooCommerce</a> </li> <li> <a class="" href="/category/wordpress/ecommerce/wp-e-commerce">WP e-Commerce</a> </li> <li> <a class="" href="/category/wordpress/ecommerce/standalone">WP Standalone</a> </li> <li> <a class="" href="/category/plugins/zen-cart">Zen Cart</a> </li> <li> <a class="" href="/category/wordpress/ecommerce/miscellaneous">Miscellaneous</a> </li> </ul> </div> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-4-dropdown" href="/category/javascript"> JavaScript </a> <div class="header-categories__links-dropdown js-categories-4-dropdown"> <ul class="header-dropdown"> <li> <a class=" header-dropdown__top" href="/popular_item/by_category?category=javascript">Popular Items</a> </li> <li> <a class="" href="/category/javascript/animated-svgs">Animated SVGs</a> </li> <li> <a class="" href="/category/javascript/calendars">Calendars</a> </li> <li> <a class="" href="/category/javascript/countdowns">Countdowns</a> </li> <li> <a class="" href="/category/javascript/database-abstractions">Database Abstractions</a> </li> <li> <a class="" href="/category/javascript/forms">Forms</a> </li> <li> <a class="" href="/category/javascript/images-and-media">Images and Media</a> </li> <li> <a class="" href="/category/javascript/loaders-and-uploaders">Loaders and Uploaders</a> </li> <li> <a class="" href="/category/javascript/media">Media</a> </li> <li> <a class="" href="/category/javascript/navigation">Navigation</a> </li> <li> <a class="" href="/category/javascript/news-tickers">News Tickers</a> </li> <li> <a class="" href="/category/javascript/project-management-tools">Project Management Tools</a> </li> <li> <a class="" href="/category/javascript/ratings-and-charts">Ratings and Charts</a> </li> <li> <a class="" href="/category/javascript/shopping-carts">Shopping Carts</a> </li> <li> <a class="" href="/category/javascript/sliders">Sliders</a> </li> <li> <a class="" href="/category/javascript/social-networks">Social Networks</a> </li> <li> <a class="" href="/category/javascript/miscellaneous">Miscellaneous</a> </li> </ul> </div> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-5-dropdown" href="/category/css"> CSS </a> <div class="header-categories__links-dropdown js-categories-5-dropdown"> <ul class="header-dropdown"> <li> <a class=" header-dropdown__top" href="/popular_item/by_category?category=css">Popular Items</a> </li> <li> <a class="" href="/category/css/animations-and-effects">Animations and Effects</a> </li> <li> <a class="" href="/category/css/buttons">Buttons</a> </li> <li> <a class="" href="/category/css/charts-and-graphs">Charts and Graphs</a> </li> <li> <a class="" href="/category/css/forms">Forms</a> </li> <li> <a class="" href="/category/css/layouts">Layouts</a> </li> <li> <a class="" href="/category/css/navigation-and-menus">Navigation and Menus</a> </li> <li> <a class="" href="/category/css/pricing-tables">Pricing Tables</a> </li> <li> <a class="" href="/category/css/tabs-and-sliders">Tabs and Sliders</a> </li> <li> <a class="" href="/category/css/miscellaneous">Miscellaneous</a> </li> </ul> </div> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-6-dropdown" href="/category/mobile"> Mobile </a> <div class="header-categories__links-dropdown js-categories-6-dropdown"> <ul class="header-dropdown"> <li> <a class=" header-dropdown__top" href="/popular_item/by_category?category=mobile">Popular Items</a> </li> <li> <a class="" href="/category/mobile/android">Android</a> </li> <li> <a class="" href="/category/mobile/flutter">Flutter</a> </li> <li> <a class="" href="/category/mobile/ios">iOS</a> </li> <li> <a class="" href="/category/mobile/native-web">Native Web</a> </li> <li> <a class="" href="/category/mobile/titanium">Titanium</a> </li> </ul> </div> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-7-dropdown" href="/category/html5"> HTML5 </a> <div class="header-categories__links-dropdown js-categories-7-dropdown"> <ul class="header-dropdown"> <li> <a class=" header-dropdown__top" href="/popular_item/by_category?category=html5">Popular Items</a> </li> <li> <a class="" href="/category/html5/3d">3D</a> </li> <li> <a class="" href="/category/html5/ad-templates">Ad Templates</a> </li> <li> <a class="" href="/category/html5/canvas">Canvas</a> </li> <li> <a class="" href="/category/html5/charts-and-graphs">Charts and Graphs</a> </li> <li> <a class="" href="/category/html5/forms">Forms</a> </li> <li> <a class="" href="/category/html5/games">Games</a> </li> <li> <a class="" href="/category/html5/libraries">Libraries</a> </li> <li> <a class="" href="/category/html5/media">Media</a> </li> <li> <a class="" href="/category/html5/presentations">Presentations</a> </li> <li> <a class="" href="/category/html5/sliders">Sliders</a> </li> <li> <a class="" href="/category/html5/storage">Storage</a> </li> <li> <a class="" href="/category/html5/templates">Templates</a> </li> <li> <a class="" href="/category/html5/miscellaneous">Miscellaneous</a> </li> </ul> </div> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-8-dropdown" href="/search/ai"> AI Tools </a> <div class="header-categories__links-dropdown js-categories-8-dropdown"> <ul class="header-dropdown"> <li> <a class=" header-dropdown__top" href="/search/ai?sort=sales">Popular Items</a> </li> <li> <a class="" href="/search/ai%20content">AI Writers and Content Generators</a> </li> <li> <a class="" href="/search/ai%20image">AI Image and Video Generators</a> </li> <li> <a class="" href="/search/ai%20chat">AI Chatbots</a> </li> </ul> </div> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link header-categories__main-link--empty" href="https://themeforest.net/category/wordpress"> WP Themes </a> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-10-dropdown" href="/category/plugins"> Plugins </a> <div class="header-categories__links-dropdown js-categories-10-dropdown"> <ul class="header-dropdown"> <li> <a class=" header-dropdown__top" href="/popular_item/by_category?category=plugins">Popular Items</a> </li> <li> <a class="" href="/category/plugins/concrete5">Concrete5</a> </li> <li> <a class="" href="/category/plugins/drupal">Drupal</a> </li> <li> <a class="" href="/category/plugins/expressionengine">ExpressionEngine</a> </li> <li> <a class="" href="/category/plugins/joomla">Joomla</a> </li> <li> <a class="" href="/category/plugins/magento-extensions">Magento Extensions</a> </li> <li> <a class="" href="/category/plugins/muse-widgets">Muse Widgets</a> </li> <li> <a class="" href="/category/plugins/opencart">OpenCart</a> </li> <li> <a class="" href="/category/plugins/oscommerce">osCommerce</a> </li> <li> <a class="" href="/category/plugins/prestashop">Prestashop</a> </li> <li> <a class="" href="/category/plugins/ubercart">Ubercart</a> </li> <li> <a class="" href="/category/plugins/virtuemart">VirtueMart</a> </li> <li> <a class="" href="/category/plugins/zen-cart">Zen Cart</a> </li> <li> <a class="" href="/category/plugins/miscellaneous">Miscellaneous</a> </li> </ul> </div> </li> <li class="header-categories__links-item"> <a rel="noopener" target="_blank" class="header-categories__main-link header-categories__main-link--empty header-categories__main-link--offsite_icon" href="https://placeit.net/mockup-generator?utm_source=envatomarket&utm_medium=promos&utm_campaign=placeit_mkt-menu-photos&utm_content=mockup_generator"> Mockup Generator </a> </li> <li class="header-categories__links-item"> <a class="header-categories__main-link" data-view="touchOnlyDropdown" data-dropdown-target=".js-categories-12-dropdown" href="/category"> More </a> <div class="header-categories__links-dropdown js-categories-12-dropdown"> <ul class="header-dropdown"> <li> <a class="" href="/category/net">.NET</a> </li> <li> <a class="" href="/category/apps">Apps</a> </li> <li> <a class="" href="/search?term=facebook&type=files">Facebook</a> </li> </ul> </div> </li> </ul> <div class="header-categories__search"> <form id="search" data-view="searchField" action="/category/all" accept-charset="UTF-8" method="get"> <div class="search-field -border-light h-ml2"> <div class="search-field__input"> <input id="term" name="term" class="js-term search-field__input-field" type="search" placeholder="Search" /> </div> <button class="search-field__button" type="submit"> <i class="e-icon -icon-search"><span class="e-icon__alt">Search</span></i> </button> </div> </form></div> </div> </div> </div> </header> </div> <div class="js-canvas__body canvas__body"> <div class="grid-container"> </div> <div class="context-header "> <div class="grid-container "> <nav class="breadcrumbs h-text-truncate "> <a class="js-breadcrumb-category" href="/">Home</a> <a href='/category/all' class="js-breadcrumb-category">Files</a> <a class="js-breadcrumb-category" href="https://codecanyon.net/category/javascript">JavaScript</a> <a class="js-breadcrumb-category" href="https://codecanyon.net/category/javascript/media">Media</a> </nav> <div class="item-header" data-view="itemHeader"> <div class="item-header__top"> <div class="item-header__title"> <h1 class="t-heading -color-inherit -size-l h-m0 is-hidden-phone"> Easy Video Player </h1> <h1 class="t-heading -color-inherit -size-xs h-m0 is-hidden-tablet-and-above"> Easy Video Player </h1> </div> <div class="item-header__price is-hidden-desktop"> <a class="js-item-header__cart-button e-btn--3d -color-primary -size-m" rel="nofollow" title="Add to Cart" data-view="modalAjax" href="/cart/configure_before_adding/7152281"> <span class="item-header__cart-button-icon"> <i class="e-icon -icon-cart -margin-right"></i> </span> <span class="t-heading -size-m -color-light -margin-none"> <b class="t-currency"><span class="js-item-header__price">$29</span></b> </span> </a> </div> </div> <div class="item-header__details-section"> <div class="item-header__author-details"> By <a rel="author" class="js-by-author" href="/user/fwdesign">FWDesign</a> </div> <div class="item-header__sales-count"> <svg width="16px" height="16px" viewBox="0 0 16 16" class="item-header__sales-count-icon" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" role="img"> <title>Cart</title> <path d="M 0.009 1.349 C 0.009 1.753 0.347 2.086 0.765 2.086 C 0.765 2.086 0.766 2.086 0.767 2.086 L 0.767 2.09 L 2.289 2.09 L 5.029 7.698 L 4.001 9.507 C 3.88 9.714 3.812 9.958 3.812 10.217 C 3.812 11.028 4.496 11.694 5.335 11.694 L 14.469 11.694 L 14.469 11.694 C 14.886 11.693 15.227 11.36 15.227 10.957 C 15.227 10.552 14.886 10.221 14.469 10.219 L 14.469 10.217 L 5.653 10.217 C 5.547 10.217 5.463 10.135 5.463 10.031 L 5.487 9.943 L 6.171 8.738 L 11.842 8.738 C 12.415 8.738 12.917 8.436 13.175 7.978 L 15.901 3.183 C 15.96 3.08 15.991 2.954 15.991 2.828 C 15.991 2.422 15.65 2.09 15.23 2.09 L 3.972 2.09 L 3.481 1.077 L 3.466 1.043 C 3.343 0.79 3.084 0.612 2.778 0.612 C 2.777 0.612 0.765 0.612 0.765 0.612 C 0.347 0.612 0.009 0.943 0.009 1.349 Z M 3.819 13.911 C 3.819 14.724 4.496 15.389 5.335 15.389 C 6.171 15.389 6.857 14.724 6.857 13.911 C 6.857 13.097 6.171 12.434 5.335 12.434 C 4.496 12.434 3.819 13.097 3.819 13.911 Z M 11.431 13.911 C 11.431 14.724 12.11 15.389 12.946 15.389 C 13.784 15.389 14.469 14.724 14.469 13.911 C 14.469 13.097 13.784 12.434 12.946 12.434 C 12.11 12.434 11.431 13.097 11.431 13.911 Z"></path> </svg> <strong>1,033</strong> sales </div> <div class="item-header__envato-highlighted"> <strong>Recently Updated</strong> <svg width="16px" height="16px" viewBox="0 0 14 14" class="item-header__envato-checkmark-icon" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" role="img"> <title></title> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.333252 7.00004C0.333252 3.31814 3.31802 0.333374 6.99992 0.333374C8.76803 0.333374 10.4637 1.03575 11.714 2.286C12.9642 3.53624 13.6666 5.23193 13.6666 7.00004C13.6666 10.6819 10.6818 13.6667 6.99992 13.6667C3.31802 13.6667 0.333252 10.6819 0.333252 7.00004ZM6.15326 9.23337L9.89993 5.48671C10.0227 5.35794 10.0227 5.15547 9.89993 5.02671L9.54659 4.67337C9.41698 4.54633 9.20954 4.54633 9.07993 4.67337L5.91993 7.83337L4.91993 6.84004C4.85944 6.77559 4.77498 6.73903 4.68659 6.73903C4.5982 6.73903 4.51375 6.77559 4.45326 6.84004L4.09993 7.19337C4.03682 7.25596 4.00133 7.34116 4.00133 7.43004C4.00133 7.51892 4.03682 7.60412 4.09993 7.66671L5.68659 9.23337C5.74708 9.29782 5.83154 9.33439 5.91993 9.33439C6.00832 9.33439 6.09277 9.29782 6.15326 9.23337Z" fill="#79B530"/> </svg> </div> </div> </div>  <div class="is-hidden-tablet-and-below page-tabs"> <ul> <li class="selected"><a class="js-item-navigation-item-details t-link -decoration-none" href="/item/easy-video-player/7152281">Item Details</a></li> <li><a class="js-item-navigation-reviews t-link -decoration-none" href="/item/easy-video-player/reviews/7152281"><span>Reviews</span><span> <div class="rating-detailed-small"> <div class="rating-detailed-small__header"> <div class="rating-detailed-small__stars"> <div class="rating-detailed-small-center__star-rating"> <i class="e-icon -icon-star"> </i> <i class="e-icon -icon-star"> </i> <i class="e-icon -icon-star"> </i> <i class="e-icon -icon-star"> </i> <i class="e-icon -icon-star-half-empty"> </i> </div> 4.61 <span class="is-visually-hidden">4.61 stars</span> </div> </div> </div> </span><span class="item-navigation-reviews-comments">62</span></a></li> <li><a class="js-item-navigation-comments t-link -decoration-none" href="/item/easy-video-player/7152281/comments"><span>Comments</span><span class="item-navigation-reviews-comments">444</span></a></li> <li><a class="js-item-navigation-support t-link -decoration-none" href="/item/easy-video-player/7152281/support">Support</a></li> </ul> </div>  <div class="page-tabs--dropdown" data-view="replaceItemNavsWithRemote" data-target=".js-remote"> <div class="page-tabs--dropdown__slt-custom-wlabel"> <div class="slt-custom-wlabel--page-tabs--dropdown"> <label> <span class="js-label"> Item Details </span> <span class="slt-custom-wlabel__arrow"> <i class="e-icon -icon-arrow-fill-down"></i> </span> </label> <select class="js-remote"> <option selected="selected" data-url="/item/easy-video-player/7152281">Item Details</option> <option data-url="/item/easy-video-player/reviews/7152281">Reviews (62)</option> <option data-url="/item/easy-video-player/7152281/comments">Comments (444)</option> <option data-url="/item/easy-video-player/7152281/support">Support</option> </select> </div> </div> </div> <div class="page-tabs"> <ul class="right item-bookmarking__left-icons_hidden" data-view="bookmarkStatesLoader"> <li class="js-favorite-widget item-bookmarking__control_icons--favorite" data-item-id="7152281"><a data-view="modalAjax" class="t-link -decoration-none" href="/sign_in?action_name=favorite&resource_id=7152281"><span class="item-bookmarking__control--label">Add to Favorites</span></a></li> <li class="js-collection-widget item-bookmarking__control_icons--collection" data-item-id="7152281"><a data-view="modalAjax" class="t-link -decoration-none" href="/sign_in?action_name=collect&resource_id=7152281"><span class="item-bookmarking__control--label">Add to Collection</span></a></li> </ul> </div> </div> </div> <div class="content-main" id="content"> <div class="grid-container"> <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ window.GtmMeasurements.sendAnalyticsEvent({"eventName":"view_item","eventType":"user","ecommerce":{"currency":"USD","value":29.0,"items":[{"affiliation":"codecanyon","item_id":7152281,"item_name":"Easy Video Player","item_brand":"FWDesign","item_category":"javascript","item_category2":"media","price":29.0,"quantity":1,"item_add_on":"bundle_6month","item_variant":"regular"}]}}); //]]> </script> <div> <link href="https://s3.envato.com/files/442213135/Thumbnail.jpg" /> <div class="content-s "> <div class="item-bookmarking__left-icons__wrapper"> <ul class="item-bookmarking__left-icons" data-view="bookmarkStatesLoader"> <li class="item-bookmarking__control_icons--favorite"> <span> <a title="Add to Favorites" data-view="modalAjax" href="/sign_in?action_name=favorite&resource_id=7152281"><span class="item-bookmarking__control--label">Add to Favorites</span></a> </span> </li> <li class="item-bookmarking__control_icons--collection"> <span> <a title="Add to Collection" data-view="modalAjax" href="/sign_in?action_name=collect&resource_id=7152281"> <span class="item-bookmarking__control--label">Add to Collection</span> </a> </span> </li> </ul> </div> <div class="box--no-padding"> <div class="item-preview live-preview-btn--blue -preview-live"> <div class="sash--horizontal -position-left -color-green -triangle-right -has-pointer-events"> <div> <i class="e-icon -icon-tag"></i> <span>On sale</span> </div> </div> <a target="_blank" href="/item/easy-video-player/full_screen_preview/7152281"><img alt="Easy Video Player - CodeCanyon Item for Sale" width="590" height="300" srcset="https://market-resized.envatousercontent.com/codecanyon.net/files/442213136/Preview-image.jpg?auto=format&q=94&cf_fit=crop&gravity=top&h=8000&w=590&s=c923b78ebd170650044924c66f7a567d30c9e04105e84e189c4893292dcb1e4f 590w, https://market-resized.envatousercontent.com/codecanyon.net/files/442213136/Preview-image.jpg?auto=format&q=94&cf_fit=crop&gravity=top&h=6780&w=500&s=64a873428cf5b7ce9dbf6d98821b21e6ea7e0cb6d0bb0e27dba4e6499fdad506 500w, https://market-resized.envatousercontent.com/codecanyon.net/files/442213136/Preview-image.jpg?auto=format&q=94&cf_fit=crop&gravity=top&h=5424&w=400&s=79db32051166084e41f6916afd3c2f76a4b2dd4948a917391974c81d386fc4bb 400w, https://market-resized.envatousercontent.com/codecanyon.net/files/442213136/Preview-image.jpg?auto=format&q=94&cf_fit=crop&gravity=top&h=4068&w=300&s=47ed71bc006c0f864239eb14eddc96d995be2565a844161d98fbf98f812d9b61 300w" sizes="(min-width: 1024px) 590px, (min-width: 1px) 100vw, 600px" src="https://market-resized.envatousercontent.com/codecanyon.net/files/442213136/Preview-image.jpg?auto=format&q=94&cf_fit=crop&gravity=top&h=8000&w=590&s=c923b78ebd170650044924c66f7a567d30c9e04105e84e189c4893292dcb1e4f" /></a> <div class="js- item-preview-image__gallery" data-title="Easy Video Player - CodeCanyon Item for Sale Screenshots Gallery" data-url="easy-video-player/screenshots/modal/7152281"> <a class="is-hidden" href="https://s3.envato.com/files/84740504/2.jpg">2.jpg</a> <a class="is-hidden" href="https://s3.envato.com/files/84740504/3.jpg">3.jpg</a> <a class="is-hidden" href="https://s3.envato.com/files/84740504/image1.jpg">image1.jpg</a> </div> <div class="item-preview__actions"> <div id="fullscreen" class="item-preview__preview-buttons"> <a href="/item/easy-video-player/full_screen_preview/7152281" role="button" class="btn-icon live-preview" target="_blank" rel="noopener nofollow" > Live Preview </a> <a data-view="screenshotGallery" href="/item/easy-video-player/screenshots/7152281" role="button" class="btn-icon screenshots" target="_blank" rel="noopener" > Screenshots </a> </div> </div> </div> </div> <div data-view="toggleItemDescription"> <div class="js-item-togglable-content"> <div class="js-item-description item-description"> <div class="user-html user-html__with-lazy-load"><p><a href="https://codecanyon.net/user/FWDesign/follow"><span data-src="https://camo.envatousercontent.com/6177ceb89eac9f69e02c6c1b7bbb438771615ecd/687474703a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f656e7661746f2d6e6577332e706e67" data-alt="Easy Video Player - 1" class="lazy-load-img"></span></a><a href="https://www.facebook.com/pages/FWDesign/155331618002826" rel="nofollow"><span data-src="https://camo.envatousercontent.com/cc9edbb08713f6206d2231290a423e29728b668b/687474703a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f66616365626f6f6b2d6e65772e706e67" data-alt="Easy Video Player - 2" class="lazy-load-img"></span></a> <a href="https://codecanyon.net/item/fwd-mega-bundle/19117054"><span data-src="https://camo.envatousercontent.com/d0eaa3178c2b50205e26bf134393567bc68dd48b/687474703a2f2f7777772e77656264657369676e2d666c6173682e726f2f696d616765732f2f6d622d6e65772e706e67" data-alt="Easy Video Player - 3" class="lazy-load-img"></span></a> <a href="https://themeforest.net/item/acora-photography-wordpress-theme/24999666"><span data-src="https://camo.envatousercontent.com/6fc7e5a507cafe0ecd58d9c133f85acd8498126f/68747470733a2f2f7777772e77656264657369676e2d666c6173682e726f2f696d616765732f61636f72612f61636f72612e6a7067" data-alt="Easy Video Player - 4" class="lazy-load-img"></span></a> <span data-src="https://camo.envatousercontent.com/6c0996962714d5e62a9e9205fc9d04324501ff49/68747470733a2f2f7777772e77656264657369676e2d666c6173682e726f2f696d616765732f656c6974652d6e65772e706e67" data-alt="Easy Video Player - 5" class="lazy-load-img"></span></p> <h3 id="item-description__-1-video-player-on-envato-market">#1 Video player on Envato Market</h3> <p><span data-src="https://camo.envatousercontent.com/9bc329e2749cb4129230019ba8bca900cbb9891c/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f6576702d746f70312e6a7067" data-alt="Easy Video Player - 6" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/2734f7b53379d86ac64fc40b09ac6e030fd113b0/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f6576702d746f703232322e6a7067" data-alt="Easy Video Player - 7" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/762246236cbd26cf23d00f6d5027d8024e583e15/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f455650205072657669657720322e6a7067" data-alt="Easy Video Player - 8" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/c544061940f90cfea80dc4a6a9df4d63657c3767/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f455650205072657669657720332e6a7067" data-alt="Easy Video Player - 9" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/b288c70ed2626a57bb8337401216a8e5b163b727/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f76722e6a7067" data-alt="Easy Video Player - 10" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/edcdee84e932721e7f109b34f74bd8eb1b4e82c3/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f7576702f3336302d702e6a7067" data-alt="Easy Video Player - 11" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/6d61fe70190fd66a1ad1992ec518e71458eb0891/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f776f6f2e6a7067" data-alt="Easy Video Player - 12" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/eb5dab6e1b14b4135f6811dd12f495ec7c963a41/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f455650205072657669657720342e6a7067" data-alt="Easy Video Player - 13" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/a70e22c7c1f4227ce0bab0abaaecc63a021e068a/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f6576702d746f703333332e6a7067" data-alt="Easy Video Player - 14" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/0a9541083b059eb010b578018f872012318d279c/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f455650205072657669657720362e6a7067" data-alt="Easy Video Player - 15" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/32a5f74d8b03828f5a327d3b23e5d53eda66c00e/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f455650205072657669657720372e6a7067" data-alt="Easy Video Player - 16" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/f2a23d732cf29ed66eb3c25c4d9af437dfde3685/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f455650205072657669657720382e6a7067" data-alt="Easy Video Player - 17" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/6411ab8233533159a90482ded18b2bc9000b97bb/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f455650205072657669657720392e6a7067" data-alt="Easy Video Player - 18" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/3361a3909fc3485727b0dbe9a2d14d8af13fd802/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f45565020507265766965772031302e6a7067" data-alt="Easy Video Player - 19" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/52fa6d51f2424adba3803829958487e14c1b1855/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f45565020507265766965772031312e6a7067" data-alt="Easy Video Player - 20" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/a29a812c265e059c58ee4106d70f7be2e3c53e7f/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f45565020507265766965772031322e6a7067" data-alt="Easy Video Player - 21" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/9fc3b0923699c598d704bbb88e6fbb516d3286f4/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f45565020507265766965772031332e6a7067" data-alt="Easy Video Player - 22" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/a79b771438873a67f800ecb60038e05616801694/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f45565020507265766965772031342e6a7067" data-alt="Easy Video Player - 23" class="lazy-load-img"></span> <span data-src="https://camo.envatousercontent.com/2fbce63cc5930e942600e9d417d95033bf7ccaa4/68747470733a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6576702f45565020507265766965772031352e6a7067" data-alt="Easy Video Player - 24" class="lazy-load-img"></span></p> <p><strong><h3 id="item-description__what-is-easy-video-player">What is Easy Video Player ?</h3></strong></p> <p>Easy Video Player is a powerful <strong>responsive video player</strong> that can play local video or audio, streaming videos from a server, mp3 / mp4,<strong> HLS </strong> / HTTP live streaming,<strong>Youtube</strong>,<strong>Vimeo</strong> , VR / 360°,<strong>google drive, openload / openload.co and other cloud platforms</strong> and much more. It only requires the<strong>mp4 format</strong> (the best and most used format on the web) and it will work on mobile devices and desktop machines no matter which browser is used. Packed with a huge amount of features like responsive layout, multiple instances manager, flexible skin,<strong>HTTP Live Streaming</strong> /<strong>HLS</strong> /<strong>m3u8</strong> video support, <strong>DASH MPEG</strong>,<strong>360 degree video</strong> / virtual reality / VR, share window, embed window,<strong>cuepoints</strong>, multiple<strong>subtitles,</strong> video quality selector, subtitle selector, private / password protect video, video annotations,<strong>chromecast</strong> support, google analytics,<strong>VAST</strong> (Digital Video Ad Serving Template) and <strong>VMAP</strong> (Digital Video Multiple Ad Playlist) advertisement,<strong>chromecast</strong> support,<strong>IMA</strong> (Google Interactive Media Ads) and much more, it makes it the best and most flexible video player available on sale. </p> <p><strong><h3 id="item-description__easy-video-player-main-features">Easy Video Player main features:</h3></strong></p> <p>Optional <strong>encrypt video source / path</strong>. Using this feature will not allow a user / software to see / steal the video source / path from the page source.</p> <p>Fail-safe / backup / second source, possibility to add a second source, if the first video source can’t play EVP will play the second source, <a href="https://www.youtube.com/watch?v=FEyjoH-wfZU" rel="nofollow">video tutorial here</a>.</p> <p>Thumbnails preview support. Please see <a href="https://webdesign-flash.ro/p/evp/hls.html" rel="nofollow">this example</a>.</p> <p>Live auto-generated video thumbnails, now is possible to auto-generate video preview thumbnails directly from video, <a href="https://webdesign-flash.ro/p/evp/thumbnails-preview-live.html" rel="nofollow">example here</a>, <a href="https://www.youtube.com/watch?v=3zU0pCtz2k4" rel="nofollow">video tutorial here</a>. This feature works with self hosted or external hosted mp4/video, HLS/m3u8, Google drive, Dropbox, Amazon S3 and more…</p> <p>Play mp4 video, mp3 audio or HLS/m3u8 files on your TV screen using Chromecast, the media can be controlled via the video player interface basically, the browser and the video player become a remote tv, <a href="https://webdesign-flash.ro/p/evp/chromecast.html" rel="nofollow">example here</a>, (please note currently HLS, youtube, Vimeo and advertisement are not supported).</p> <p>Resume / remember function which marks the last play position of the video when the browser is closed and remembers it when you come back to watch the video again.</p> <p>Optional <strong>vector based buttons icons</strong> using <strong>font awesome</strong>, <a href="https://webdesign-flash.ro/p/evp/vector-skin-dark.html" rel="nofollow">example here</a></p> <p>Mobile and desktop optimized .</p> <p>Support for <strong><strong>multiple video quality</strong></strong> and optional <strong>video quality selector</strong> similar to Youtube.</p> <p>Support for local video or audio, streaming video from a server or <strong>Youtube video</strong>.</p> <p>Support for <strong>audio</strong> files (.mp3).</p> <p><strong>Real time spectrum visualizer</strong> for audio / mp3 files with customizable color theme, <a href="https://webdesign-flash.ro/p/evp/spectrum.html" rel="nofollow">example here</a>.</p> <p>Support for <strong>subtitles</strong> files (.srt .vtt or .txt).</p> <p>Optional <strong>subtitles selector</strong>. EVP supports multiple subtitles, they can be set with ease and changed at runtime using an optional subtitle selector.</p> <p>Optional <strong>encrypt subtitles source / path</strong>. Using this feature will not allow a user / software to see / steal the subtitles source / path from the page source.</p> <p>Optional <strong>playback rate / speed selector</strong>. EVP supports multiple playback rates / speeds, they can be set with ease and changed at runtime using an optional playback rates / speeds selector.</p> <p>Optional go fullscreen on play, when the play button is clicked the player goes fullscreen <a href="https://webdesign-flash.ro/p/evp/go-full-screen-on-play.html" rel="nofollow">example here</a>.</p> <p>Custom context menu, when the right mouse button is clicked a custom menu appears that allows to copy the video URL / video URL at the current time or switch fullscreen /normal screen.</p> <p>Optional <strong>fill entire video screen</strong>, this feature will allow filling the gaps of the video player, you can have for example a real full-width player.</p> <p>Openload / openload.co, support. Please watch <a href="https://www.youtube.com/watch?v=2FtrcrrcIP0" rel="nofollow">this video tutorial</a> for more info.</p> <p>Google analytics support, the possibility to view how many times a video was played or downloaded, please see <a href="https://www.youtube.com/watch?v=JpABf-23it0" rel="nofollow">this video tutorial</a>.</p> <p>Youtube video quality buttons selectors from the video control bar. The available quality rates will be displayed in a cool way so you can select the desired quality for the playing video. The video player can play a <strong>HD video</strong> on desktop machines and a smaller video on mobile devices, this useful feature is optional, this means that the video player can play the same video source on all desktop machines or mobile devices.</p> <p>Support for <strong>360 degree panorama videos</strong> videos, <a href="https://webdesign-flash.ro/p/evp/360.html" rel="nofollow">example here</a>.</p> <p><strong>360 Immersive VR</strong> / <strong>virtual reality 360 videos </strong> and Cardboard mode support are added using WebXR, any Html5 video is supported including Mpeg Dash, HLS Native, and HLS.JS, turn your device into a virtual reality video machine, this feature allows using Cardboard goggles or VR hardware like Oculus Rift or HTC Vive to display a VR 360 video scene, <a href="https://webdesign-flash.ro/p/evp/vr.html" rel="nofollow">example here</a>.</p> <p>Support for <strong>green screen / transparent background </strong> videos, the possiblity to remove the green color from a video with a green, blue or any popular color used for this type of CGI effect background and replace it with transparency <a href="https://webdesign-flash.ro/p/evp/green-screen.html" rel="nofollow">example here</a>.</p> <p>Support for <strong>multiple instances</strong>.</p> <p><strong>Multiple instances manager</strong>, this is a great feature that allows automated control over all Easy Video Player instances. Once a video instance is playing the other instances can be set to pause or stop. For example if this feature is set to stop all instances will stop and interrupt the download process this way the page will not load more then one video at the time.</p> <p>Optional <strong>video poster</strong>, the poster is visible when the video player is stopped plus support for two poster sources one for desktop machines and one for mobile devices. Please note that a single source can be used for both for desktop machines and mobile devices.</p> <p>Optional <strong>pre-roll, mid-roll, post-roll / ads / advertisement</strong> video or image (similar to youtube ads with extra features). EVP supports unlimited ads they can be added and configured easily.</p> <p><strong>Non linear google adsense</strong> support, one or more non linear adsense ads can be set to run during video playback.</p> <p><strong>Interactive Media Ads SDKs – IMA SDK for HTML5</strong> and <strong>DFP / Google Doubleclick IMA tags</strong> support, which allows you to place Google Adsense for Video tags to stream video PreRoll Ads (linear), Mid-Roll, Post-Roll, VMAP+Bumper and Pods, or Non-Linear Banner/Text Ads (non-linear) with your self hosted videos, <a href="https://webdesign-flash.ro/p/evp/adsense.html" rel="nofollow">adsense example here</a> and <a href="https://webdesign-flash.ro/p/evp/vast.html" rel="nofollow">DFP, VAST, VMAP example here</a>.</p> <p>Optional <strong>commercial popup ads</strong> (similar to youtube popup ads are displayed). Multiple ads can be added for a video, also the show and hide time can be specified, for example, a popup ad commercial can be showed at the second 10 and hidden at second 40.</p> <p>Usage of the same Easy Video Player custom skin even for the Youtube videos.</p> <p><strong>Responsive</strong> layout.</p> <p><strong>Private</strong> / <strong>password protected videos</strong>, <a href="https://webdesign-flash.ro/p/evp/private.html" rel="nofollow">example here</a>.</p> <p><strong>HTTP Live Streaming</strong> /<strong> HLS</strong> / <strong>m3u8</strong> video support on all browsers mobile and desktop</p> <p>HLS multiple audio tracks support, <a href="https://webdesign-flash.ro/p/evp/hls-audio-tracks.html" rel="nofollow">example here</a>.</p> <p>Support for video / mp4 multiple audio tracks, please note that this feature is limited by browser support, browsers that do not have support for the HTMLMediaElement.audioTracks video property will not display the headphone button that allows changing the video audio track.</p> <p><strong>DASH MPEG</strong> / <strong>Dynamic Adaptive Streaming over HTTP</strong> / <strong>.mpd</strong> video support on all supported browsers mobile and desktop,</p> <p>Lazy scrolling/loading, the possibility to initialize EVP on scroll when the player is visible in the page, this way for example if the player is in a section of a webpage that is not visible it will not be initialized / play, instead EVP will be initialized / play only when the user is scrolling to that section in which the player is added.</p> <p>Optional popup advertisement window on pause, the source can be any web page, <a href="https://webdesign-flash.ro/p/evp/overlay-ads.html" rel="nofollow">example here</a>.</p> <p>Optional <strong>annotations</strong>, similar to youtube annotations but with full controll over the content and mobile support.</p> <p>Full <strong>HTML</strong> and <strong>CSS</strong> for the annotations content.</p> <p>Annotations <strong>start</strong> / <strong>show</strong> and <strong>stop</strong> / <strong>hide</strong> time can be easely sepcified.</p> <p><strong>VAST</strong> (Digital Video Ad Serving Template) and <strong>VMAP</strong> (Digital Video Multiple Ad Playlist) advertisement support, support for linear / nonlinear single or multiple (pods) video/audio (pre-roll, mid-roll, post-roll) ads and of course the option to create VAST playlists using VMAP, <a href="https://webdesign-flash.ro/p/evp/vast.html" rel="nofollow">example here</a>.</p> <p>Possibility to set <strong>VAST</strong> (Digital Video Ad Serving Template) start time in hh:mm:ss. This is an invaluable and unique feature only that EVP has since the <strong>VAST</strong> template doesn’t have any rule about when to play the ads and this is left to the video player publisher. This feature is added as a helper but VMAP can be used to created VAST playlists and ad breaks can be added at any desired time on the video timeline. Please watch <a href="https://youtu.be/LNdC59o-beg" rel="nofollow">this video tutorial</a> for more info.</p> <p>A to B video loop/ab loop, the option to loop a specific section/part of a video using two time/timestamp points, point a the start point and point b the endpoint, this points can be adjusted using the a to b loop controlbar.</p> <p>Optional <strong>keyboard support</strong> (<strong>F</strong>:fullscreen / normalscreen, <strong>LEFT/RIGHT ARROWS</strong>:skip video 5 seconds forward or backward, <strong>UP/DOWN ARROWS</strong>: volume up or volume down, <strong>M</strong>:mute/unmute, <strong>SPACE</strong>:play/pause)</p> <p>Optional annotations animations between the annotations states.</p> <p>Video <strong>cuepoints</strong>, EVP can call javascript functions or javascript code at a specified time during video playback.</p> <p>Use EVP as a <strong>video background</strong> and even controll it using the API, EVP can be used as a video background for any any HTML page, <a href="https://webdesign-flash.ro/p/evp/video-background.html" rel="nofollow">example here</a>.</p> <p><strong>HEX / CSS color support</strong>, the buttons colors can be modified with simple CSS by passing a hexadecimal color(ex: #FF0000) and even more, we have done it in a cool way that all graphics will retain the texture and at the same time apply the chosen color.</p> <p>Possibility to open a new page when the video has finished to play, it can open a new page in a different window or replace the page in which the player is running (_blank or _self)</p> <p>Multiples display types: responsive / fixed / fullscreen / popup…</p> <p>Support for sticky display type, please see <a href="https://webdesign-flash.ro/p/evp/sticky.html" rel="nofollow">this example</a>.</p> <p>Support for lightbox / modal display type, now it is possible to open EVP in a modal / lightbox window when the page loads or on user interaction, for example, a button or image click.</p> <p>Chromeless support, it can be used to create your own video player or as background video, <a href="https://webdesign-flash.ro/p/evp/chromecast.html" rel="nofollow">example here</a>.</p> <p><strong>Timestamp</strong> support in format of <strong>t=hours[h]minutes[m]seconds[s]</strong>, start the video at a specified time by setting a timestamp in the player page URL, please see <a href="https://webdesign-flash.ro/p/evp/timestamp.html#/?t=0m0h20s&e=0m0h40s" rel="nofollow">this example</a> and check the URL format it has a timestamp attached to it ex: <strong>t=0h0m20s</strong></p> <p>Optional custom <strong>watermark logo</strong>. The logo can be set to hide with the control bar or to always be visible, also the logo position is customizable.</p> <p>AutoHide controls bar, the video player can be set to autohide the controls bar after a number of seconds of inactivity.</p> <p>The video controls bar can be showed or hidden when the video is stopped or it hasn’t started.</p> <p>Click to play or pause, you can click on the video to play/pause the video.</p> <p>Powerful <strong>API</strong> included with example files, full set of API methods, including play, pause, stop, scrub with time, scrub with percent, volume and soooo much more.</p> <p><strong>Double click / double tap functionality</strong>left video side rewind 10 seconds, center video go fullscreen / normal screen, right video side go forward 10 seconds.</p> <p>Start volume value.</p> <p>Autoplay video with muted sound to comply with the browser <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes" rel="nofollow">autoplay policy</a>, <a href="https://webdesign-flash.ro/p/evp/autoplay.html" rel="nofollow">example here</a>..</p> <p>Possibility to <strong>start playing at a specified time</strong>.</p> <p>Option to allow only a logged in user to play / view the video, <a href="https://webdesign-flash.ro/p/evp/login.html" rel="nofollow">example here</a>.</p> <p>Loop.</p> <p>Big play button.</p> <p>Rewind 10 seconds button</p> <p>Play / pause button.</p> <p>Current and total time (optional).</p> <p>Volume button (optional).</p> <p>Volume scrubber (optional).</p> <p>share, embed, subtitles button (optional).</p> <p><strong>Fullscreen</strong> button (optional).</p> <p>Detailed <strong>documentation</strong> and sample files included.</p> <p>Optional <strong>keyboard support</strong>.</p> <p><strong>Eight skins</strong> included with the psd files.</p> <h3 id="item-description__what-our-clients-are-saying"><strong>What our clients are saying:</strong></h3> <p><span data-src="https://camo.envatousercontent.com/356aa45aa2a985a5ebae5ca532f42014e10838f8/687474703a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6d73707770312e706e67" data-alt="Easy Video Player - 25" class="lazy-load-img"></span> </p><p> <span data-src="https://camo.envatousercontent.com/cfcd4eec81010d99b95a79859bbeff953c40765b/687474703a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f6d73707770322e706e67" data-alt="Easy Video Player - 26" class="lazy-load-img"></span> </p><p> <span data-src="https://camo.envatousercontent.com/390d3b467051ecef8f9be2a687b451a2c60fda90/687474703a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f726c312e706e67" data-alt="Easy Video Player - 27" class="lazy-load-img"></span> </p><p> <span data-src="https://camo.envatousercontent.com/ad58874da5a8b84b86676accb82eb69150e28f4d/687474703a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f726c322e706e67" data-alt="Easy Video Player - 28" class="lazy-load-img"></span> </p><p> <span data-src="https://camo.envatousercontent.com/5c679964e5025b3d8b9e46f803138c85261d005c/687474703a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f727670332e706e67" data-alt="Easy Video Player - 29" class="lazy-load-img"></span> </p><p> <span data-src="https://camo.envatousercontent.com/155cf6836af3e20e4fae55dd3d7fb1805c204db5/687474703a2f2f77656264657369676e2d666c6173682e726f2f696d616765732f727670312e706e67" data-alt="Easy Video Player - 30" class="lazy-load-img"></span></p> <h3 id="item-description__updates-log"><strong>Updates log:</strong></h3> <h3 id="item-description__version-9-3-1-release-date-25-01-2024">Version 9.3.1 Release Date 25.01.2024</h3> <ul> <li>Update the HLS library to the latest version 1.51</li> </ul> <h3 id="item-description__version-9-3-release-date-18-08-2023">Version 9.3 Release Date 18.08.2023</h3> <ul> <li>Update Google Analytics to version 4, <a href="https://www.youtube.com/watch?v=JpABf-23it0" rel="nofollow">video tutorial here</a>.</li> </ul> <h3 id="item-description__version-9-2-release-date-27-05-2023">Version 9.2 Release Date 27.05.2023</h3> <ul> <li>Removed YouTube UI elements (Title/Share/Watch later/Related videos/Logo), <a href="https://webdesign-flash.ro/p/evp/youtube.html" rel="nofollow">example here</a>.</li> <li>Added subtitles support for IOS if the native player is used, <a href="https://webdesign-flash.ro/p/evp/multiple-subtitles.html" rel="nofollow">example here</a>.</li> <li>Added support for Youtube 360 videos, <a href="https://webdesign-flash.ro/p/evp/360.html" rel="nofollow">example here</a>.</li> </ul> <h3 id="item-description__version-9-1-release-date-29-03-2023">Version 9.1 Release Date 29.03.2023</h3> <ul> <li>Added HLS multiple audio tracks support, <a href="https://webdesign-flash.ro/p/evp/hls-audio-tracks.html" rel="nofollow">example here</a>.</li> <li>Added support for video / mp4 multiple audio tracks, please note that this feature is limited by browser support, browsers that do not have support for the HTMLMediaElement.audioTracks video property will not display the headphone button that allows changing the video audio track.</li> <li>Added playback rate speed for HLS and DASH MPEG.</li> <li>Added classes to all buttons.</li> </ul> <h3 id="item-description__version-9-0-release-date-18-03-2023">Version 9.0 Release Date 18.03.2023</h3> <li> Added <strong>360 Immersive VR</strong> / <strong>virtual reality 360 videos </strong> and Cardboard mode support are added using WebXR, any Html5 video is supported including Mpeg Dash, HLS Native, and HLS.JS, turn your device into a virtual reality video machine, this feature allows using Cardboard goggles or VR hardware like Oculus Rift or HTC Vive to display a VR 360 video scene, <a href="https://webdesign-flash.ro/p/evp/vr.html" rel="nofollow">example here</a>. </li> <h3 id="item-description__version-8-5-release-date-15-03-2023">Version 8.5 Release Date 15.03.2023</h3> <li>Imporved HLS functionality to handle quality switch automatically, using heuristics based on fragment loading bitrate and quality level bandwidth exposed in the variant manifest, basically the player will choose the best possible quality based on user bandwidth and player size.</li> <li>Added HLS quality level buttons, when playing an HLS video file the quality levels will be generated and the user will be able to select the quality from the quality selector buttons.</li> <li>Added a way to remove share unwanted buttons from the share window.</li> <h3 id="item-description__version-8-4-release-date-09-02-2023">Version 8.4 Release Date 09.02.2023</h3> <ul> <li>FIxed Youtube bug that prevented the video to start playing.</li> <li>FIxed Vimeo bug that prevented the video to play with sound.</li> </ul> <h3 id="item-description__version-8-3-release-date-01-11-2020">Version 8.3 Release Date 01.11.2020</h3> <ul> <li>Added Chromecast support for HLS/m3u8 – HTTP Live Streaming, please note, the m3u8 has to be CORS enabled to play on your domain or on all domains *, <a href="https://www.youtube.com/watch?v=Nyfa2PDAbtQ" rel="nofollow">video tutorial here</a>.</li> </ul> <h3 id="item-description__version-8-2-release-date-28-09-2020">Version 8.2 Release Date 28.09.2020</h3> <ul> <li>Added live auto-generated video thumbnails, now is possible to auto-generate video preview thumbnails directly from video, <a href="https://webdesign-flash.ro/p/evp/thumbnails-preview-live.html" rel="nofollow">example here</a>, <a href="https://www.youtube.com/watch?v=3zU0pCtz2k4" rel="nofollow">video tutorial here</a>. This feature works with self hosted or external hosted mp4/video, HLS/m3u8, Google drive, Dropbox, Amazon S3 and more…</li> <li>Modified autoplay video with muted sound to comply with the browser <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes" rel="nofollow">autoplay policy</a>, <a href="https://www.webdesign-flash.ro/p/evp/autoplay.html" rel="nofollow">example here</a>.</li> <li>Fixed Vimeo bug that required two clicks before the first video could play, now is working with a single click on the play button. </li> <li>Improved vector skin to look more sharp specially on desktop screens.</li> </ul> <h3 id="item-description__version-8-1-release-date-27-05-2020">Version 8.1 Release Date 27.05.2020</h3> <ul> <li>Added Fail-safe / backup / second source, possibility to add a second source, if the first video source can’t play EVP will play the second source, <a href="https://www.youtube.com/watch?v=FEyjoH-wfZU" rel="nofollow">video tutorial here</a>.</li> <li>Added Play only if logged in dedicated window, <a href="https://webdesign-flash.ro/p/evp/login.html" rel="nofollow">example here</a>.</li> <li>Optimized the enitre advertisement code.</li> </ul> <h3 id="item-description__version-8-0-release-date-02-04-2020">Version 8.0 Release Date 02.04.2020</h3> <ul> <li>Added support for VAST WRAPPER.</li> <li>Added support for DASH MPEG live streaming.</li> <li>Added support for fill entire video poster, this feature will allow to fill the gaps of the video player when the poster is visible.</li> <li>Added support for autoplay when the lightbox is opened (not supported for Youtube and Vimeo). </li> <li>Added support to close the lighbox after the video finishes playing.</li> <li>Reduced file size and increase overall performance.</li> <li>Added support for Google Drive video (.mp4) and audio (.mp3) using Google Drive API. Using this method the video or audio used from Google Drive will work on all devices without any restrictions or expiring links <a href="https://www.youtube.com/watch?v=YK3YucN2PYc" rel="nofollow">video tutorial here</a>.</li> <li>Improved overall design and fix various bugs.</li> <li>Optimized skip button size for mobile phones.</li> <li>Optimized subtitle display, I have rewritten the entire subtitle engine to look perfect on both PC and mobile as well, now it is also possible to add media queries to fine-tune the subtitle display on a small or larger screen.</li> </ul> <h3 id="item-description__version-7-9-release-date-26-06-2019">Version 7.9 Release Date 26.06.2019</h3> <ul> <li>Added support for <strong>VMAP</strong> (Digital Video Multiple Ad Playlist), this is very useful to create a VAST playlist and adding ad breaks at specified times, if you are interested please read more about this <a href="https://www.iab.com/guidelines/digital-video-multiple-ad-playlist-vmap-1-0-1/" rel="nofollow">here.</a> </li> <li>Added <strong>Interactive Media Ads SDKs – IMA SDK for HTML5</strong> and <strong>DFP / Google Doubleclick IMA tags</strong> support, which allows you to place Google Adsense for Video tags to stream video PreRoll Ads (linear), Mid-Roll, Post-Roll, VMAP+Bumper and Pods, or Non-Linear Banner/Text Ads (non-linear) with your self hosted videos, <a href="https://webdesign-flash.ro/p/evp/adsense.html" rel="nofollow">adsense example here</a> and <a href="https://webdesign-flash.ro/p/evp/vast.html" rel="nofollow">DFP, VAST, VMAP example here</a>.</li> <li>Improved the getCurrentTime and getTotalTime API methods, now it is possible to return the video current time and video duration in text format(hh:mm:ss), seconds format or milliseconds format (more info in the documentation). </li> </ul> <h3 id="item-description__version-7-8-release-date-16-06-2019">Version 7.8 Release Date 16.06.2019</h3> <ul> <li>Added Chromecast support, play mp4 video or mp3 audio on your TV screen using chromecast, the media can be controlled via the player interface, basically the browser and the player become a remote tv, <a href="https://webdesign-flash.ro/p/evp/chromecast.html" rel="nofollow">example here</a>, (please note currently HLS, youtube, vimeo and advertisement are not supported).</li> <li>Added autoplay on both PC / OS (desktop) and autoplay on mobile devices (Android / IOS), please note that on mobile the video starts with volume set to zero / muted, (it is the only possible to make this work), the volume can be set at anytime after the video has started to play, <a href="https://webdesign-flash.ro/p/evp/autoplay.html" rel="nofollow">example here</a>.</li> <p>Added direct download on an Android devices, now if a video is downloaded it will be saved on the device in the download folder just like on a desktop machine (PC / OS). </p> <li>Added support for .vtt subtitles.</li> <li>Added optional go fullscreen on play, when the play button is clicked the player goes fullscreen <a href="https://webdesign-flash.ro/p/evp/go-full-screen-on-play.html" rel="nofollow">example here</a>.</li> <li>Added volume scrubber informational tooltip.</li> </ul> <h3 id="item-description__version-7-7-release-date-01-04-2019">Version 7.7 Release Date 01.04.2019</h3> <ul> <li>Added custom context menu, when the right mouse button is clicked a custom menu appears that allows to copy the video URL / video URL at current time or switch fullscreen /normalscreen. </li> </ul> <h3 id="item-description__version-7-6-release-date-25-03-2019">Version 7.6 Release Date 25.03.2019</h3> <ul> <li>Added visualization for double click rewind / go forward 10 seconds.</li> </ul> <h3 id="item-description__version-7-5-release-date-23-03-2019">Version 7.5 Release Date 23.03.2019</h3> <ul> <li> <strong>Double click / double tap functionality</strong>left video side rewind 10 seconds, center video go fullscreen / normal screen, right video side go forward 10 seconds.</li> </ul> <h3 id="item-description__version-7-4-release-date-17-03-2019">Version 7.4 Release Date 17.03.2019</h3> <ul> <li>Added resume / remember function which marks the last play position of the video when the browser is closed and remembers it when you come back to watch video again.</li> <li>Added support for Thumbnails preview. Please see <a href="https://webdesign-flash.ro/p/evp/thumbnails-preview.html" rel="nofollow">this example</a> </li> <li>Added support for openload / openload.co. Please watch <a href="https://www.youtube.com/watch?v=2FtrcrrcIP0" rel="nofollow">this video tutorial</a> for more info.</li> <li>Added an extra event handler playback rate event. </li> <li>Added the option to chose if the video is played inline or in the default player on IOS devices.</li> <li>Added option to use or not the player cotroler for Vimeo videos. </li> <li>Added an option to close the lightbox when clicked outside the player area on the trasparent background.</li> <li>Fixed autoplay issue related to chrome autoplay policy, the video / audio will start playing when the page is loaded if autoplay is set to yes.</li> <li>Replaced copy embed link and embed code form flash based to simple javacsript making it compatible with all devices.</li> </ul> <h3 id="item-description__version-7-3-release-date-16-12-2018">Version 7.3 Release Date 16.12.2018</h3> <ul> <li>Created a custom vector (.svg) font specially made for EVP, pelase check out <a href="https://webdesign-flash.ro/p/evp/vector-skin-dark.html" rel="nofollow">this example</a>.</li> <li>Support for sticky mode when scrolling up/down through the page this way UVP will always be visible. If the video player is not in the browser viewport area, the sticky version will take over at the bottom of the page. Please check out <a href="https://webdesign-flash.ro/p/evp/modern-skin-dark.html" rel="nofollow">this example</a>, please scroll the page down to view this feature in action.</li> </ul> <h3 id="item-description__version-7-2-release-date-23-11-2019">Version 7.2 Release Date 23.11.2019</h3> <ul> <li>Added A to B video loop / ab loop, option to loop a specific section / part of a video using two time / timestamp points, point a the start point and point b the end point, this points can be adjusted using the a to b loop controlbar.</li> <li>Added <strong>timestamp</strong> support in format of <strong>e=hours[h]minutes[m]seconds[s]</strong>, stop the video at a specified time by setting a timestamp in the player page URL.</li> <li>Replaced video preloader with a more simple and elegant circular preloader.</li> </ul> <h3 id="item-description__version-7-1-release-date-01-09-2018">Version 7.1 Release Date 01.09.2018</h3> <ul> <li>Added optional <strong>vector based buttons icons</strong> using <strong>font awesome</strong>, <a href="https://webdesign-flash.ro/p/evp/vector-skin-dark.html" rel="nofollow">example here</a> </li> </ul> <h3 id="item-description__version-7-0-release-date-24-08-2018">Version 7.0 Release Date 24.08.2018</h3> <ul> <li>Added <strong>timestamp</strong> support in format of <strong>t=hours[h]minutes[m]seconds[s]</strong>, start the video at a specified time by setting a timestamp in the player page URL, please see <a href="https://webdesign-flash.ro/p/evp/timestamp.html#/?t=0m0h20s&e=0m0h40s" rel="nofollow">this example</a> and check the URL format it has a timestamp attached to it ex: <strong>t=0h0m20s</strong>.</li> </ul> <h3 id="item-description__version-6-9-release-date-17-08-2018">Version 6.9 Release Date 17.08.2018</h3> <ul> <li>improved subtitle functionality, now the subtitles sections are read an displayed with millisecond precision.</li> </ul> <h3 id="item-description__version-6-8-release-date-29-07-2018">Version 6.8 Release Date 29.07.2018</h3> <ul> <li>Added the option to disable the main scrubber, only show the current time and show a live icon for HLS (HTTP Live Streaming) live streaming.</li> </ul> <h3 id="item-description__version-6-7-release-date-29-07-2018">Version 6.7 Release Date 29.07.2018</h3> <ul> <li>Added google analytics support, the possibility to view how many times a video was played or downloaded, please see <a href="https://www.youtube.com/watch?v=9pzWmgumTzo&t=5s" rel="nofollow">this video tutorial</a>.</li> <li>Added support for sticky display type, please see <a href="https://webdesign-flash.ro/p/evp/sticky.html" rel="nofollow">this example</a> </li> <li>Added support for google adsense advertisement.</li> <li>Added support for lightbox / modal display type, now it is possible to open EVP in a modal / lightbox window when the page loads or on user interaction, for example a button or image click.</li> <li>Added optional rewind 10 seconds button.</li> <li>Added the possibility to set a start time to VAST pre, mid, post roll advertisement, by default the VAST template dosen’t include this feature so it is very useful if you have multiple video ads in a VAST XML file , now it is possible to set a start time for each the video files. Please watch <a href="https://www.youtube.com/watch?v=LNdC59o-beg&feature=youtu.be" rel="nofollow">this video tutorial</a> for more info.</li> <li>Added the possibility to open a new page when the video has finished to play, it can open a new page in a different window or replace the page in which the player is running (_blank or _self).</li> </ul> <h3 id="item-description__version-6-6-release-date-29-06-2018">Version 6.6 Release Date 29.06.2018</h3> <ul> <li>Added “videoStartBehaviour”. If set to pause and more then one instance is used all instances will pause except the current playing instance otherwise if set to stop all instances will stop playing and stop the download process except the current playing instance. If default is used when playing one instance will not stop or pause other instances.</li> </ul> <h3 id="item-description__version-6-5-release-date-22-06-2018">Version 6.5 Release Date 22.06.2018</h3> <ul> <li>Replaced the preloader with a more user grendly circular CSS preloader.</li> <li>Added support to play pro account vimeo videos and also the option to use the EVP default controller to control the vimeo video.</li> </ul> <h3 id="item-description__version-6-4-release-date-12-06-2018">Version 6.4 Release Date 12.06.2018</h3> <ul> <li>Added optional <strong>encrypt subtitles source / path</strong>. Using this feature will not allow a user / software to see / steal the subtitles source / path from the page source.</li> </ul> <h3 id="item-description__version-6-3-release-date-10-06-2018">Version 6.3 Release Date 10.06.2018</h3> <ul> <li>Added <strong>VAST</strong> “<strong>Video Ad Serving Template</strong>” support, currently only support for linear single or multiple (pods) video/videos (pre-roll, mid-roll, post-roll) ads. Please check out our example <a href="https://www.webdesign-flash.ro/p/evp/vast.html" rel="nofollow">single pre-roll video ad example</a>.</li> <li>Added the possibility to set VAST start time in hh:mm:ss. This is an invaluable and unique feature only that EVP has since the VAST template dosen’t have any rule about when to play the ads and this is left to the video player publisher.</li> <li>Added optional <strong>keyboard support</strong> (<strong>F</strong>:fullscreen / normalscreen, <strong>LEFT/RIGHT ARROWS</strong>:skip video 5 seconds forward or backward, <strong>UP/DOWN ARROWS</strong>: volume up or volume down, <strong>M</strong>:mute/unmute, <strong>SPACE</strong>:play/pause)</li> </ul> <h3 id="item-description__version-6-2-release-date-08-12-2017">Version 6.2 Release Date 08.12.2017</h3> <ul> <li>Added lazy scrolling / loading, the posibility to initialize EVP on scroll when the player is visible in the page, this way for example if the player is in a section of a webpage that is not visible it will not be initialized / play, instead EVP will be initalized / play only when the user is scrolling to that section in which the player is added.</li> <li>Added optional popup advertisement window on pause, the source can be any web page, <a href="https://webdesign-flash.ro/p/evp/overlay-ads.html" rel="nofollow">example here</a>.</li> <li>Changed HLS engine now it runs on pure javascript no flash player required anymore, this will make sure that EVP will run on all browsers without any issues.</li> <li>The option to disable / not show the info / error window.</li> <li>Improved performance and loading time, the youtube, vimeo, htls, 3d 360 library, audio, spectrum library will only be loaded if they are used and this is done automatically internaly by the player code .</li> </ul> <h3 id="item-description__version-6-1-release-date-06-01-2018">Version 6.1 Release Date 06.01.2018</h3> <ul> <li>Added support for iframe pre-roll,middle-roll or post-roll advertisement, it is possible to load a webpage as an add at a specified time during video playback.</li> </ul> <h3 id="item-description__version-6-0-release-date-27-10-2017">Version 6.0 Release Date 27.10.2017</h3> <ul> <li>Enabled the playback rate / speed on mobile devices.</li> </ul> <h3 id="item-description__version-5-9-release-date-15-10-2017">Version 5.9 Release Date 15.10.2017</h3> <ul> <li>Added the logic to allow only a logged in user to play / view the video.</li> </ul> <h3 id="item-description__version-5-8-release-date-27-09-2017">Version 5.8 Release Date 27.09.2017</h3> <ul> <li>Added support for encrypted video paths, for example the path content/videos/fwd-720p.mp4 will be encrypted to encrypt:70de891f83b42a958770b738fd3b66f2 this way it will be impossible to steal the video by crawling the page source.</li> </ul> <h3 id="item-description__version-5-7-release-date-26-09-2017">Version 5.7 Release Date 26.09.2017</h3> <ul> <li>Private password protected videos, <a href="https://webdesign-flash.ro/p/evp/private.html" rel="nofollow">example here</a>.</li> <li>Optional start at time and end at time, EVP can be set to play or stop at a specific time.</li> </ul> <h3 id="item-description__version-5-6-release-date-18-09-2017">Version 5.6 Release Date 18.09.2017</h3> <ul> <li>Added in the documentation detailed tutorial about how to get the google drive video (mp4) or audio (mp4) source.</li> </ul> <h3 id="item-description__version-5-5-release-date-16-09-2017">Version 5.5 Release Date 16.09.2017</h3> <ul> <li>Fixed bug related to the API method setPosterSource(), before the update when using this method the poster image was distorted.</li> </ul> <h3 id="item-description__version-5-4-release-date-08-09-2017">Version 5.4 Release Date 08.09.2017</h3> <ul> <li>Added support for touch screen enabled laptops, it will work with the mouse or with touch.</li> </ul> <h3 id="item-description__version-5-3-release-date-30-08-2017">Version 5.3 Release Date 30.08.2017</h3> <ul> <li>Support for green screen / transparent background videos, the possibility to remove the green color from a video with a green, blue or any popular color used for this type of CGI effect background and replace it with transparency <a href="https://webdesign-flash.ro/p/evp/green-screen.html" rel="nofollow">example here</a>. </li> <li>New green screen tolerance fine tuning to allow better control over the green pixels removal.</li> <li>Added the option to remove the video preloader.</li> <li>Added the option to remove the double click / double tap to go fullscreen.</li> </ul> <h3 id="item-description__version-5-2-release-date-25-08-2017">Version 5.2 Release Date 25.08.2017</h3> <ul> <li>Added support for audio files (.mp3).</li> <li>Added optional real time spectrum visualizer for audio / mp3 files with customizable color theme <a href="https://webdesign-flash.ro/p/evp/spectrum.html" rel="nofollow">example here</a>.</li> </ul> <h3 id="item-description__version-5-1-release-date-23-07-2017">Version 5.1 Release Date 23.07.2017</h3> <ul> <li>Added optional playback rate / speed selector. EVP supports multiple playback rates / speeds, they can be set with ease and changed at runtime using an optional playback rates / speeds selector.</li> </ul> <h3 id="item-description__version-5-0-release-date-21-07-2017">Version 5.0 Release Date 21.07.2017</h3> <ul> <li>Added the possibility to resize the poster so that it will fill the entire video screen.</li> </ul> <h3 id="item-description__version-4-9-release-date-20-07-2017">Version 4.9 Release Date 20.07.2017</h3> <ul> <li>Video cuepoints, EVP can call javascript functions or javascript code at a specified time during video playback.</li> </ul> <h3 id="item-description__version-4-8-release-date-26-06-2017">Version 4.8 Release Date 26.06.2017</h3> <ul> <li>Support for 360 degree / virtual reality / VR videos.</li> </ul> <h3 id="item-description__version-4-7-release-date-26-06-2017">Version 4.7 Release Date 26.06.2017</h3> <ul> <li>Added HTTP Live Streaming / HLS / m3u8 video support on all browsers mobile and desktop. On the browsers that dosen’t have native HLS support adobe flash player is used.</li> </ul> <h3 id="item-description__version-4-6-release-date-20-05-2017">Version 4.6 Release Date 20.05.2017</h3> <ul> <li>Optional pre-roll, mid-roll, post-roll / ads / advertisement video or image (similar to youtube ads with extra features). EVP supports unlimited ads they can be added and configured easily.</li> </ul> <h3 id="item-description__version-4-5-release-date-16-05-2017">Version 4.5 Release Date 16.05.2017</h3> <ul> <li>Added optional download video button.</li> </ul> <h3 id="item-description__version-4-4-release-date-06-05-2017">Version 4.4 Release Date 06.05.2017</h3> <ul> <li>Added support for multiple video quality and optional video quality selector similar to Youtube.</li> <li>Added optional subtitles selector. EVP supports now multiple subtitles, they can be set with ease and changed at run time using an optional subtitle selector.</li> </ul> <h3 id="item-description__version-4-3-release-date-24-03-2017">Version 4.3 Release Date 24.03.2017</h3> <ul> <li>Improved functionality on IOS (Iphone) now the video plays inline just like on any other mobile device, it will not go full screen on play, this way the functionality is exactly the same on all mobile devices.</li> <li>Added optional annotations, similar to youtube annotations but with full control over the content and mobile support.</li> <li> Optional annotations positioning tool.</li> <li>Full HTML and CSS for the annotations content.</li> <li>Annotations start / show and stop / hide time can be easely specified..</li> <li> Optional annotations animations between the annotations states.</li> <li> Added option to be able to scrub the video at a specified time at first play.</li> <li> Added API method to scrub the video at a specified time.</li> </ul> <h3 id="item-description__version-4-2-release-date-24-03-2017">Version 4.2 Release Date 24.03.2017</h3> <ul> <li>Optional fill entire video screen, this feature will allow to fill the gaps of the video player, you can have for example a real full width player.</li> <li>Use EVP as a video background and even controll it using the API, EVP can be used as a video background for any any HTML page, <a href="https://webdesign-flash.ro/p/evp/video-background.html" rel="nofollow">example here</a>.</li> <li>HEX / CSS color support, the buttons colors can be modified with simple CSS by passing a hexadecimal color(ex:#FF0000) and even more, we have done it in a cool way that all graphics will retain the texture and at the same time apply the chosen color.</li> <li>Added posibility to modify volume on mobile devices</li> </ul> <h3 id="item-description__version-4-1-release-date-28-11-2016">Version 4.1 Release Date 28.11.2016</h3> <ul> <li>Added support for optional pop-up commercial windows.</li> <li>Fixed some rendering glitches in the classic skins.</li> </ul> <h3 id="item-description__version-4-0-release-date-15-02-2016">Version 4.0 Release Date 15.02.2016</h3> <ul> <li>Added support for optional subtitles.</li> <li>Added support for Vimeo videos.</li> <li>Improved share window.</li> </ul> <h3 id="item-description__version-3-2-release-date-22-08-2015">Version 3.2 Release Date 22.08.2015</h3> <ul> <li>Improved interaction and improved overall performance on WIN 10 / IE Edge.</li> <li>Fixed bug related to autoplay if the Youtube player is disabled.</li> <li>Added support for Youtube 4K videos 1440p & 2160p.</li> </ul> <h3 id="item-description__version-3-1-release-date-26-07-2015">Version 3.1 Release Date 26.07.2015</h3> <ul> <li>Fixed a possible conflict issue with the Youtube API.</li> <li>Fixed a video time display bug.</li> </ul> <h3 id="item-description__version-3-0-release-date-30-08-2014">Version 3.0 Release Date 30.08.2014</h3> <ul> <li>Added support for ads / advertisement video (similar to youtube ads).</li> <li>Added a new display type “afterParent”, this display type allows the player to resize based on the parent width and height.</li> <li>Improved fullscreen functionality.</li> <li>improved documentation.</li> </ul> <h3 id="item-description__version-2-2-release-date-12-06-2014">Version 2.2 Release Date 12.06.2014</h3> <ul> <li>Fixed bug caused by Youtube API.</li> </ul> <h3 id="item-description__version-2-1-release-date-10-05-2014">Version 2.1 Release Date 10.05.2014</h3> <ul> <li>Fixed bugs related to Opera and Safari on Windows (the Youtube API was initialized inconsistently).</li> <li>Added remove cursor in full screen mode when the video control bar is hiding.</li> <li>Improved video scrubber functionality (the scrubber is always visible regardless of window size).</li> <li>Added autoScale feature (useful when resizing the player)</li> <li>Added a 3rd option for the right-click context menu, now it can also have the browser default value.</li> </ul> <h3 id="item-description__version-2-0-release-date-16-04-2014">Version 2.0 Release Date 16.04.2014</h3> <ul> <li>Fixed iphone bug (the video player couldn’t start playing with a mp4 video).</li> <li>Added embed & share.</li> </ul> <h3 id="item-description__wordpress-plugin-version"><strong>Wordpress Plugin version:</strong></h3> <p>IF YOU NEED THE WORDPRESS PLUGIN VERSION FOR THIS PRODUCT, YOU CAN DOWNLOAD IT FROM HERE : <a href="https://codecanyon.net/item/easy-video-player-wordpress-plugin/8537670">http://codecanyon.net/item/easy-video-player-wordpress-plugin/8537670</a></p> <p><a href="https://codecanyon.net/item/easy-video-player-wordpress-plugin/8537670"><span data-src="https://camo.envatousercontent.com/2a69da90d7bd02f5328069cb7ed51d311ea4779b/68747470733a2f2f302e73332e656e7661746f2e636f6d2f66696c65732f3130303731363635392f62616e6e65722e6a7067" data-alt="Easy Video Player - 31" class="lazy-load-img"></span></a></p> <p><a href="https://codecanyon.net/item/fwd-mega-bundle/19117054"><span data-src="https://camo.envatousercontent.com/52b5caf365c05d6baaaa27cb8d344229afc7477c/687474703a2f2f7777772e77656264657369676e2d666c6173682e726f2f696d616765732f2f6d6262616e6e65722e6a7067" data-alt="Easy Video Player - 32" class="lazy-load-img"></span></a> </p></div> </div> <div class="js-item-description-toggle item-description-toggle"> <a class="item-description-toggle__link is-hidden" href="#"> <span>Show More <i class="e-icon -icon-chevron-down"></i></span> <span class="item-description-toggle__less">Show Less <i class="e-icon -icon-chevron-down -rotate-180"></i></span> </a> </div> </div> </div> <section data-view="recommendedItems" data-url="/item/easy-video-player/7152281/recommended_items" id="recommended_items"> </section> <section class="related-by-author h-my2 h-pb1"> <h2 class="t-heading -size-xs -weight-normal">More items by FWDesign</h2> <div class="related-by-author__list h-py1"> <ul class="item-thumbnail-carousel--item-page overflow" data-analytics-view-payload="{"eventName":"view_item_list","eventType":"user","ecommerce":{"currency":"USD","item_list_name":"Item page: More items by this author","items":[{"affiliation":"codecanyon","item_id":55449680,"item_name":"Shader Slider WordPress \u0026 WooCommerce Plugin","item_brand":"FWDesign","item_category":"wordpress","item_category2":"interface-elements","item_category3":"sliders","price":"29","quantity":1,"index":1},{"affiliation":"codecanyon","item_id":53968378,"item_name":"Easy 3D Model Viewer WordPress \u0026 WooCommerce Plugin","item_brand":"FWDesign","item_category":"wordpress","item_category2":"utilities","price":"69","quantity":1,"index":2},{"affiliation":"codecanyon","item_id":50244401,"item_name":"Easy 3D Model Viewer","item_brand":"FWDesign","item_category":"javascript","item_category2":"media","price":"59","quantity":1,"index":3},{"affiliation":"codecanyon","item_id":48353558,"item_name":"Plasmic Audio Player WordPress \u0026 WooCommerce Plugin","item_brand":"FWDesign","item_category":"wordpress","item_category2":"media","price":"69","quantity":1,"index":4},{"affiliation":"codecanyon","item_id":47531679,"item_name":"Plasmic Audio Player","item_brand":"FWDesign","item_category":"javascript","item_category2":"media","price":"59","quantity":1,"index":5},{"affiliation":"codecanyon","item_id":43836723,"item_name":"Spectrum Audio Player WordPress \u0026 WooCommerce Plugin","item_brand":"FWDesign","item_category":"wordpress","item_category2":"media","price":"59","quantity":1,"index":6},{"affiliation":"codecanyon","item_id":43752119,"item_name":"Spectrum Audio Player","item_brand":"FWDesign","item_category":"javascript","item_category2":"media","price":"49","quantity":1,"index":7}]}}"> <li class="item-thumbnail-container"> <div class="item-thumbnail__image"> <a data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","item_id":55449680,"item_name":"Shader Slider WordPress \u0026 WooCommerce Plugin","item_brand":"FWDesign","item_category":"wordpress","item_category2":"interface-elements","item_category3":"sliders","price":"29","quantity":1}]}}" href="https://codecanyon.net/item/shader-slider-wordpress-woocommerce-plugin/55449680"><span class="lazy-load-img" data-src="https://s3.envato.com/files/544558799/Thumbnail%20WP.png" data-border="0" data-alt="Shader Slider WordPress & WooCommerce Plugin - CodeCanyon Item for Sale" data-title="Shader Slider WordPress & WooCommerce Plugin" data-height="80" data-width="80" data-class="landscape-image-magnifier preload no_preview" data-data-preview-width="" data-data-preview-height="" data-data-preview-url="https://s3.envato.com/files/544558800/preview.jpg" data-data-item-name="Shader Slider WordPress & WooCommerce Plugin" data-data-item-author="FWDesign" data-data-item-id="55449680" data-data-item-category="WordPress / Interface Elements / Sliders" data-data-item-cost="29"></span></a> </div> </li> <li class="item-thumbnail-container"> <div class="item-thumbnail__image"> <a data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","item_id":53968378,"item_name":"Easy 3D Model Viewer WordPress \u0026 WooCommerce Plugin","item_brand":"FWDesign","item_category":"wordpress","item_category2":"utilities","price":"69","quantity":1}]}}" href="https://codecanyon.net/item/easy-3d-model-viewer-wordpress-plugin/53968378"><span class="lazy-load-img" data-src="https://s3.envato.com/files/510828100/thumbnail.png" data-border="0" data-alt="Easy 3D Model Viewer WordPress & WooCommerce Plugin - CodeCanyon Item for Sale" data-title="Easy 3D Model Viewer WordPress & WooCommerce Plugin" data-height="80" data-width="80" data-class="landscape-image-magnifier preload no_preview" data-data-preview-width="" data-data-preview-height="" data-data-preview-url="https://s3.envato.com/files/510828101/Preview%20image.jpg" data-data-item-name="Easy 3D Model Viewer WordPress & WooCommerce Plugin" data-data-item-author="FWDesign" data-data-item-id="53968378" data-data-item-category="WordPress / Utilities" data-data-item-cost="69"></span></a> </div> </li> <li class="item-thumbnail-container"> <div class="item-thumbnail__image"> <a data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","item_id":50244401,"item_name":"Easy 3D Model Viewer","item_brand":"FWDesign","item_category":"javascript","item_category2":"media","price":"59","quantity":1}]}}" href="https://codecanyon.net/item/easy-3d-model-viewer/50244401"><span class="lazy-load-img" data-src="https://s3.envato.com/files/483855925/Thumbnail.png" data-border="0" data-alt="Easy 3D Model Viewer - CodeCanyon Item for Sale" data-title="Easy 3D Model Viewer" data-height="80" data-width="80" data-class="landscape-image-magnifier preload no_preview" data-data-preview-width="" data-data-preview-height="" data-data-preview-url="https://s3.envato.com/files/483855926/prview.jpg" data-data-item-name="Easy 3D Model Viewer" data-data-item-author="FWDesign" data-data-item-id="50244401" data-data-item-category="JavaScript / Media" data-data-item-cost="59"></span></a> </div> </li> <li class="item-thumbnail-container"> <div class="item-thumbnail__image"> <a data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","item_id":48353558,"item_name":"Plasmic Audio Player WordPress \u0026 WooCommerce Plugin","item_brand":"FWDesign","item_category":"wordpress","item_category2":"media","price":"69","quantity":1}]}}" href="https://codecanyon.net/item/plasmic-audio-player-wordpress-plugin/48353558"><span class="lazy-load-img" data-src="https://s3.envato.com/files/468634675/Thumbnail%20WP.png" data-border="0" data-alt="Plasmic Audio Player WordPress & WooCommerce Plugin - CodeCanyon Item for Sale" data-title="Plasmic Audio Player WordPress & WooCommerce Plugin" data-height="80" data-width="80" data-class="landscape-image-magnifier preload no_preview" data-data-preview-width="" data-data-preview-height="" data-data-preview-url="https://s3.envato.com/files/468634676/Preview%20image.jpg" data-data-item-name="Plasmic Audio Player WordPress & WooCommerce Plugin" data-data-item-author="FWDesign" data-data-item-id="48353558" data-data-item-category="WordPress / Media" data-data-item-cost="69"></span></a> </div> </li> <li class="item-thumbnail-container"> <div class="item-thumbnail__image"> <a data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","item_id":47531679,"item_name":"Plasmic Audio Player","item_brand":"FWDesign","item_category":"javascript","item_category2":"media","price":"59","quantity":1}]}}" href="https://codecanyon.net/item/plasmic-audio-player/47531679"><span class="lazy-load-img" data-src="https://s3.envato.com/files/462640635/Thumbnail.png" data-border="0" data-alt="Plasmic Audio Player - CodeCanyon Item for Sale" data-title="Plasmic Audio Player" data-height="80" data-width="80" data-class="landscape-image-magnifier preload no_preview" data-data-preview-width="" data-data-preview-height="" data-data-preview-url="https://s3.envato.com/files/462640636/Preview%20image.jpg" data-data-item-name="Plasmic Audio Player" data-data-item-author="FWDesign" data-data-item-id="47531679" data-data-item-category="JavaScript / Media" data-data-item-cost="59"></span></a> </div> </li> <li class="item-thumbnail-container"> <div class="item-thumbnail__image"> <a data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","item_id":43836723,"item_name":"Spectrum Audio Player WordPress \u0026 WooCommerce Plugin","item_brand":"FWDesign","item_category":"wordpress","item_category2":"media","price":"59","quantity":1}]}}" href="https://codecanyon.net/item/spectrum-audio-player-wordpress-plugin/43836723"><span class="lazy-load-img" data-src="https://s3.envato.com/files/436085531/thumbnail-wp.png" data-border="0" data-alt="Spectrum Audio Player WordPress & WooCommerce Plugin - CodeCanyon Item for Sale" data-title="Spectrum Audio Player WordPress & WooCommerce Plugin" data-height="80" data-width="80" data-class="landscape-image-magnifier preload no_preview" data-data-preview-width="" data-data-preview-height="" data-data-preview-url="https://s3.envato.com/files/436085532/preview-wp.jpg" data-data-item-name="Spectrum Audio Player WordPress & WooCommerce Plugin" data-data-item-author="FWDesign" data-data-item-id="43836723" data-data-item-category="WordPress / Media" data-data-item-cost="59"></span></a> </div> </li> <li class="item-thumbnail-container"> <div class="item-thumbnail__image"> <a data-analytics-click-payload="{"eventName":"select_item","eventType":"user","ecommerce":{"currency":"USD","items":[{"affiliation":"codecanyon","item_id":43752119,"item_name":"Spectrum Audio Player","item_brand":"FWDesign","item_category":"javascript","item_category2":"media","price":"49","quantity":1}]}}" href="https://codecanyon.net/item/spectrum-audio-player/43752119"><span class="lazy-load-img" data-src="https://s3.envato.com/files/435476072/sap-thumb.png" data-border="0" data-alt="Spectrum Audio Player - CodeCanyon Item for Sale" data-title="Spectrum Audio Player" data-height="80" data-width="80" data-class="landscape-image-magnifier preload no_preview" data-data-preview-width="" data-data-preview-height="" data-data-preview-url="https://s3.envato.com/files/435476073/sap-preview.jpg" data-data-item-name="Spectrum Audio Player" data-data-item-author="FWDesign" data-data-item-id="43752119" data-data-item-category="JavaScript / Media" data-data-item-cost="49"></span></a> </div> </li> </ul> </div> <div> <p class="t-body -size-m"> <a class="t-link-decoration-reversed" href="/user/FWDesign/portfolio">View author portfolio</a> </p> </div> </section> <div data-view="itemPageScrollEvents"></div> </div> <div class="sidebar-l sidebar-right"> <div class="pricebox-container"> <div class="purchase-panel"> <div id="purchase-form" class="purchase-form"> <form data-view="purchaseForm" data-analytics-has-custom-click="true" data-analytics-click-payload="{"eventName":"add_to_cart","eventType":"user","quantityUpdate":false,"ecommerce":{"currency":"USD","value":29.0,"items":[{"affiliation":"codecanyon","item_id":7152281,"item_name":"Easy Video Player","item_brand":"FWDesign","item_category":"javascript","item_category2":"media","price":"29","quantity":1}]}}" action="/cart/add/7152281" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="LXaKHUPvEMTf-jGcWYJy3zi4puH6Ekk82Cx9Wgt8Dtm-N-SMMuMhyVf_9j4h84ysf8gym_TQmNc9eNp3VoxcFw" autocomplete="off" /> <div> <div data-view="itemVariantSelector" data-id="7152281" data-cookiebot-enabled="true"> <div class="purchase-form__selection"> <span class="purchase-form__license-type"> <span data-view="flyout" class="flyout"> <span class="js-license-selector__chosen-license purchase-form__license-dropdown">Regular License</span> <div class="js-flyout__body flyout__body -padding-side-removed"> <span class="js-flyout__triangle flyout__triangle"></span> <div class="license-selector" data-view="licenseSelector"> <div class="js-license-selector__item license-selector__item" data-license="regular" data-name="Regular License"> <div class="license-selector__license-type"> <span class="t-heading -size-xxs">Regular License</span> <span class="js-license-selector__selected-label e-text-label -color-green -size-s " data-license="regular">Selected</span> </div> <div class="license-selector__price"> <span class="t-heading -size-m h-m0"> <b class="t-currency"><span class="">$29</span></b> </span> </div> <div class="license-selector__description"> <p class="t-body -size-m h-m0">Use, by you or one client, in a single end product which end users <strong>are not</strong> charged for. The total price includes the item price and a buyer fee.</p> </div> </div> <div class="js-license-selector__item license-selector__item" data-license="extended" data-name="Extended License"> <div class="license-selector__license-type"> <span class="t-heading -size-xxs">Extended License</span> <span class="js-license-selector__selected-label e-text-label -color-green -size-s is-hidden" data-license="extended">Selected</span> </div> <div class="license-selector__price"> <span class="t-heading -size-m h-m0"> <b class="t-currency"><span class="">$186</span></b> </span> </div> <div class="license-selector__description"> <p class="t-body -size-m h-m0">Use, by you or one client, in a single end product which end users <strong>can be</strong> charged for. The total price includes the item price and a buyer fee.</p> </div> </div> </div> <div class="flyout__link"> <p class="t-body -size-m h-m0"> <a class="t-link -decoration-reversed" target="_blank" href="https://codecanyon.net/licenses/standard">View license details</a> </p> </div> </div> </span> <select class="f-select js-purchase-license-selector is-hidden--js" name="license"> <option value="regular" selected="selected" data-license="regular" data-license-default="true">Regular License</option> <option value="extended" data-license="extended" data-license-default="false">Extended License</option> </select> </span> <div class="js-purchase-heading purchase-form__price t-heading -size-xxl adi-variant-2"> <b class="t-currency"><span class="js-purchase-price">$59</span></b> <b class="t-currency js-adi__item-sale-price-wrapper"><span class="js-adi__item-sale-price adi__item-sale-price">$29</span></b> </div> </div> <div class="purchase-form__license js-purchase-license is-active" data-license="regular"> <price class="js-purchase-license-prices" data-price-prepaid="$29" data-license="regular" data-price-prepaid-upgrade="$39.13" data-support-upgrade-price="$10.13" data-support-upgrade-saving="$13" data-support-extension-price="$16.88" data-support-extension-saving="$6.75" data-discount-price="$29" data-discount-original-price="$59" data-discount-status="active" data-default-discount-price-upgrade="$39.13" data-default-discount-original-price-upgrade="$69.13" data-support-renewal-price="$23.63" /> </div> <div class="purchase-form__license js-purchase-license " data-license="extended"> <price class="js-purchase-license-prices" data-price-prepaid="$186" data-license="extended" data-price-prepaid-upgrade="$252" data-support-upgrade-price="$66" data-support-upgrade-saving="$88" data-support-extension-price="$110" data-support-extension-saving="$44" data-discount-price="$29" data-discount-original-price="$59" data-discount-status="active" data-default-discount-price-upgrade="$252" data-default-discount-original-price-upgrade="$125" data-support-renewal-price="$154" /> </div> <div class="purchase-form__support"> <ul class="t-icon-list -font-size-s -icon-size-s -offset-flush"> <li class="t-icon-list__item -icon-ok"> <span class="is-visually-hidden">Included:</span> Quality checked by Envato </li> <li class="t-icon-list__item -icon-ok"> <span class="is-visually-hidden">Included:</span> Future updates </li> <li class="t-icon-list__item -icon-ok"> <span class="is-visually-hidden">Included:</span> 6 months support from <span class="purchase-form__author-name">FWDesign</span> <a class="t-link -decoration-reversed js-support__inclusion-link" data-view="modalAjax" href="/item_support/what_is_item_support/7152281"> <svg width="12px" height="13px" viewBox="0 0 12 13" class="" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" role="img"> <title>More Info</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.5a6 6 0 1 0 12 0 6 6 0 0 0-12 0zm7.739-3.17a.849.849 0 0 1-.307.664.949.949 0 0 1-.716.273c-.273 0-.529-.102-.716-.272a.906.906 0 0 1-.307-.665c0-.256.102-.512.307-.682.187-.17.443-.273.716-.273.273 0 .528.102.716.273a.908.908 0 0 1 .307.682zm-.103 6.34-.119.46c-.34.137-.613.24-.818.307a2.5 2.5 0 0 1-.716.103c-.409 0-.733-.103-.954-.307a.953.953 0 0 1-.341-.767c0-.12 0-.256.017-.375.017-.12.05-.273.085-.426l.426-1.517a7.14 7.14 0 0 1 .103-.41c.017-.119.034-.238.034-.357a.582.582 0 0 0-.12-.41c-.085-.068-.238-.119-.46-.119-.12 0-.239.017-.34.051-.069.03-.132.047-.189.064-.042.012-.082.024-.119.038l.12-.46c.234-.102.468-.18.69-.253l.11-.037c.24-.085.478-.119.734-.119.409 0 .733.102.954.307.222.187.341.477.341.784 0 .068 0 .187-.017.34v.003a2.173 2.173 0 0 1-.085.458l-.427 1.534-.102.41v.002c-.017.119-.034.237-.034.356 0 .204.051.34.136.409.137.085.307.119.46.102a1.3 1.3 0 0 0 .359-.051c.085-.051.17-.085.272-.12z" fill="#0084B4"/> </svg> </a> </li> </ul> <div class="purchase-form__upgrade purchase-form__upgrade--before-after-price"> <div class="purchase-form__upgrade-checkbox purchase-form__upgrade-checkbox--before-after-price"> <input type="hidden" name="support" id="support_default" value="bundle_6month" class="js-support__default" autocomplete="off" /> <input type="checkbox" name="support" id="support" value="bundle_12month" class="js-support__option" /> </div> <div class="purchase-form__upgrade-info"> <label class="purchase-form__label purchase-form__label--before-after-price" for="support"> Extend support to 12 months <span class="purchase-form__price purchase-form__price--before-after-price t-heading -size-xs h-pull-right"> <span class="js-renewal__price t-currency purchase-form__renewal-price purchase-form__renewal-price--strikethrough"> $23.63 </span> <b class="t-currency"> <span class="js-support__price">$10.13</span> </b> </span> </label> </div> </div> </div> </div> <div class="purchase-form__cta-buttons"> <div class="purchase-form__button"> <button name="button" type="submit" class="js-purchase__add-to-cart e-btn--3d -color-primary -size-m -width-full"> <i class="e-icon -icon-cart -margin-right"></i> <strong>Add to Cart</strong> </button></div> </div> <div class="purchase-form__us-dollars-notice-container"> <p class="purchase-form__us-dollars-notice"><i>Price is in US dollars and excludes tax and handling fees</i></p> </div> </div> </form> </div> </div> </div> <div class="box -radius-all"> <div class="media"> <div class="media__item"> <img alt="Elite author" title="Elite Author: Sold more than $75,000 on Envato Market" width="42" height="42" src="https://public-assets.envato-static.com/assets/badges/elite-10edc87feb7935dd2b5b4a75c2ecbf7602f735e2367b0430dfa4befe23c0d4ff.svg" /> </div> <div class="media__body -align-center"> <p class="t-body -size-m h-m0">Elite Author</p> </div> </div> </div> <div class="box -radius-all"> <div class="media"> <div class="media__item"> <div class="avatar-wrapper tooltip-advanced"> <a class="avatar" title="FWDesign" href="/user/FWDesign"> <span data-src="https://s3.envato.com/files/321621739/fwd%20avatar.jpg" data-width="80" data-height="80" data-alt="FWDesign" class="lazy-load-img"></span> </a> </div> </div> <div class="media__body"> <h2 class="t-heading -size-s h-text-overflow-wrap-anywhere"> <a rel="author" class="t-link -color-dark -decoration-none" href="/user/fwdesign">FWDesign</a> </h2> <div class=""> <ul class="badges"> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/was_featured-s-87fe0bf12916ecd80dfb0458af483f5ffc3e0e12a8184319b00d68f35b50398d.svg" data-alt="Featured Author" data-class="community-badges__badge--s" data-title="Featured Author: Made it to the Authors' Hall of Fame" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/had_featured_item-s-b5f2918086aeed34870acaf7a6c9710fa7f7418a10f670ceeb57395d4fc2b90e.svg" data-alt="Featured Item" data-class="community-badges__badge--s" data-title="Featured Item: Had an item featured on Envato Market" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/elite-s-330c3ef01292b534834456c5d15cc00abfb4bfdc65fb746e8dc0e10891912c89.svg" data-alt="Elite Author" data-class="community-badges__badge--s" data-title="Elite Author: Sold more than $75,000 on Envato Market" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/author_level_11-s-de0aa8e25fd58c6a171842f64934869c92c9a0e820315179f96db7f5e5151a23.svg" data-alt="Author Level 11" data-class="community-badges__badge--s" data-title="Author Level 11: Has sold $750,000+ on Envato Market" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/veteran_level_15-s-186e6b93ac21afc338c47060ca17d2c8136602bbb63e5780c1bc1caa0bbf7781.svg" data-alt="15 Years of Membership" data-class="community-badges__badge--s" data-title="15 Years of Membership: Has been part of the Envato Community for over 15 years" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/exclusive-s-ece00f12ba6563867b7ba5274540c7333ba6688400220b3bf1d2bb9b338d65f8.svg" data-alt="Exclusive Author" data-class="community-badges__badge--s" data-title="Exclusive Author: Sells items exclusively on Envato" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/won_a_competition-s-48db957227f1f7797a3da49f75ce38bbb211ee0625575f63736480b46c1724d9.svg" data-alt="Winner" data-class="community-badges__badge--s" data-title="Winner: Won a competition" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/was_top_monthly_author-s-d2866e865aab0be2c0d48681dc5dea0122a93859783d9e70316cfc32ed4abdb9.svg" data-alt="Top Monthly Author" data-class="community-badges__badge--s" data-title="Top Monthly Author: Became a Top 20 Author of the Month" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/was_weekly_top_seller-s-450a372ef504c226ad5c50b332c51741364a5014267839e0484804ae2fafe398.svg" data-alt="Weekly Top Seller" data-class="community-badges__badge--s" data-title="Weekly Top Seller: Had an item that ranked among the weekly top sellers across the entire marketplace" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/one_billion_milestone-s-ed3a00e6519c81aee36b4f053c5e59b64c3de33f69d2baa58a823b6827d96a3b.svg" data-alt="Milestone Member" data-class="community-badges__badge--s" data-title="Milestone Member: Part of the $1 billion community earnings milestone" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/affiliate_level_5-s-b5d9975cfb68f074cf3178959d050438651c839001f6ab8a0353d7e167a7aa41.svg" data-alt="Affiliate Level 5" data-class="community-badges__badge--s" data-title="Affiliate Level 5: Has referred 200+ members" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/collector_level_2-s-2a15dcab6192538759893eb7e80a54f39e75858e154b4d064d0502496660c7b8.svg" data-alt="Collector Level 2" data-class="community-badges__badge--s" data-title="Collector Level 2: Has collected 10+ items on Envato Market" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/most_wanted_bounty_winner-s-1b4a460598a79a6039cea1d15c66d72d481459e17e7075a7c40f2f9aeab85b7b.svg" data-alt="Most Wanted Winner" data-class="community-badges__badge--s" data-title="Most Wanted Winner: Won a Most Wanted contest" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/had_free_file-s-7fe4a387a4fa6592f2b8bc26aaf8d6a7b53de858782781db910490340988f5a9.svg" data-alt="Free File of the Month" data-class="community-badges__badge--s" data-title="Free File of the Month: Contributed a free file of the month" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/free_file_general-s-2fe62cb88a518f7ffc7eec363240bdc46414251b24de266bf163966643d2beea.svg" data-alt="Freebie" data-class="community-badges__badge--s" data-title="Freebie: Contributed a free file for an Envato Marketing promotion" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/had_trending_item-s-973480c3b882aee21c3dbefdbb9a47c01668da9beb2678ad5332194269fb7ceb.svg" data-alt="Trendsetter" data-class="community-badges__badge--s" data-title="Trendsetter: Had an item that was trending" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/community_health-s-3c377dde1620d2cd711edfed7b7a4940e27efb29e2ad0a717a82a4e839b2c3be.svg" data-alt="Community Health" data-class="community-badges__badge--s" data-title="Community Health: Has participated in Envato's Community Health research initiatives" class="lazy-load-img"></span> </span> </li> <li> <span class="community-badges__badge-wrapper--s community-badges__badge-wrapper--responsive-xs "> <span data-src="https://public-assets.envato-static.com/assets/badges/country_gb-efd18b09145bf455753c3f7524179eccbf3470a38fc7287d771763b719111833.svg" data-alt="United Kingdom" data-class="community-badges__badge--s" data-title="Located in United Kingdom" class="lazy-load-img"></span> </span> </li> </ul> </div> </div> </div> <div class="h-mt1"> <a class="e-btn--3d -color-light -width-full js-view-portfolio-button" href="/user/FWDesign/portfolio">View Portfolio</a> </div> </div> <div class="box -radius-all"> <div class="meta-attributes js-meta-attributes has-toggle is-collapsed" data-view="CondenseItemInfoPanel"> <table class="meta-attributes__table" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr class="js-condense-item-page-info-panel--last_update"> <td class="meta-attributes__attr-name">Last Update</td> <td class="meta-attributes__attr-detail"> <time class="updated" datetime="2024-10-02T15:42:57+10:00"> 2 October 2024 </time> </td> </tr> <tr class="js-condense-item-page-info-panel--created-at"> <td class="meta-attributes__attr-name">Published</td> <td class="meta-attributes__attr-detail"> <span data-nosnippet=""> 16 March 2014 </span> </td> </tr> <tr class="js-condense-item-page-info-panel--high-resolution"> <td class="meta-attributes__attr-name">High Resolution</td> <td class="meta-attributes__attr-detail"> <a rel="nofollow" class="js-item-sidebar-meta-attributes" href="/attributes/high-resolution/yes">Yes</a> </td> </tr> <tr class="js-condense-item-page-info-panel--compatible-browsers"> <td class="meta-attributes__attr-name">Compatible Browsers</td> <td class="meta-attributes__attr-detail"> <a rel="nofollow" class="js-item-sidebar-meta-attributes" href="/attributes/compatible-browsers/firefox">Firefox</a>, <a rel="nofollow" class="js-item-sidebar-meta-attributes" href="/attributes/compatible-browsers/safari">Safari</a>, <a rel="nofollow" class="js-item-sidebar-meta-attributes" href="/attributes/compatible-browsers/opera">Opera</a>, <a rel="nofollow" class="js-item-sidebar-meta-attributes" href="/attributes/compatible-browsers/chrome">Chrome</a>, <a rel="nofollow" class="js-item-sidebar-meta-attributes" href="/attributes/compatible-browsers/edge">Edge</a> </td> </tr> <tr class="js-condense-item-page-info-panel--files-included"> <td class="meta-attributes__attr-name">Files Included</td> <td class="meta-attributes__attr-detail"> <a rel="nofollow" class="js-item-sidebar-meta-attributes" href="/attributes/source-files-included/javascript%20js">JavaScript JS</a>, <a rel="nofollow" class="js-item-sidebar-meta-attributes" href="/attributes/source-files-included/html">HTML</a>, <a rel="nofollow" class="js-item-sidebar-meta-attributes" href="/attributes/source-files-included/layered%20psd">Layered PSD</a> </td> </tr> <tr> <td class="meta-attributes__attr-name">Tags</td> <td><span class="meta-attributes__attr-tags"> <a title="adsense" rel="nofollow" href="/search/adsense">adsense</a>, <a title="audio" rel="nofollow" href="/search/audio">audio</a>, <a title="chromecast" rel="nofollow" href="/search/chromecast">chromecast</a>, <a title="fullscreen" rel="nofollow" href="/search/fullscreen">fullscreen</a>, <a title="google ima" rel="nofollow" href="/search/google ima">google ima</a>, <a title="mp4" rel="nofollow" href="/search/mp4">mp4</a>, <a title="player" rel="nofollow" href="/search/player">player</a>, <a title="responsive" rel="nofollow" href="/search/responsive">responsive</a>, <a title="vast" rel="nofollow" href="/search/vast">vast</a>, <a title="video" rel="nofollow" href="/search/video">video</a>, <a title="video player" rel="nofollow" href="/search/video player">video player</a>, <a title="vimeo" rel="nofollow" href="/search/vimeo">vimeo</a>, <a title="vmap" rel="nofollow" href="/search/vmap">vmap</a>, <a title="youtube" rel="nofollow" href="/search/youtube">youtube</a> </span></td> </tr> </tbody> </table> <div class="js-meta-attributes-toggle meta-attributes-toggle"> <a class="meta-attributes-toggle__link" href="#"> <span>More Attributes <i class="e-icon -icon-chevron-down"></i></span> <span class="meta-attributes-toggle__less">Fewer Attributes <i class="e-icon -icon-chevron-down -rotate-180"></i></span> </a> </div> </div></div> <div class="t-body -size-s h-text-align-center h-mt2"> © All Rights Reserved FWDesign <br/> <a href="https://help.market.envato.com">Contact the Envato Market Help Team</a> </div> </div> <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ // HACK: Google Chrome always scroll the previous page's position on hitting Back button // This causes issue with responsive version in which unexpanded item description obscure // the scroll position and Chrome will jump to the outer border of bottom window.addEventListener('unload', function(e) { window.scrollTo(0, 0); }); //]]> </script></div> </div> </div> <div> <div class='cross-sell'> <a class="cross-sell__link" data-analytics-view-payload="{"eventName":"view_promotion","contextDetail":"footer block ads","ecommerce":{"promotionId":"elements_mkt-footer_28AUG2024","promotionName":"elements_mkt-footer_28AUG2024","promotionType":"elements referral"}}" data-analytics-click-payload="{"eventName":"select_promotion","contextDetail":"footer block ads","ecommerce":{"promotionId":"elements_mkt-footer_28AUG2024","promotionName":"elements_mkt-footer_28AUG2024","promotionType":"elements referral"}}" data-analytics-click-once="true" href="https://elements.envato.com/pricing?utm_campaign=elements_mkt-footer_28AUG2024&utm_content=cc_global-footer&utm_medium=promos&utm_source=codecanyon.net"> <div class="mainPanel"> <div class="mainPanelContent"> <div class="envatoLogo"> </div> <div class="mainPanelLinkContainer"> <p class="mainPanelLinkHeading"> Looking for unlimited downloads? </p> <p class="mainPanelLinkSubheading"> Subscribe to Envato Elements. </p> <div class="mainPanelLinkDescription"> <div class="descriptionItem"> <img src="https://public-assets.envato-static.com/assets/header/badge-a65149663b95bcee411e80ccf4da9788f174155587980d8f1d9c44fd8b59edd8.svg" alt="badge" width="20" height="20" > <span>Millions of premium assets </span> </div> <div class="descriptionItem"> <img src="https://public-assets.envato-static.com/assets/header/thumbs_up-e5ce4c821cfd6a6aeba61127a8e8c4d2d7c566e654f588a22708c64d66680869.svg" alt="thumbs up" width="20" height="20" > <span> Great value subscription</span> </div> </div> </div> </div> <button class="brand-neue-button brand-neue-button__open-in-new elements-nav__cta footer_btn">Start creating now</button> </div> <div class="secondaryPanel"> <img loading="lazy" src="https://public-assets.envato-static.com/assets/header-footer/cross-sell-elements-1x-080389fdc19b4cd6f665df2a1e9d17804c7a735175b070e0ae7a9abd1c8afbce.png" srcset="https://public-assets.envato-static.com/assets/header-footer/cross-sell-elements-2x-7b2e57d6be99b80fabbcb40d5c12e36b88979b893a11f7a101f9deef3e9d3ce8.png 2x" alt="Collage of Elements items" /> </div> </a></div> <footer class='global-footer'> <div class='grid-container -layout-wide'> <div class='global-footer__container'> <nav class='global-footer-info-links'> <hr class='global-footer__separator is-hidden-desktop h-mb4'> <ul class='global-footer-info-links__list'> <li class='global-footer-info-links__list-item'> <ul class='global-footer-sublist'> <li class='global-footer-sublist__item-title'> Envato Market </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://themeforest.net/legal/market">Terms</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://themeforest.net/licenses">Licenses</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://build.envato.com">Market API</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://envato.com/market/affiliate-program/">Become an affiliate</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://www.envato.com/cookies/">Cookies</a> </li> <li class='global-footer-sublist__item h-p0'> <button type="button" class="global-footer__text-link" data-view="cookieSettings">Cookie Settings</button> </li> </ul> </li> <li class='global-footer-info-links__list-item'> <ul class='global-footer-sublist'> <li class='global-footer-sublist__item-title'> Help </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://help.market.envato.com">Help Center</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://help.author.envato.com/hc/en-us">Authors</a> </li> </ul> </li> <li class='global-footer-info-links__list-item'> <ul class='global-footer-sublist'> <li class='global-footer-sublist__item-title'> Our Community </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://community.envato.com">Community</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://envato.com/blog">Blog</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://forums.envato.com">Forums</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://community.envato.com/#/events">Meetups</a> </li> </ul> </li> <li class='global-footer-info-links__list-item'> <ul class='global-footer-sublist'> <li class='global-footer-sublist__item-title'> Meet Envato </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://envato.com">About Envato</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://envato.com/careers/">Careers</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://envato.com/privacy/">Privacy Policy</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://www.envato.com/privacy/#my-personal-information">Do not sell or share my personal information</a> </li> <li class='global-footer-sublist__item h-p0'> <a class="global-footer__text-link" href="https://envato.com/sitemap/">Sitemap</a> </li> </ul> </li> </ul> </nav> <div class='global-footer-stats'> <div class='global-footer-stats__content'> <img class="global-footer-stats__logo" alt="Envato Market" src="https://public-assets.envato-static.com/assets/logos/envato_market-dd390ae860330996644c1c109912d2bf63885fc075b87215ace9b5b4bdc71cc8.svg" /> <ul class='global-footer-stats__list'> <li class='global-footer-stats__list-item h-p0'> <span class='global-footer-stats__number'>76,344,739</span> items sold </li> <li class='global-footer-stats__list-item h-p0'> <span class='global-footer-stats__number'>$1,189,002,267</span> community earnings </li> </ul> </div> <div class='global-footer-stats__bcorp'> <a target="_blank" rel="noopener noreferrer" class="global-footer-bcorp-link" href="https://bcorporation.net/en-us/find-a-b-corp/company/envato"> <img class="global-footer-bcorp-logo" width="50" alt="B Corp Logo" loading="lazy" src="https://public-assets.envato-static.com/assets/header-footer/logo-bcorp-e83f7da84188b8edac311fbf08eaa86634e9db7c67130cdc17837c1172c5f678.svg" /> </a> </div> </div> </div> <hr class='global-footer__separator'> <div class='global-footer__container'> <div class='global-footer-company-links'> <ul class='global-footer-company-links__list'> <li class='global-footer-company-links__list-item'> <a class="global-footer__text-link -opacity-full" href="https://envato.com">Envato.com</a> </li> <li class='global-footer-company-links__list-item'> <a class="global-footer__text-link -opacity-full" data-analytics-view-payload="{"eventName":"view_promotion","contextDetail":"footer nav","ecommerce":{"promotionId":"elements_mkt-footernav","promotionName":"elements_mkt-footernav","promotionType":"elements referral"}}" data-analytics-click-payload="{"eventName":"select_promotion","contextDetail":"footer nav","ecommerce":{"promotionId":"elements_mkt-footernav","promotionName":"elements_mkt-footernav","promotionType":"elements referral"}}" href="https://elements.envato.com?utm_campaign=elements_mkt-footernav">Envato Elements</a> </li> <li class='global-footer-company-links__list-item'> <a class="global-footer__text-link -opacity-full" href="https://placeit.net/">Placeit by Envato</a> </li> <li class='global-footer-company-links__list-item'> <a class="global-footer__text-link -opacity-full" href="https://tutsplus.com">Envato Tuts+</a> </li> <li class='global-footer-company-links__list-item'> <a class="global-footer__text-link -opacity-full" href="https://envato.com/products/">All Products</a> </li> <li class='global-footer-company-links__list-item'> <a class="global-footer__text-link -opacity-full" href="https://envato.com/sitemap/">Sitemap</a> </li> </ul> <hr class="global-footer__separator is-hidden-tablet-and-above h-mt3"> <small class='global-footer-company-links__price-disclaimer'> Price is in US dollars and excludes tax and handling fees </small> <small class='global-footer-company-links__copyright'> © 2024 Envato Pty Ltd. Trademarks and brands are the property of their respective owners. </small> </div> <div class='global-footer-social'> <ul> <li class='global-footer-social__list-item'> <a class="global-footer__icon-link" rel="nofollow" href="https://twitter.com/envato"> <span data-src="https://public-assets.envato-static.com/assets/header-footer/social/twitter-fed054cb31fc18407431a26876142c31a26c6bd59026c684d9625e4d7e58002a.svg" data-class="global-footer-social__icon" data-alt="Twitter" data-title="Twitter" data-width="22" data-height="22" class="lazy-load-img"></span> </a> </li> <li class='global-footer-social__list-item'> <a class="global-footer__icon-link" rel="nofollow" href="https://www.facebook.com/envato"> <span data-src="https://public-assets.envato-static.com/assets/header-footer/social/facebook-20d27cecd9ae46e6f7bad373316a0dc544669d42dbe0f66b3672720fbe5592fc.svg" data-class="global-footer-social__icon" data-alt="Facebook" data-title="Facebook" data-width="22" data-height="22" class="lazy-load-img"></span> </a> </li> <li class='global-footer-social__list-item'> <a class="global-footer__icon-link" rel="nofollow" href="https://www.youtube.com/user/Envato"> <span data-src="https://public-assets.envato-static.com/assets/header-footer/social/youtube-2d6a8f758426e727939834a47fe9e16ed6b651afed9ca4327a986f76f496594a.svg" data-class="global-footer-social__icon" data-alt="YouTube" data-title="YouTube" data-width="22" data-height="22" class="lazy-load-img"></span> </a> </li> <li class='global-footer-social__list-item'> <a class="global-footer__icon-link" rel="nofollow" href="https://www.instagram.com/envato/"> <span data-src="https://public-assets.envato-static.com/assets/header-footer/social/instagram-dce9fbf4d8428e6f75492fdc4e32ef7543ce3ba6347a5b055e7ac68c45416dc2.svg" data-class="global-footer-social__icon" data-alt="Instagram" data-title="Instagram" data-width="22" data-height="22" class="lazy-load-img"></span> </a> </li> <li class='global-footer-social__list-item'> <a class="global-footer__icon-link" rel="nofollow" href="https://www.pinterest.com/envato/"> <span data-src="https://public-assets.envato-static.com/assets/header-footer/social/pinterest-2e00aae335d66e4e28273bbfe4e9428ca8d8d91cbd9122d81312218ea34747df.svg" data-class="global-footer-social__icon" data-alt="Pinterest" data-title="Pinterest" data-width="22" data-height="22" class="lazy-load-img"></span> </a> </li> </ul> </div> </div> </div> </footer> </div> </div> <div class="is-hidden-phone"> <div id="tooltip-magnifier" class="magnifier"> <strong></strong> <div class="info"> <div class="author-category"> by <span class="author"></span> </div> <div class="price"> <span class="cost"></span> </div> </div> <div class="footer"> <span class="category"></span> <span class="currency-tax-notice">Price is in US dollars and excludes tax and handling fees</span> </div> </div> <div id="landscape-image-magnifier" class="magnifier"> <div class="size-limiter"> </div> <strong></strong> <div class="info"> <div class="author-category"> by <span class="author"></span> </div> <div class="price"> <span class="cost"></span> </div> </div> <div class="footer"> <span class="category"></span> <span class="currency-tax-notice">Price is in US dollars and excludes tax and handling fees</span> </div> </div> <div id="portrait-image-magnifier" class="magnifier"> <div class="size-limiter"> </div> <strong></strong> <div class="info"> <div class="author-category"> by <span class="author"></span> </div> <div class="price"> <span class="cost"></span> </div> </div> <div class="footer"> <span class="category"></span> <span class="currency-tax-notice">Price is in US dollars and excludes tax and handling fees</span> </div> </div> <div id="square-image-magnifier" class="magnifier"> <div class="size-limiter"> </div> <strong></strong> <div class="info"> <div class="author-category"> by <span class="author"></span> </div> <div class="price"> <span class="cost"></span> </div> </div> <div class="footer"> <span class="category"></span> <span class="currency-tax-notice">Price is in US dollars and excludes tax and handling fees</span> </div> </div> <div id="smart-image-magnifier" class="magnifier"> <div class="size-limiter"> </div> <strong></strong> <div class="info"> <div class="author-category"> by <span class="author"></span> </div> <div class="price"> <span class="cost"></span> </div> </div> <div class="footer"> <span class="category"></span> <span class="currency-tax-notice">Price is in US dollars and excludes tax and handling fees</span> </div> </div> <div id="video-magnifier" class="magnifier"> <div class="size-limiter"> </div> <strong></strong> <div class="info"> <div class="author-category"> by <span class="author"></span> </div> <div class="price"> <span class="cost"></span> </div> </div> <div class="footer"> <span class="category"></span> <span class="currency-tax-notice">Price is in US dollars and excludes tax and handling fees</span> </div> </div> </div> </div> <div class="page__overlay" data-view="offCanvasNavToggle" data-off-canvas="close"></div> </div> </div> <script src="https://public-assets.envato-static.com/assets/market/core/index-3d8a0ccd9978174dda7d3aa30b258e7ace330a435d742f005d78398b2a3f6013.js" nonce="o2lKMfhkB/rZy+RNr8uV4Q=="></script> <script src="https://public-assets.envato-static.com/assets/market/pages/default/index-f343a714d04e9f18234e16f363b09212a5aca215988f9a738438975a3e445c97.js" nonce="o2lKMfhkB/rZy+RNr8uV4Q=="></script> <div id="affiliate-tracker" class="is-hidden" data-view="affiliatesTracker" data-cookiebot-enabled="true"></div> <script src="https://public-assets.envato-static.com/assets/market/core/lazyload-f0fdf08f4783c5b030b32eb74e26ace288ccfeeee00a96df46f974edf09fc853.js" crossorigin="anonymous" nonce="o2lKMfhkB/rZy+RNr8uV4Q==" integrity="sha256-Lj73XO2pRKnz68V0O125cWko4eq1N3BVb2oeXYCSLv0="></script> <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ $(function(){viewloader.execute(Views);}); //]]> </script> <script src="https://consent.cookiebot.com/uc.js" data-cbid="d10f7659-aa82-4007-9cf1-54a9496002bf" data-georegions="{"region":"US","cbid":"d9683f70-895f-4427-97dc-f1087cddf9d8"}" async="async" id="Cookiebot" nonce="o2lKMfhkB/rZy+RNr8uV4Q=="></script> <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ var ACCOUNTS = ["m"]; window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; var consentCookie = getCookie('CookieConsent'); if (consentCookie) { var hasConsent = Market.Helpers.CookieConsent.given('statistics'); if (hasConsent) { setupGoogleAnalytics(); loadGoogleAnalytics(); loadLinkingForAllAccounts(); } } else { setupGoogleAnalytics(); loadGoogleAnalytics(); loadLinkingForAllAccounts(); } window.addEventListener('CookiebotOnAccept', handleCookiebotAcceptDeclineEvent, false); window.addEventListener('CookiebotOnDecline', handleCookiebotAcceptDeclineEvent, false); function handleCookiebotAcceptDeclineEvent() { if (Cookiebot.consent.statistics) { if (!(window.ga && ga.create)) { setupGoogleAnalytics(); loadGoogleAnalytics(); loadLinkingForAllAccounts(); } } else { unloadGoogleAnalytics() } } function getCookie(name) { var name = name + "="; var decodedCookie = decodeURIComponent(document.cookie); var cookieContent = decodedCookie.split(';'); for(var i = 0; i < cookieContent.length; i++) { var c = cookieContent[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return false; } function delete_cookie_by_name(name) { document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; } function unloadGoogleAnalytics() { var payload = {"name":"m","allowLinker":true}; var accountId = "UA-11834194-12"; // Set the GA User Opt-out flag window['ga-disable-'+accountId] = true; // Do not explicitly make any further calls to ga() ga(payload.name+".remove"); // Delete any existing GA cookies (_ga, _gat & _gaid) and GA Client ID from localStorage delete_cookie_by_name('_ga'); delete_cookie_by_name('_gat'); delete_cookie_by_name('_gid'); // Delete LocalStorage Entries if (Market.Helpers.GaLsUtils.localStorageAvailable()) { var clientId = Market.Helpers.GaLsUtils.getClientId(); if (!clientId) { return; } Market.Helpers.GaLsUtils.removeClientId(); } // Do not transmit the Client ID to other sites upon navigation (i.e. autoLink) } function domLoaded() { return new Promise(resolve => { if ( document.readyState === 'interactive' || document.readyState === 'complete' ) { resolve() } else { document.addEventListener( 'DOMContentLoaded', () => { resolve() }, { capture: true, once: true, passive: true } ) } }) } function loadLinkingForAllAccounts() { domLoaded().then(() => { window._envGaTrackerNames = ACCOUNTS; for (var i = 0; i < ACCOUNTS.length; i++) { var t = ACCOUNTS[i]; ga(t+'.require', 'linker'); ga(t+'.require', 'linkid', 'linkid.js'); }; document.body.addEventListener('click', function(event) { decorateLink(event); }); document.body.addEventListener('contextmenu', function(event) { // Aside from a normal click, we need to handle the variety of ways users // can open a link in a new tab // Right click to open context menu decorateLink(event); }); document.body.addEventListener('mousedown', function(event) { // Aside from a normal click, we need to handle the variety of ways users // can open a link in a new tab // Middle mouse button click if (event.button === 1) { decorateLink(event); } }); }); } function decorateLink(event) { window._envGaTrackerNames = ACCOUNTS; var currentTarget = jQuery(event.target); var link = currentTarget.closest('a')[0]; var ourDomains = ["audiojungle.net","themeforest.net","videohive.net","graphicriver.net","3docean.net","codecanyon.net","photodune.net","elements.envato.com","build.envatohostedservices.com","author.envato.com","tutsplus.com","sites.envato.com","account.envato.com","forums.envato.com"]; var filteredDomains = ourDomains.filter(function(domain) { return domain !== document.location.hostname; }); for (var i = 0; i < ACCOUNTS.length; i++) { var t = ACCOUNTS[i]; if (link && link.href) { if (filteredDomains.includes(link.hostname) || currentSiteLinkOpensInNewWindow(link)) { ga(t+'.linker:decorate', link) } } } } function currentSiteLinkOpensInNewWindow(link) { return document.location.hostname === link.hostname && link.target === '_blank'; } function setupGoogleAnalytics() { (function () { var accountId = "UA-11834194-12"; window['ga-disable-'+accountId] = false; var options = {"name":"m","allowLinker":true}; if (Market.Helpers.GaLsUtils.localStorageAvailable()) { if (Market.Helpers.GaLsUtils.clientIdNotPresent()) { options.clientId = Market.Helpers.GaLsUtils.retrieveClientId(); } ga("create", accountId, options); ga(function() { var tracker = ga.getByName(options.name); Market.Helpers.GaLsUtils.storeClientId(tracker.get('clientId')); for (var i = 0; i < ACCOUNTS.length; i++) { var t = ACCOUNTS[i]; ga(t+'.set', 'dimension18', Market.Helpers.GaLsUtils.retrieveClientId()) } }) } else { ga("create", accountId, options); } window._envGaTrackerNames = ACCOUNTS; for (var i = 0; i < ACCOUNTS.length; i++) { var t = ACCOUNTS[i]; ga(t+'.require', ""); ga(t+'.require', 'ec'); ga(t+'.require', 'displayfeatures'); ga(t+'.set', 'dimension20', 'item:details') var itemPageIdMatch = window.location.pathname.match(/^\/item\/[a-z-]+\/(?:reviews\/)?(\d+)(?:\/comments|\/support)?$/); if (itemPageIdMatch) { // Fetch item ID from path var itemId = itemPageIdMatch[1]; ga(t+'.set', 'dimension23', itemId); } } loadLinkingForAllAccounts() }()); } function loadGoogleAnalytics() { (function () { var s=document.createElement('script'); s.type='text/javascript'; s.async=true; s.src='https://www.google-analytics.com/analytics.js'; var x=document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s,x); }()); } //]]> </script> <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ trimGacUaCookies() trimGaSessionCookies() function trimGacUaCookies() { // Trim the list of gac cookies and only leave the most recent ones. This // prevents rejecting the request later on when the cookie size grows larger // than nginx buffers. let maxCookies = 15 var gacCookies = [] let cookies = document.cookie.split('; ') for (let i in cookies) { let [cookieName, cookieVal] = cookies[i].split('=', 2) if (cookieName.startsWith('_gac_UA')) { gacCookies.push([cookieName, cookieVal]) } } if (gacCookies.length <= maxCookies){return } gacCookies.sort((a, b) => { return (a[1] > b[1] ? -1 : 1) }) for (let i in gacCookies) { if (i < maxCookies) continue $.removeCookie(gacCookies[i][0], { path: '/', domain: '.' + window.location.host }) } } function trimGaSessionCookies() { // Trim the list of ga session cookies and only leave the most recent ones. This // prevents rejecting the request later on when the cookie size grows larger // than nginx buffers. let maxCookies = 15 var gaCookies = [] // safelist our GA properties for production and staging const KEEPLIST = ['_ga_ZKBVC1X78F', '_ga_9Z72VQCKY0'] let cookies = document.cookie.split('; ') for (let i in cookies) { let [cookieName, cookieVal] = cookies[i].split('=', 2) // explicitly ensure the cookie starts with `_ga_` so that we don't accidentally include // the `_ga` cookie if (cookieName.startsWith('_ga_')) { if (KEEPLIST.includes(cookieName)) { continue } gaCookies.push([cookieName, cookieVal]) } } if (gaCookies.length <= maxCookies){return } gaCookies.sort((a, b) => { return (a[1] > b[1] ? -1 : 1) }) for (let i in gaCookies) { if (i < maxCookies) continue $.removeCookie(gaCookies[i][0], { path: '/', domain: '.' + window.location.host }) } } //]]> </script> <script nonce="o2lKMfhkB/rZy+RNr8uV4Q=="> //<![CDATA[ // Set Datadog custom attributes (function () { if (typeof window.datadog_attributes != 'object') window.datadog_attributes = {} window.datadog_attributes['pageType'] = 'item:details' })() //]]> </script> </body> </html>

CINXE.COM

Easy Video Player by FWDesign | CodeCanyon