10 Best JavaScript Media Scripts and Plugins of 2019

Interactive elements like audio, video, flipbooks, galleries, maps, countdown clocks, and popups increases the time visitors spend engaging with content on your website. They help create great user experiences. 

JavaScript media scripts and plugins make it easy to bring life and engagement to your website. These include video, audio and PDF plugins that you can check out in some of our other articles.

• 
  HTML5
  
  
  15 Best HTML5 Audio Players
  
  
  Eric Dye


• 
  HTML5
  
  
  15 Best HTML5 Video Players
  
  
  Eric Dye


• 
  jQuery
  
  
  Best jQuery Flipbook Plugins Compared
  
  
  Jane Baker


• 
  JavaScript
  
  
  How to Create a JavaScript PDF Viewer
  
  
  Ashraff Hathibelagal

In this article I'll show you some other kinds of interactive scripts available on CodeCanyon that can liven up your site.  

Why Use a Media Script or Plugin?

There are many kinds of media. Say you want visitors on your website to fill in a survey form that pops up when they navigate your page. Or you want users to search locations of your stores and find out how to get there.

The most common kinds of interactive media are maps, audio, video, flipbooks, and interactive elements like surveys, popups, and clocks. They are an indispensable part of website content. A good combination of these drive customer engagement. 

But imagine manually coding every interactive media item—every video player, audio player, flipbook, map, or countdown clocks.

 Here is where a script comes in handy. A JavaScript script or plugin is a piece of code that you can install on a website to add functionality. Media scripts enable you to share and embed media like video, audio, interactive elements, or other multimedia, in addition to books, magazine, or catalogs in flipbook form. 

Let’s take a look at some of the best JavaScript media scripts available on CodeCanyon. 

What is a Script?

A script is a piece of code that does a certain task or adds a feature to your website. Scripts contain a set of instructions that automate processes on a website. 

Scripts work in the background—where visitors can’t see them—to make your website flexible and usable. The script is self-initializing when the page loads, and keeps running as long as the page remains open. You just install it and you’re ready to go. The great thing is that you can add advanced features to your website without needing to know how to write code. 

How to Choose a Media Script or Plugin

JavaScript media scripts and plugins from CodeCanyon are highly affordable and easy to use. All you need to do is download the script and install it on your website. The script will do all the background work to make your video, audio, flipbooks, or other media work smoothly without slowing down your website. 

Not only that but because they are built with presentation in mind, they offer a variety of easy-to-use templates you can choose from in order to enhance the look of your website. 

Things to keep in mind include the following:

Ease of use: This includes ease of download and installation, how easy it is to upload and resize video and to adapt it various screen sizes. 

Highly customizable: A script should allow customization to fit perfectly with any theme you choose for your website. 

Cross-browser compatibility: Not everyone visiting your website uses Google Chrome or Mozilla. Make sure that your script is compatible with any browser your visitors might use.

Compatibility across devices: A script should seamlessly work on desktops, laptops, tablets, and mobile phones. Not only that, but the script needs to be responsive, meaning it can adapt to various device types, widths, heights, orientations, resolutions, aspect ratios, and color depths. 

Full touch support: The script should be usable by mobile device with touch screens.

Lightweight: The file should be lightweight so your media will initialize and load quickly without slowing down the website.

Standalone: There should be no need to download 3rd-party plugins like flash for the script to work. However, note that it is common for scripts to require common libraries like jQuery.

Let's take a look at some of the most popular JavaScript media scripts available on CodeCanyon.  

1. Interactive Maps Generator

Interactive Maps Generator is a powerful plugin which uses the powerful Google Geochart API which creates the SVG vector maps. It is compatible with Wix, SquareSpace, Joomla and other CMS’s that allow you to paste JavaScript code into the content. 

Here is what you can do with Interactive Maps Generator:

1. generate as many maps as you want


2. embed the code to place maps on any part of your website content

You can create clickable maps for your website, including a map of the US, a map of the world, or any other region available. That's just the start, you can add active colored regions to the map, and you can add interactivity to the active regions. You will also be able to customize the visuals of your maps: the background color, box border width and color, inactive regions color, width and height of the map.

User NPCAComms says this about Interactive Maps Generator

Best money I ever spent. Easy to use and sharp design. I am 100% happy with this map generator

2. Native Web Radio Player Plugin

If you’re looking for a browser-based, standalone, native internet web radio plugin that allows you to rapidly weave cross-platform radio streams into your web pages then Native Web Radio Player is the perfect choice. 

