Best jQuery Video & Audio Plugins & Tutorials with Demo

ArtPlayer : Modern HTML5 Video Player

ArtPlayer : Modern HTML5 Video Player

Artplayer.js is a modern and full featured HTML5 video player.

  • Support vtt and srt subtitles
  • Support video quality switching
  • Support for custom controllayercontextmenusetting
  • Support playback rateaspect ratioflipwindow fullscreen or web fullscreen adjustment
  • Support integration with other dependencies, like: flv.jshls.jsdash.jsshaka-playerwebtorrent
  • Support chrome native picture-in-picture mode, or custom picture-in-picture mode
  • Support thumbnails and highlight in the progress bar
  • Support to maintain the original video ratio, adaptive size
  • Support rich custom event monitoring, easy to expand
  • Support for internationalization of controls
  • Support for custom plugins
  • Support local video preview
  • Support subtitle time offset

Vidbacking : jQuery Video Background Plugin

Vidbacking : jQuery Video Background Plugin

Vidbacking is a small jQuery plugin to simplify the process of showing HTML5 video as background. You can use this for showing a video file or Youtube video on whole page background or to show the video as the background of a <div>, <section>, like elements.

Features:

  • Cross Browser Video Background Plugin.
  • Support mp4, webm video files.
  • Support Youtube video.
  • Very small file size (4kb total).
  • Easy to use.
  • Can be used for both page background or for an element background.
  • Image fallback when video not supported.
  • Pause video when out of viewport.
  • Multiple instances on same page possible.
  • Device friendly, responsive.

lem Youtube : jQuery wrapper for the Youtube API

lem Youtube : jQuery wrapper for the Youtube API

lem Youtube is a jQuery wrapper for the Youtube API.

Audio Recorder Polyfill

Audio Recorder Polyfill

MediaRecorder polyfill to record audio in Edge and Safari 11.

  • Spec compatible. In the future when all browsers will support MediaRecorder, you will just remove polyfill.
  • Small. 1 KB (minified and gzipped). No dependencies. It uses Size Limit to control size.
  • One file. In contrast to other recorders, this polyfill uses “inline worker” and don’t need a separated file for Web Worker.

ckin : HTML5 Video Player using Javascript

ckin : HTML5 Video Player using Javascript

ckin is a opensource lightweight HTML5 Video Player using Javascript (No jQuery).

cPlayer : A beautiful and clean WEB Music Player by HTML5

cPlayer : A beautiful and clean WEB Music Player by HTML5

cPlayer is a beautiful and clean WEB Music Player by HTML5.

Features:

  • Lyrics display
  • Playlists
  • Three play modes, Single cycle, list loop, random play
  • Designed for touch devices
  • Modular Customizable
  • Media Session Support

GRT Youtube Popup – jQuery Plugin

GRT Youtube Popup - jQuery Plugin

GRT Youtube Popup is a simple and lightweight jQuery plugin for playing youtube embed videos in a popup.

Animate Images and Videos with curtains.js

Animate Images and Videos with curtains.js

curtains.js was created with just that issue in mind. It is a small vanilla WebGL javascript library that converts HTML elements containing images and videos into 3D WebGL textured planes, allowing you to animate them via shaders.
You can define each plane size and position via CSS, which makes it super easy to add WebGL responsive planes all over your pages.

Instacam : jQuery Instant Canvas Video Plugin

Instacam : jQuery Instant Canvas Video Plugin

Instacam is a jQuery plugin to perform instant canvas video through the WebRTC API with a fresh touch of CSS filters.The plugin is compatible with browser that natively support the HTML5 canvas tag, requestAnimationFrame API, HTMLMediaElement API, navigator.mediaDevicesand Promises API. The CSS filtering requires the CSS filter features to properly work.

AlphaTab : Music notation & Guitar Tablature rendering Library

AlphaTab : Music notation & Guitar Tablature rendering Library

AlphaTab is a cross platform music notation and guitar tablature rendering library.

You can use alphaTab within your own website or application to load and display music sheets from data sources like Guitar Pro or the built in markup language named alphaTex.

Features:

  • load GuitarPro 3-5, GuitarPro 6, AlphaTex or MusicXML (experimental)
  • render as SVG, HTML5 canvas, GDI+,…
  • adapt to your responsive design by dynamic resizing
  • play the music sheet via HTML5 Web Audio API and Flash