Reproductor de audio/vídeo personalizable ligero-reproductor multimedia

Vista prévia

Descripción

Media Player es una biblioteca de JavaScript ligera vainilla que le permite crear responsive, accesible, personalizable reproductor multimedia HTML5 para < a href = "https://wikicss.com/tag/video-player/" > video y < a href = "https://wikicss.com/tag/audio/" > audio archivos .

Main features:

• Interacciones de teclado.
• Controles personalizados.
• Reproducción.
• Subtítulo.
• Compatibilidad con RTL (derecha a izquierda).

¿Cómo funciona?

Instale el reproductor multimedia e impórtelo en el proyecto.

$ npm install mediaplayer

import MediaPlayer from 'media-player';

O cargue el JavaScript compilado & archivos CSS en el documento.

<link href="media-player.css" rel="stylesheet">
<script src="media-player.js"></script>

Inserte sus propios videos o audios en el documento y configuración del reproductor multimedia pasando las opciones a través del atributo ' Data-Options ' como se muestra a continuación:

<video class="media-player"




src="sample.mp4"




poster="sample.jpg"




controls




loop




data-options='{"prefix":"media","show":{"download":false,"volume":false,"remainingTime":false},"lang":{"currentTime":"current time","minutes":"minutes","mute":"mute","play":"play","remainingTime":"remaining time","seconds":"seconds","volume":"volume"}}'>
</video>

<audio class="media-player"




src="sample.mp3" controls




data-options='{"prefix":"media","show":{"fullscreen":false},"lang":{"currentTime":"current time","minutes":"minutes","mute":"mute","play":"play","remainingTime":"remaining time","seconds":"seconds","volume":"volume"}}'>
</audio>

Eso es todo. Todas las opciones posibles para la configuración & personalizar el reproductor multimedia.

{

prefix: 'media',

show: {


play: true,


mute: true,


volume: true,


currentTime: true,


remainingTime: true,


time: true,


download: true,


fullscreen: true

},

lang: {


play: 'play',


pause: 'pause',


mute: 'mute',


unmute: 'unmute',


volume: 'volume',


currentTime: 'current time',


remainingTime: 'remaining time',


enterFullscreen: 'enter fullscreen',


leaveFullscreen: 'leave fullscreen',


download: 'download'

},

svgs: {


play: '#symbol-play',


pause: '#symbol-pause',


mute: '#symbol-mute',


unmute: '#symbol-unmute',


volume: '#symbol-volume',


currentTime: '#symbol-currentTime',


remainingTime: '#symbol-remainingTime',


enterFullscreen: '#symbol-enterFullscreen',


leaveFullscreen: '#symbol-leaveFullscreen',


download: '#symbol-download'

},

timeDir: 'ltr',

volumeDir: 'ltr'
}

Registro de cambios

10/08/2018

• v2.0.0