It is written in JavaScript and is compatible with iOS, Android and supports all HTML5 browsers. It is also optimized to look great on desktop, tablet and phone. 

You can create any color scheme so it’s easy to integrate it in any design. It’s compatible with shoutcast2, icecast2, radionomy, radiojar and many other servers.

Check out the live preview and find out why user ThomasUber says:

Best radio plugin ever. Works very stable and fast.

3. WowBook: a Flipbook jQuery Plugin

WowBook helps turn your photos and PDF files into interactive flip books or slide shows. 

It comes with 3 ready to use templates that you can customize easily. It has 2 realistic page turning effects one for hardcovers and another for regular sheets of paper. It even plays a turning page sound in browsers that support the audio tag. 

WowBook is fully compatible with all major browsers. This means you don’t need to download flash and your flipbook can be viewed by all visitors to your website. 

Not only that, but it's fully responsive: it comes with built-in features to resize the book and make it adaptable to different screens dimensions. It comes with a responsive toolbar. 

It is also touch enabled with pinch to zoom and double click to zoom.

User anschinsan says this about WowBook:

Nice and simple to customize. I use it for several customers—they are satisfied and I've set it up in minutes. Thanks for this plugin!

4. Touch N Swipe Gallery

You want to take how users engage with image content on your store or your website to another level then Touch N Swipe Gallery is the plugin you should have. 

Want some reasons why?

Touch N Swipe Gallery plugin for mobile and desktop is fully touch enabled. Visitors to your store or website can view items closely by mouseover content to zoom on desktop while also allowing pinch to zoom, drag and swipe on mobile devices.

In addition, it has adaptive image loading which means images load faster and in the correct screen size so you will have an optimal viewing experience whether you are using desktop or mobile devices. 

Check out the live preview of this impressive fully customizable plugin and see for yourself. 

5. Resizable Multicolor Countdown

Do you want to generate some buzz about an upcoming sale or have everyone in your team be aware of time remaining until the important deadline? 

Resizable Multicolor Countdown displays the days, hours, minutes and seconds until the date of the event on your website. It is a resizable timer that comes with flipping animation and has editable colors that can be set to change over time. 

It uses vector data to draw the digits and the panels of the countdown.That means the image quality is high no mater what the size. You can also adjust the color of the back panel or you use a static color. 

User simondlh says:

Excellent plugin. Easy to customise. Looks very professional

6. Swift Box: jQuery Content Slider and Viewer 

Content sliders are a great way to present the best content on your website by grouping it together into a series of rotating slideshows. 

If this is what you want Swift Box has got you covered. 

What Does Swift Box Do? 

Swift Box organizes your content into boxes. Every box can have unlimited sources. 

You can mix content from sources as diverse as RSS feeds, Facebook pages, Twitter, Youtube, Pinterest, Soundcloud and also manage inline contents.  

The plugin handles everything for you. Titles, links, images, lists, tables: everything is collected and ready to be used.

Also, you can group multiple contents and sort them by date.

More features of this great plugin include:

• Every Swift Box element is customizable. There are more than 40 options to set for your needs.
  
  


• Content can be filtered by a powerful system, allowing you to strip and remove unnecessary HTML tags.
  
  


• Fully responsive, adaptive and mobile optimized to guarantee a perfect display on any device.


• Supports touch & drag interactions to offer a superior user experience on both desktop and mobile!


• Slider timings are fully customizable, with the ability to create also a stunning continuous slider effect, perfect for breaking news bars.

Check the live preview and see what you can do with this plugin.

7. Slick Modal PopUp

Slick Modal PopUp is one of the best popup generators in the market. It makes your popups standout by displaying your popup content more effectively and with style. It comes with lots of options that let you create unlimited combinations and achieve eye-catching effect for your messages easily.

You don’t need any special coding knowledge to use this popup generator script. It comes with 40 pre-made quick start demos to help you out. All you have to do is copy and paste!

Why Use Popups?

Popups are very effective. You can use them to conduct surveys, grow your email list, increase your social media following, display ads, and so much more. 

Ultimately website pop ups are a great way to increase engagement with visitors to your website and also a way of attracting and retaining customers. 

How is Slick Modal PopUp the Best?

To create a popup, you can start with any code or layout, including banners, newsletter signups, contact forms, special offers, images, galleries, iframes, video, and maps.

Here are some more advantages of using Slick Modal PopUp: 

• clean design and clean code


• easy to install and set the options you need


• easy to customize to fit your design and layout


• lightweight and cluster-free

Check out the live preview and see why user scippy says: 

Great product, useful and indispensable tool for every webmaster! Also with great support! 

