https://github.com/gmarty/x-video

An enhanced video player for modern browsers with a consistent UI and extra features!
https://github.com/gmarty/x-video

Last synced: 4 months ago
JSON representation

An enhanced video player for modern browsers with a consistent UI and extra features!

• Host: GitHub
• URL: https://github.com/gmarty/x-video
• Owner: gmarty
• Created: 2014-02-21T17:10:49.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2015-08-11T22:05:38.000Z (over 9 years ago)
• Last Synced: 2024-08-01T19:45:52.650Z (7 months ago)
• Language: JavaScript
• Homepage: http://gmarty.github.io/x-video/
• Size: 5.19 MB
• Stars: 62
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# x-video

> An enhanced video player for modern browsers with a consistent UI and extra

features!

## Introduction

`` works as a drop-in replacement for the `` tag. Before:

```html

```

After:

```html

```

Everything works like the original video element:

* `` tag attributes (`controls`, `autoplay`...).

* The video element attributes (`videoWidth`, `muted`...).

* The video element methods (`canPlayType()`, `pause()`...).

* The video element events (`play`, `pause`...).

## Working in a no JavaScript environment

If you want to make sure the player will work on browsers with no JavaScript

support, just add a `` tag with the needed attributes inside your

``:

```html

  

```

`x-video` will run normally, but will fallback to the native player if

JavaScript is not available.

## Extra features

### Chapter navigation

If you add a chapter track to a video, buttons to navigate to the next/previous

chapters are added:

```html

  

```

At least one `` tag must have a `kind="chapters"` and `default`

attributes with a `src` pointing to a valid `vtt` file.

When one of these 2 buttons is clicked, the element fires a `chapterchange`

event.

Note: the web server must support the `Range` HTTP header to use this feature.

### Playlist

To play several videos successively, add multiple `` tags inside a

`` container:

```html

  

  

  

```

The videos will be played one after another. Only the attributes of the first

one will be preserved, the attributes from the subsequent elements will be

ignored.

A `videochange` event is fired when a new element from the playlist is loaded.

By default, the new video is only loaded, but not played. To play it, add a

`autoplay` attribute to `` or listen to the `videochange` event to

trigger the playback in JavaScript:

```javascript

xVideo.addEventListener('videochange', function() {

  this.play();

});

```

## Methods

### playByIndex(index)

To play the video located at a certain index in the playlist, you can do:

```html

  

  

  

var xVideo = document.querySelector('x-video');

xVideo.playByIndex(2); // Play the 3rd video in the list.

```

### playChapter(index)

Use `playChapter()` method to play a specific chapter in the current video:

```html

  

    

  

var xVideo = document.querySelector('x-video');

xVideo.playChapter(2); // Start playback from the 3rd chapter.

```