Generar capítulos interactivos para vídeos de YouTube-YouTube-capítulos

Vista prévia

Descripción

YouTube-capítulos es un plugin de JavaScript vainilla para generar capítulos interactivos para videos largos de YouTube. Para que los visitantes puedan saltar rápidamente entre múltiples segmentos de tu video haciendo clic en los enlaces del capítulo.

See also:

• crear capítulos interactivos para vídeos HTML5 largos – vidcha. js

Funcionamiento

Cargue la hoja de estilos YouTube-chapters. min. CSS y JavaScript YouTube-chapters. min. js en la página.

<link href="dist/css/youtube-chapters.min.css" rel="stylesheet">
<script src="dist/js/youtube-chapters.min.js"></script>

Crea un elemento de marcador de posición para colocar el reproductor de vídeo de YouTube.

<div id="player"></div>

Inicialice el complemento YouTube-capítulos en el elemento de marcador de posición y especifique el ID de vídeo.

YTC('#player', {

youtubeId: 'DLspaHs4N5s'
});

Añade marcadores de capítulos personalizados al vídeo de YouTube.

YTC('#player', {

youtubeId: 'DLspaHs4N5s',

chapters: [

{


time: '0m 0s',


title: '01 - Chapter 1',


id: 'id1',


text: '01 - Chapter 1',

},

{


time: '03:43',


title: '02 - Chapter 2',


id: 'id2',


text: '02 - Chapter 2',

},

{


time: '06:43',


title: '03 - Chapter 3',


id: 'id3',


text: '03 - Chapter 3',

}]
});

Más opciones de configuración.

YTC('#player', {


// Sets to true if the YouTube video should be fluid/responsive

fluid: false,


// Random ID

id: '',


// Video loader

loader: '',


// Width/height of the video

width: '500px',

height: '350px',


// Sets the YouTube playerVars

playerVars: {


iv_load_policy: 3,


showinfo: 0,


modestbranding: 1,


wmode: 'transparent',

},


// Sets to true if the times should appear in the chapter frame.

showTime: false

});