8. Simple Price Calculator

Simple Price Calculator  can transform any HTML-based form into a price calculation form. The form is capable of multiplying two fields together and a quantity field can be added if needed.

Visitors to your website can get instant price quotes or estimates on products and services. They can see the totals together with details displayed dynamically within your page. It very easy to use: simply add the functionality to your form id, setup a few attributes and the form is ready to go!

Finally, currency and some of the form text can be changed through plugin options.

User pagespages says:

Fantastic! Easy, flexible, great documentation, great examples. Super smooth product.

9. Media Boxes Portfolio 

Media Boxes Portfolio allows you to display all kind of content in a highly powerful grid. You can use it for blog posts, display media, clients, portfolios, shopping carts, galleries, etc. It also comes with a powerful filter, sorting and search system.

You can put the plugin in with your existing HTML and CSS and it will automatically adapt to its container. Also you can quickly customize it so it adapts to your needs.

The plugin also uses Fancybox and the Magnific Popup which are very popular and powerful lightbox and popup plugins. You can load a lot of stuff in the popups like images, iframes, HTML text, Google maps and more. 

It also supports deeplinking. You can directly link to the popup so you can share the popup content with your friends or in your social network. 

Check out the live preview and see why user paulhtanaka says this of this fantastic plugin: 

Images load fast and the display is perfect! The filtering and search functions are the best part of what people tell me. Love it!

10. Smart Forms 

Forms are the most necessary tools for any website. If you need a good plugin for creating your own forms look no further than Smart Forms. Smart Forms is a responsive professional form framework with a clean consistent form UI. 

It comes with the following widgets: 

• date pickers, time pickers, month pickers, and color pickers


• numeric steppers and UI sliders 


• Google maps


• toggle switches validation


• masking 

It also comes with a large collection of ready-to-use templates such as contact forms, login forms, order forms, simple surveys, registration forms, checkout, comments, quotes, feedback forms and many others.

It also includes a plugin for formatting numbers and currencies to add separators, currency symbols, brackets and so much more. 

Here are some things you can do with Smart Forms:

• create multi-step and modal popup forms 


• dynamically clone forms and form elements 


• create chained select elements


• use form conditional logic and branching


• create autocomplete and combo widgets


• format numbers and currencies 


• export data in PDF

The forms work well across a wide rage of desktop and mobile browsers. 

Check out the live preview and see why user digidave0205 says:

Feature-packed and amazing code quality. Highly recommended.

Bonus 

 Chameleon HTML5 Audio Player With or Without Playlist

If you want a fully-featured audio player that can also give you the option to add background music to a website Chameleon HTML5 Audio Player With or Without playlist is your best choice. It supports .mp3 and .ogg audio files. 

The minimal version allows you to add background music to your website.

Here are more things you can do with this player: 

• You can customize it by changing the color for the player background, volume slider, timer, buffer, seekbar, song title, playlist background, playlist font and playlist item line separator. This makes it easier to integrate the player into any design. 


• You can automatically generate the player playlist from a folder which contains the MP3 files.


• You can insert multiple audio players on your website or on the same page

User by alexlom2012 says: 

I am fully satisfied with Player and its features! The item is exactly the same I supposed! Thank You!

HTML5 Video Player With FullScreen Video Background

HTML5 Video Player With FullScreen Video Background is a plugin that can be used as a full-screen video background for your website that will cover the entire screen without any black stripes. It also has optional fallback images for mobile devices. 

You also have options to set the video background only for a particular div in your site. 

Some features of this plugin include:

• fully responsive, including images and videos and will adapt the browser or device resolution


• compatible with IOS and Android operating systems
  
  


• fixed width or full width video player


• position the bottom navigation to left, right or center.
  
  


• lightweight: the JS file is only around 22KB

Check out the live preview and see why user jleesley says:

Great plugin! Works flawlessly. 

Conclusion:

The plugins I covered in this roundup certain stood out for me. There are many great Javascript media plugins that weren't included in this article. You can find these and more on CodeCanyon that will take your website to the next level. 

If you enjoyed this article have a look at some of our related articles and tutorials.

• 
  HTML5
  
  
  15 Best HTML5 Audio Players
  
  
  Eric Dye


• 
  HTML5
  
  
  15 Best HTML5 Video Players
  
  
  Eric Dye


• 
  jQuery
  
  
  Best jQuery Flipbook Plugins Compared
  
  
  Jane Baker


• 
  JavaScript
  
  
  How to Create a JavaScript PDF Viewer
  
  
  Ashraff Hathibelagal