Reproductor de vídeo interactivo HTML5 en Vanilla JavaScript-ivid

Vista prévia

Descripción

ivid es un reproductor de vídeo HTML5 interactivo y accesible que puede seleccionar otros vídeos en el vídeo actual.

Keyboard interactions:

• de espacio: reproducir/pausar
• m : MUTE/Unmute
• f : conmutador de pantalla completa
• arriba/abajo : subir/bajar volumen
• derecha/izquierda: adelante/atrás

Funcionamiento

Instalación:

# NPM
$ npm install @ividjs/ivid --save

Importe los archivos del ivid en el documento HTML.

<script src="//unpkg.com/@ividjs/[email protected]" type="module" async></script>

Importe la hoja de estilo opcional para el reproductor de vídeo HTML5.

<link href="//unpkg.com/@ividjs/[email protected]/dist/ivid.min.css" rel="stylesheet">

Importe los iconos de material opcionales para los controles.

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

El HTML.

<i-video id="ivid-example" controls autoplay playsinline></i-video>

Especifique los vídeos.

let video1 = {


uid: 111,


src: "1.mp4"
};

let video2 = {


uid: 222,


src: "2.mp4"
};

let video3 = {


uid: 333,


src: "3.ogv"
};

let video4 = {


uid: 444,


src: "4.ogv"
};

video1.options = {

choices: {


[video2.uid]: 'A cat', // ... the first choice will be the default fallback


[video3.uid]: 'A troiKat',

},
}

// The next video can be set directly
video2.options = {

choices: { // By displaying "choices"... or forcing them through


[video3.uid]: 'troikating...'

}
}

video3.options = {

fallback: video2.uid // Or seamlessly
}

// Or setting everything up, for a better control
video4.options = {

choices: {


[video1.uid]: 'Meow',

},

fallback: video3.uid
}

Cree un objeto de modelo. Cada atributo de modelo es un videoUID de valor: el propio vídeo.

let model = {


[video1.uid]: video1,


[video2.uid]: video2,


[video3.uid]: video3,


[video4.uid]: video4
};

Agregue el modelo al componente iVid (como una cadena JSON).

document.getElementById("ivid-example").setAttribute("model", JSON.stringify(model));