https://github.com/wingkwong/jquery-chameleon

:video_camera: A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player
https://github.com/wingkwong/jquery-chameleon

html5-video-player jquery-chameleon jquery-plugin jwplayer jwplayer-video slide slide-images slides sync synchronizing-slide-images video video-sync youtube-player

Last synced: about 1 year ago
JSON representation

:video_camera: A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player

• Host: GitHub
• URL: https://github.com/wingkwong/jquery-chameleon
• Owner: wingkwong
• License: mit
• Created: 2018-01-30T07:14:58.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T02:44:33.000Z (over 2 years ago)
• Last Synced: 2025-04-15T09:42:00.181Z (about 1 year ago)
• Topics: html5-video-player, jquery-chameleon, jquery-plugin, jwplayer, jwplayer-video, slide, slide-images, slides, sync, synchronizing-slide-images, video, video-sync, youtube-player
• Language: JavaScript
• Homepage: https://wingkwong.github.io/jquery-chameleon/
• Size: 1.08 MB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# jquery-chameleon

A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player

[![NPM version](https://img.shields.io/npm/v/jquery-chameleon.svg)](https://www.npmjs.com/package/jquery-chameleon) [![License](https://img.shields.io/npm/l/jquery-chameleon.svg)](https://github.com/wingkwong/jquery-chameleon/blob/master/LICENSE) [![Total NPM Download](https://img.shields.io/npm/dt/jquery-chameleon.svg)](https://www.npmjs.com/package/jquery-chameleon)

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fwingkwong%2Fjquery-chameleon.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fwingkwong%2Fjquery-chameleon?ref=badge_shield)

![screenshot](https://wingkwong.gitbooks.io/jquery-chameleon/content/assets/cover-1-1.3.0.png)

![screenshot](https://wingkwong.gitbooks.io/jquery-chameleon/content/assets/cover-2-1.3.0.png)

### Features

* **Video Synchronization with slide images:**

	Synchronzing slide images with videos based on the preset rules.

* **Markers:**

	Showing the highlighted slide, i.e. the one you are currently viewing. Navigated to a specific moment with a simple click.

* **Carousel Navigatior:**

	Showing N slides in a carousel where N can be configured with the variable numOfCarouselSlide

* **Responsive:**

	Rendering in a responsive way or not is your choice.

* **Multiple Video Player Support:**

	Currently supported video players are HTML5 player (by default), YT Player and JWPlayer 7.

* **Download Panel:**

	Allowing users to download video, slides and transcript.

### Installing

via NPM:

```

npm install jquery-chameleon

```

via CDN:

```

https://gitcdn.xyz/repo/wingkwong/jquery-chameleon/master/src/chameleon.min.js

```

```

https://gitcdn.xyz/repo/wingkwong/jquery-chameleon/master/src/chameleon.min.css

```

### Getting Started

HTML:

```HTML



```


Javascript:

```Javascript

$('.chameleon').chameleon(options);

```

### Documentation

The documentation is available at [https://wingkwong.gitbooks.io/jquery-chameleon/content/](https://wingkwong.gitbooks.io/jquery-chameleon/content/)

## Authors

* **WONG, Wing Kam** -  [@wingkwong](https://github.com/wingkwong)

## License

This project is licensed under the MIT License - see the [LICENSE](https://github.com/wingkwong/jquery-chameleon/blob/master/LICENSE) file for details

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fwingkwong%2Fjquery-chameleon.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fwingkwong%2Fjquery-chameleon?ref=badge_large)