HTML5 personalizado y reproductores de vídeo de YouTube-vLite. js

Vista prévia

Descripción

vLite.js is a native JavaScript plugin designed for creating custom HTML5 and Youtube Video players with your own styles.

El objetivo de esta librería es hacer que los videos de HTML5 y YouTube tengan un aspecto consistente.

Funcionamiento

Importe el archivo JavaScript ' vLite. js ' y stylesheet ' vLite. css ' a su página web.

<link rel="stylesheet" href="css/vlite.css">
<script src="js/vlite-html5+youtube.min.js"></script>

Reemplace el reproductor de vídeo HTML5 predeterminado.

<video id="demo"




class="vlite-js"




src="example.mp4">
</video>

var playerHtml5 = new vLite({


selector: '#demo',


options: {



// options here


},


callback: (player) => {



// callback function here


}
});

Para reemplazar el reproductor de vídeo de YouTube predeterminado:

• Data-YouTube-ID: Video ID

<video id="example"




class="vlite-js"




data-youtube-id="ICanFGTsW8c">
</video>

var playerYT = new vLite({


selector: '#example',


options: {



// options here


},


callback: (player) => {



// callback function here


}
});

Available configuration options.

{


// auto play

autoplay: false,


// enable controls

controls: true,


// enables play/pause buttons

playPause: true,


// shows timeline

timeline: true,


// shows time

time: true,


// shows volume control

volume: true,


// shows fullscreen button

fullscreen: true,


// path to poster image

poster: null,


// shows play button

bigPlay: true,


// keeps native controls for touch devices

nativeControlsForTouch: false


}

También puede pasar las opciones de los atributos Data-Options de la siguiente manera:

<video id="example"




class="vlite-js"




data-youtube-id="ICanFGTsW8c"




data-options='{"autoplay": false, "controls": true}'>
</video>

var myPlayer = new vLite();

// plays the video
myPlayer.play();

// pauses the video
myPlayer.pause();

// changes the current time in seconds
myPlayer.seekTo(20);

// gets the current time
myPlayer.getCurrentTime();

// gets the duration
myPlayer.getDuration();

// fullscreen mode
myPlayer.requestFullscreen();

// exits the fullsceen mode
myPlayer.exitFullscreen();

// destroys the player
myPlayer.destroy();