# semantic-ui-media-progress

> Extension of semantic-ui progress bar for media with interaction

Latest version **0.1.3** (published 2018-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install semantic-ui-media-progress
pnpm add semantic-ui-media-progress
yarn add semantic-ui-media-progress
bun add semantic-ui-media-progress
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-08-17 |
| First published | 2018-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 51 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Takeshi Ikuma |
| Maintainers | hokiedsp |
| Keywords | semantic-ui, progress bar, media playback, interactive |

## Links

- npm: https://www.npmjs.com/package/semantic-ui-media-progress
- Repository: https://github.com/hokiedsp/semantic-ui-media-progress
- Issues: https://github.com/hokiedsp/semantic-ui-media-progress/issues
- npm.io page: https://npm.io/package/semantic-ui-media-progress

## Recent versions

- 0.1.3 (latest) — 2018-08-17
- 0.1.2 — 2018-08-14
- 0.1.1 — 2018-08-14
- 0.1.0 — 2018-08-13
- 0.0.2 — 2018-08-11
- 0.0.1 — 2018-08-09

## README

<!-- [![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![test][test]][test-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url] -->

# semantic-ui-media-progress-js
Semantic-UI backed media progress bar for HTML 5 \<video\> and \<audio\> elements

This CSS/jQuery plug-in creates an interactive progress bar for HTML 5 \<video\> and \<audio\> elements with features:

- Attach to a \<video\> and \<audio\> element and the progress is updated via HTML Media Event
- Media currentTime can be modified by clicking on or dragging the progress bar
- May add markers on the progress bar

This module depends/extends on Semantic UI's progress bar module for the main functionality. It also uses two other Semantic UI components: icon and popup.

## Install

```bash
npm i semantic-ui-media-progress
```

## Usage

### Include in Your HTML

Include CSS and Javascript in `dist` folder for use in your project. Just link to these files in your HTML.

```html
<link rel="stylesheet" type="text/css" href="../node_modules/semantic-ui-media-progress/dist/mediaProgress.css">
<script src="../node_modules/semantic-ui-media-progress/dist/mediaProgress.js"></script>
```

Note: Modify the paths according to the location of the HTML file.

Make sure to include jQuery and Semantic-UI files as well.

### Minimal Example

```html
<!-- target media element -->
<video type='video/mp4'></video>

<!-- media progress bar -->
<div class="ui progress media" data-media="video">
  <div class="bar">
    <div class="cursor">
      <i class="fitted circle icon"></i>
    </div>
  </div>
</div>
```

To enable the media progress bar, simply execute:

```javascript
$(".ui.media.progress").mediaProgress();
```

The progress bar remain disabled until video is loaded on the \<video\> element.

Now, to add a marker to the progress bar:

```javascript
$(".ui.media.progress").mediaProgress("add marker");
```

...To be completed...

# TODO's

- [ ] Complete documentation
- [ ] Add testing
- [ ] Allow turning off mouse interaction

---
_Source: https://npm.io/package/semantic-ui-media-progress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._