2019年10种最佳JavaScript媒体脚本和插件

音频，视频，活动簿，画廊，地图，倒数时钟和弹出窗口等互动元素会增加访问者花在与您的网站上的内容互动上的时间。 它们有助于创造出色的用户体验。

在本文中，我将向您展示CodeCanyon上的其他一些交互式脚本，它们可以使您的网站更加生动有趣。

为什么要使用媒体脚本或插件？

媒体种类很多。 假设您希望网站上的访问者填写调查表，当他们浏览您的页面时会弹出该调查表。 或者，您希望用户搜索商店的位置并了解如何到达商店。

最常见的交互式媒体是地图，音频，视频，活页簿以及交互式元素，例如调查，弹出窗口和时钟。 它们是网站内容必不可少的一部分。 这些的良好结合将推动客户参与。

但是，想象一下手动编码每个交互式媒体项目-每个视频播放器，音频播放器，活动簿，地图或倒计时时钟。

这是脚本派上用场的地方。 JavaScript脚本或插件是一段代码，您可以将其安装在网站上以添加功能。 媒体脚本使您可以共享和嵌入视频，音频，交互式元素或其他多媒体等媒体，以及活页簿形式的书籍，杂志或目录。

让我们看一下CodeCanyon上可用的一些最佳JavaScript媒体脚本 。

什么是脚本？

脚本是一段代码，可以执行某些任务或向您的网站添加功能。 脚本包含一组指令，这些指令可以自动执行网站上的流程。

脚本在后台运行（访问者看不到脚本），以使您的网站更加灵活和可用。 该脚本在页面加载时是自初始化的，并且只要页面保持打开状态就可以继续运行。 您只需安装它就可以了。 很棒的是，您可以向网站添加高级功能，而无需知道如何编写代码。

如何选择媒体脚本或插件

CodeCanyonJavaScript媒体脚本和插件价格实惠且易于使用。 您需要做的就是下载脚本并将其安装在您的网站上。 该脚本将完成所有后台工作，以使您的视频，音频，动画书或其他媒体平稳运行，而不会影响您的网站。

此外，由于它们的构建考虑了演示，因此它们提供了多种易于使用的模板，您可以从中选择模板，以增强网站的外观。

要记住的事情包括：

易于使用：这包括易于下载和安装，上传和调整视频大小以及使其适应各种屏幕尺寸的难易程度。

高度可定制：脚本应允许定制完全适合您为网站选择的任何主题。

跨浏览器兼容性：并非每个访问您网站的人都使用Google Chrome或Mozilla。 确保您的脚本与访问者可能使用的任何浏览器兼容。

跨设备的兼容性：脚本应在台式机，笔记本电脑，平板电脑和移动电话上无缝运行。 不仅如此，脚本还必须具有响应能力，这意味着它可以适应各种设备类型，宽度，高度，方向，分辨率，纵横比和颜色深度。

完全触摸支持：带有触摸屏的移动设备应可以使用该脚本。

轻量级：文件应轻量级，以便您的媒体可以快速初始化和加载，而不会降低网站速度。

单机版：无需下载Flash之类的第三方插件即可运行脚本。 但是，请注意，脚本通常需要流行的库，例如jQuery。

让我们看一下CodeCanyon上一些最受欢迎JavaScript媒体脚本。

1. 交互式地图生成器

交互式地图生成器是一个功能强大的插件，它使用功能强大的Google Geochart API创建SVG矢量地图。 它与Wix，Squarespace，Joomla和其他CMS兼容，允许您将JavaScript代码粘贴到内容中。

这是您可以使用Interactive Maps Generator进行的操作 ：

1. 生成任意数量的地图
2. 嵌入代码以将地图放置在网站内容的任何部分

您可以为网站创建可点击的地图，包括美国地图，世界地图或任何其他可用区域。 仅仅是开始：您可以向地图添加活动的彩色区域，也可以向活动的区域添加交互性。 您还可以自定义地图的外观：背景色，框边框的宽度和颜色，非活动区域的颜色以及地图的宽度和高度。

用户NPCAComms谈到了Interactive Maps Generator ：

我曾经花过的最好的钱。 易于使用和清晰的设计。 我对这个地图生成器100％满意

2.本机Web Radio Player插件

如果您正在寻找一个基于浏览器的独立本机互联网Web广播插件，该插件可让您将跨平台的广播流快速地编织到您的网页中，那么Native Web Radio Player是最佳选择。

它使用JavaScript编写，与iOS和Android兼容，并支持所有HTML5浏览器。 它还经过优化，可以在台式机，平板电脑和手机上看起来很棒。

您可以创建任何配色方案，因此很容易将其集成到任何设计中。 它与Shoutcast 2，Icecast 2，Radionomy，Radiojar和许多其他服务器兼容。

查看实时预览 ，了解为什么用户ThomasUber说：

有史以来最好的无线电插件。 工作非常稳定和快速。

3. WowBook：Flipbook jQuery插件

WowBook可帮助您将照片和PDF文件转换为交互式活页簿或幻灯片放映。

它带有三个易于使用的自定义模板。 它具有两种逼真的翻页效果：一种用于精装，另一种用于普通纸。 它甚至在支持音频标签的浏览器中播放翻页声音。

WowBook与所有主要浏览器完全兼容。 这意味着您无需下载Flash，并且您网站上的所有访问者都可以查看您的翻书。

不仅如此，它还具有完全的响应能力：它具有内置功能，可以调整书籍的尺寸并使其适应不同的屏幕尺寸。 它带有一个响应式工具栏。

也可以通过触摸启用该功能，并用捏放大和双击放大。

用户anschinsan关于WowBook说道 ：

尼斯和易于定制。 我将其用于多个客户-他们很满意，并且我在几分钟内就完成了设置。 感谢这个插件！

4. 轻触N滑动图库

如果您想让用户如何与商店或网站上的图像内容进行互动，那么您应该拥有Touch N Swipe Gallery 。

想要一些原因吗？

手机和台式机的Touch N Swipe Gallery插件已完全启用触摸功能。 商店或网站的访问者可以通过将内容悬停在内容上以在桌面上缩放来密切查看项目，并且该插件还支持在移动设备上进行缩放，拖动和滑动。

此外，它具有自适应图像加载功能，这意味着图像加载速度更快且屏幕尺寸正确，因此无论您使用台式机还是移动设备，您都将获得最佳的观看体验。

查看这个令人印象深刻的，完全可定制的插件的实时预览 ，并亲自体验。

5. 可调整大小的多色倒计时

您是否想对即将到来的销售产生一些嗡嗡声，还是让团队中的每个人都知道在重要的截止日期之前还有剩余时间？

可调整大小的多色倒数显示在网站上活动日期之前的天，小时，分钟和秒。 它是可调整大小的计时器，具有翻转动画功能，并且具有可设置的颜色，可以将其设置为随时间变化。

它使用矢量数据绘制数字和倒计时面板。 这意味着无论尺寸大小，图像质量都很高。 您还可以调整后面板的颜色或使用静态颜色。

用户simondlh说：

优秀的插件。 易于定制。 看起来很专业

6. Swift Box：jQuery内容滑块和查看器

通过将内容分组为一系列旋转幻灯片，内容滑块是在网站上呈现最佳内容的一种好方法。

如果这是您想要的， Swift Box可以满足您的需求。

Swift Box会做什么？

Swift Box将您的内容整理到盒子中。 每个盒子可以有无限的来源。

您可以混合来自RSS提要，Facebook页面，Twitter，YouTube，Pinterest和SoundCloud等各种来源的内容，还可以管理内联内容。  

该插件可以为您处理所有事情。 标题，链接，图像，列表，表格：一切都已收集并可以使用。

另外，您可以将多段内容分组并按日期排序。

这个出色的插件的更多功能包括：

• 每个Swift Box元素都是可自定义的。 有40多个选项可以满足您的需求。
  
• 内容可以通过功能强大的系统进行过滤，从而使您可以剥离和删除不必要HTML标签。
  
• 全面响应，自适应和移动优化，可确保在任何设备上完美显示。
• 支持触摸和拖动交互，以在台式机和移动设备上提供卓越的用户体验！
• 滑块定时是完全可自定义的，具有创建惊人的连续滑块效果的能力，非常适合打破新闻栏。

检查实时预览，并查看如何使用此插件。

7. 光滑的模态弹出窗口

Slick Modal PopUp是市场上最好的弹出窗口生成器之一。 通过更有效，更时尚地显示弹出内容，使弹出窗口脱颖而出。 它带有许多选项，可让您创建无限的组合并轻松地为您的消息实现醒目的效果。

您不需要任何特殊的编码知识即可使用此弹出窗口生成器脚本。 它带有40个预制的快速入门演示，可以帮助您。 您要做的就是复制并粘贴！

为什么要使用弹出窗口？

弹出窗口非常有效。 您可以使用它们进行调查，增加电子邮件列表，增加社交媒体关注度，展示广告等等。

最终，网站弹出窗口是增加与网站访问者互动度的好方法，也是吸引和留住客户的一种方式。

Slick Modal PopUp最好吗？

要创建弹出窗口，您可以从任何代码或布局开始，包括横幅，新闻简报注册，联系表单，特价，图像，画廊，iframe，视频和地图。

这是使用Slick Modal PopUp的更多优点：

• 简洁的设计和简洁的代码
• 易于安装和设置所需的选件
• 易于定制以适合您的设计和布局
• 轻巧，无杂物

查看实时预览 ，看看为什么用户scippy说：

伟大的产品，对每个网站管理员都是有用而必不可少的工具！ 也有很大的支持！

8. 简单的价格计算器

简单的价格计算器可以将任何基于HTML的表单转换为价格计算表单。 该表格能够将两个字段相乘，并且可以根据需要添加数量字段。

您网站的访问者可以获得产品和服务的即时报价或估计。 他们可以查看总计以及在页面上动态显示的详细信息。 它非常易于使用：只需将功能添加到表单ID中，设置一些属性，即可开始使用表单！

最后，可以通过插件选项更改货币和某些表单文本。

用户页面页面显示 ：

太棒了！ 简单，灵活，出色的文档和出色的示例。 超级光滑的产品。

9. 媒体盒产品组合

Media Boxes Portfolio使您可以在功能强大的网格中显示各种内容。 您可以将其用于博客文章，显示媒体，客户，投资组合，购物车，画廊等。它还带有功能强大的过滤器，排序和搜索系统。

您可以将插件与现有HTML和CSS一起放入，它将自动适应其容器。 另外，您可以快速对其进行自定义，使其适应您的需求。

该插件还使用Fancybox和Magnific Popup，它们是非常流行且功能强大的lightbox和popup插件。 您可以在弹出窗口中加载很多东西，例如图像，iframe，HTML文本，Google地图等等。

它还支持深度链接。 您可以直接链接到弹出窗口，以便可以与朋友或社交网络共享弹出窗口的内容。

观看实时预览 ，看看为什么paulhtanaka用户对这个出色的插件这么说：

图像加载速度快，显示效果完美！ 筛选和搜索功能是人们告诉我的最好的部分。 爱它！

10. 智能表格

表单是任何网站最必要的工具。 如果您需要一个好的插件来创建自己的表单，那么Smart Forms就是最好的选择 。 Smart Forms是一个响应良好的专业表单框架，具有干净一致的表单UI。

它带有以下小部件：

• 日期选择器，时间选择器，月份选择器和颜色选择器
• 数字步进器和UI滑块
• 谷歌地图
• 拨动开关验证
• 掩蔽

它还附带了大量现成的模板，例如联系表，登录表，订单，简单调查，注册表，结帐，评论，报价，反馈表等。

它还包括一个用于格式化数字和货币的插件，以添加分隔符，货币符号，方括号等等。

您可以使用智能表单执行以下操作：

• 创建多步骤和模式弹出窗口
• 动态克隆表单和表单元素
• 创建链接的选择元素
• 使用形式条件逻辑和分支
• 创建自动完成和组合窗口小部件
• 格式化数字和货币
• 以PDF格式导出数据

这些表格可以在各种台式机和移动浏览器中正常运行。

查看实时预览 ，看看为什么digidave0205用户说：

功能丰富且惊人的代码质量。 强烈推荐。

奖金

带有或不带有播放列表的Chameleon HTML5音频播放器

如果您需要功能齐全的音频播放器，并且还可以选择向网站添加背景音乐，则“ 带或不带播放列表的Chameleon HTML5音频播放器”是您的最佳选择。 它支持.mp3和.ogg音频文件。

最低版本允许您将背景音乐添加到您的网站。

您可以使用此播放器执行以下操作：

• 您可以通过更改播放器背景，音量滑块，计时器，缓冲区，搜寻栏，歌曲标题，播放列表背景，播放列表字体和播放列表项目行分隔符的颜色来自定义它。 这样可以更轻松地将播放器集成到任何设计中。
• 您可以从包含MP3文件的文件夹中自动生成播放器播放列表。
• 您可以在网站或同一页面上插入多个音频播放器

alexlom2012的用户说：

我对播放器及其功能完全满意！ 该项目是我应该完全相同！ 谢谢！

具有全屏视频背景HTML5视频播放器

具有全屏视频背景HTML5视频播放器是一个插件，可以用作网站的全屏视频背景，它将覆盖整个屏幕而没有任何黑色条纹。 它还具有用于移动设备的可选后备图像。

您还可以选择仅为网站中的特定div设置视频背景。

该插件的一些功能包括：

• 完全响应，包括图像和视频，并将适应浏览器或设备分辨率
• 与iOS和Android操作系统兼容
  
• 固定宽度或全角视频播放器
• 将底部导航定位到左，右或中心。
  
• 轻巧的 ：JS文件只有22KB左右

查看实时预览 ，看看为什么用户jleesley说：

很棒的插件！ 完美地工作。

结论

我在本综述中介绍的插件无疑对我很突出。 有许多很棒JavaScript媒体插件未包含在本文中。 您可以在CodeCanyon上找到这些内容-还有更多内容可以使您的网站更上一层楼 。

翻译自: https://code.tutsplus.com/articles/best-javascript-media-scripts-and-plugins-of-the-year--cms-32970