(SOLUCIONADO) Como agrego esta linea de código javascript correctamente? (VideoJS-Playlist)

  • Autor Autor An6oro
  • Fecha de inicio Fecha de inicio
An6oro

An6oro

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, estoy en proceso de crear una web personal de películas y series, en la web aparecen muchos tutoriales estresantes en ingles que no comprendo del todo y se me escapan detalles, y la mayoría está pensada para personas con conocimientos más avanzados que el promedio, sobre todo en GitHub, a duras penas encuentras tutoriales en blogs y contados con los dedos de la mano, tutoriales en español, y por costumbre van orientados a incrustar código por separado, o sea HTML, CSS, JS, en sus respectivas secciones de la plantilla, para que después simplemente trabajes con etiquetas o sintaxis de un plug-in en concreto, el tema es que encontré algunos problemillas de exportación con ese método en Bootstrap, sí que opte por armar el código 'todo en uno', para que después lo agregue a las entradas que quiera sin complicación alguna, funciona exactamente igual, sí que no hay problema, aclaro desde ya, que no sé lenguajes de programación ni nada, solo me toco muchas horas de investigación, y al final conseguí armar un código con distintos tutoriales, porque NINGUNO te da el código así tal cual lo arme yo, y no sé por qué la verdad, le facilitaría la vida a muchas personas, en fin, este es el resultado:
demo: https://urltvx.blogspot.com/ código listo para usar: https://pastebin.com/raw/fiuEAdH9

ahora el problema es que no logro agregar correctamente la sección tracks o subtítulos, y me está estresando bastante, y en vez de mamarme de nuevo días y horas de navegación por internet, esta vez opto por algún foro de ayuda, sé que alguien que sepa de JavaScript tiene la capacidad de resolver el problema mucho más rápido que yo, en fin, este es el código tal cual lo tengo yo, sin subtítulos:
JavaScript:
{sources: [{
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    type: 'video/mp4'
  }],
  poster: 'https://getwallpapers.com/wallpaper/full/e/4/b/1490018-widescreen-big-buck-backgrounds-1920x1080-for-full-hd.jpg'
},

Ahora para agregar los subtítulos en cada video, algunos tutoriales te dicen que agregues estas líneas:
JavaScript:
"textTracks":[ { "kind":"captions", "label":"English", "src":"subtítulo.vtt", "default":false } ]
JavaScript:
track: { kind: 'captions', label: 'English', srclang: 'en', src:'subtítulo.vtt'}}]);

Pero ninguno te muestra donde, y como siempre ninguno da ejemplos funcionales, y a la hora de intentar usar simple lógica, todos los intentos para agregarlos fallaron.
La página oficial en GitHub te muestra que la etiqueta correcta es 'textTracks', pero absolutamente nada más, ningún ejemplo para variar.


¿Entonces como agrego correctamente esa sección de subtítulos a cada vídeo en cuestión?

gracias desde ya, a cualquiera que atienda mis dudas!
 
por que usar videioJs y no otra alternativa?. VideoJs es free pero siempre se me hizo muy pesado a comparación de otros reproductores.
 
Yo lo lamento Bro, soy principiante aun en eso del manejo de código, pero si no es que vas a colocar los Subtítulos manuales a la multimedia no veo el porque complicarse mucho. Checa, la gente de SolidFiles son los creadores del estilo de ese reproductor y ellos la función de los subtítulos la mantienen disabled.

Link: https://www.solidfiles.com/e/5dG648j7jPXDn

Generalmente usamos un programa externo (Ejemplo: Aegisub) con el que montamos los subtítulos y lo subimos tranquilamente al servidor, a no ser que quieras mostrar subtítulos diferente según el país de procedencia del usuario.
 
pero todos las alternativas de reproductores soportan subtitulos pero no se si todos soportan .ASS o solo STR, busca bien sobre otras opciones.
Pero no pegas las subtitulos al video usando algún software?

Si tu vas a traducir los videos y subir el archivo de la traduccion es mas facil que te roben tu traduccion/trabajo. No seria mejor que los pegues al video?
 
Se de la existencia de Clappr, Dplayer, Plyr, MediaElement, Flowplayer, y unos cuantos mas, puedo hacerlos funcionar sin problemas si se trata de 1 video en concreto, como por ejemplo una película, pero cuando quieres subir series, debes hacer que esos reproductores sean capaces de reproducir playlist, y ahí es donde todo se complica y debes hacer uso de plug-ins extras al reproductor mismo, y ya no puedes linkear de manera clásica (video, imagen, subtitulo), todo se centra en la sección de JavaScript, y hasta el momento lo logre, puedo conformarme con material doblado al español o subtitulo incrustado, pero eso limitaría todo su potencial, espero que alguien me ayude en esa línea de código en concreto, deje el código completo en el Pastebin, pueden testear cualquier cosa
 
A bueno yo eso de las listas de reproducción y donde se quedo viendo el usuario, si vio un episodio si no lo vio lo manejo con vuejs/vuex. Por que quiero tener el control de todo no depender de un reproductor de video.

Me parece buena idea lo que quieres hacer eso es bueno para los usuarios, pero te sugiero que lo hagas fuera del reproductor de video ya que tendrás los problemas que tienes ahora tendrás que depender del "reproductor de video" y de plugins externos. Hazlo hasta con jquery que es mas facil.
 
Es que lo que intento resolver es super fácil para alguien que sepa de JavaScript, solo necesito saber como agregar correctamente 'textTracks' al código, todo se puede resolver hasta con un simple símbolo de , o un . (coma o punto), o saber en qué línea ponerlo, así de sencillo, intento estas variaciones y muchas mas, pero no logro dar con la correcta:
JavaScript:
{sources: [{
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    type: 'video/mp4'
  }],
  poster: 'https://getwallpapers.com/wallpaper/full/e/4/b/1490018-widescreen-big-buck-backgrounds-1920x1080-for-full-hd.jpg'
},
  textTracks:[ { "kind":"captions", "label":"English", "src":"example.vtt", "default":false } ]},
o

JavaScript:
sources: [{
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    type: 'video/mp4'
  }],
  poster: 'https://getwallpapers.com/wallpaper/full/e/4/b/1490018-widescreen-big-buck-backgrounds-1920x1080-for-full-hd.jpg'
},
  textTracks:[ { "kind":"captions", "label":"English", "src":"example.vtt", "default":false }}]);
o

JavaScript:
sources: [{
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    type: 'video/mp4'
  }],
  poster: 'https://getwallpapers.com/wallpaper/full/e/4/b/1490018-widescreen-big-buck-backgrounds-1920x1080-for-full-hd.jpg'
},

track: { kind: 'captions', label: 'English', srclang: 'en', src:'example.vtt'}}]);

si te fijas solo es un problema de detalles a ese nivel, saber como agregarlo.
 
probaste con un "default":true
 
la consola de desarrollador te lanza algun error o algo?
 
@elrandygamer Solo fueron ejemplos, eso solo determinaría si el subtítulo en x idioma aparece por defecto, o activo, o de primera opción digamos, pero no tiene relación con mi problemilla
 
Creo que textTracks va despues de poster

sources: [{ src: 'http://media.w3.org/2010/05/sintel/trailer.mp4', type: 'video/mp4' }], poster: 'http://media.w3.org/2010/05/sintel/poster.png', textTracks: [ { "kind":"captions", "label":"English", "src":"subtítulo.vtt", "default":false } ] },
 
Hola, estoy en proceso de crear una web personal de películas y series, en la web aparecen muchos tutoriales estresantes en ingles que no comprendo del todo y se me escapan detalles, y la mayoría está pensada para personas con conocimientos más avanzados que el promedio, sobre todo en GitHub, a duras penas encuentras tutoriales en blogs y contados con los dedos de la mano, tutoriales en español, y por costumbre van orientados a incrustar código por separado, o sea HTML, CSS, JS, en sus respectivas secciones de la plantilla, para que después simplemente trabajes con etiquetas o sintaxis de un plug-in en concreto, el tema es que encontré algunos problemillas de exportación con ese método en Bootstrap, sí que opte por armar el código 'todo en uno', para que después lo agregue a las entradas que quiera sin complicación alguna, funciona exactamente igual, sí que no hay problema, aclaro desde ya, que no sé lenguajes de programación ni nada, solo me toco muchas horas de investigación, y al final conseguí armar un código con distintos tutoriales, porque NINGUNO te da el código así tal cual lo arme yo, y no sé por qué la verdad, le facilitaría la vida a muchas personas, en fin, este es el resultado:
demo: https://urltvx.blogspot.com/ código listo para usar: https://pastebin.com/raw/fiuEAdH9

ahora el problema es que no logro agregar correctamente la sección tracks o subtítulos, y me está estresando bastante, y en vez de mamarme de nuevo días y horas de navegación por internet, esta vez opto por algún foro de ayuda, sé que alguien que sepa de JavaScript tiene la capacidad de resolver el problema mucho más rápido que yo, en fin, este es el código tal cual lo tengo yo, sin subtítulos:
JavaScript:
{sources: [{
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    type: 'video/mp4'
  }],
  poster: 'https://getwallpapers.com/wallpaper/full/e/4/b/1490018-widescreen-big-buck-backgrounds-1920x1080-for-full-hd.jpg'
},

Ahora para agregar los subtítulos en cada video, algunos tutoriales te dicen que agregues estas líneas:
JavaScript:
"textTracks":[ { "kind":"captions", "label":"English", "src":"subtítulo.vtt", "default":false } ]
JavaScript:
track: { kind: 'captions', label: 'English', srclang: 'en', src:'subtítulo.vtt'}}]);

Pero ninguno te muestra donde, y como siempre ninguno da ejemplos funcionales, y a la hora de intentar usar simple lógica, todos los intentos para agregarlos fallaron.
La página oficial en GitHub te muestra que la etiqueta correcta es 'textTracks', pero absolutamente nada más, ningún ejemplo para variar.


¿Entonces como agrego correctamente esa sección de subtítulos a cada vídeo en cuestión?

gracias desde ya, a cualquiera que atienda mis dudas!
Por qué no usas PlayerJS? Tiene el sistema gratis y/o pago como también podes poner en el mismo código las opciones mirror por si queres agregar otros links e incluso tiene una opción para insertar por url un iframe haciéndolo aún más funcional todavía... Así mismo te soporta .srt y .vtt por ahora, espero en lo personal que .ass pronto como el .ssa
 
@elrandygamer @m16u31 @J0ss @Berker gracias por responder, al final encontré la forma correcta después de varias configuraciones y revisar el repositorio oficial, la forma de agregar correctamente los subtítulos es esta:
JavaScript:
{sources: [{
    src: 'sample.mp4',
    type: 'video/mp4'
  }],
     textTracks: [{
     src: 'subtitulo.vtt',
     srclang: 'es',
     default: 'true',
     label: 'Spanish'
    }
  ],
  poster: 'imagen.jpg'
}];

se puede dar como solucionado el tema, ojalá le sirva el dato a cualquiera que ande en la búsqueda de esto en específico, y buscando y buscando llegue hasta esta página, dejo el código completo para incrustar el reproductor de video en cualquier lugar:
HTML:
<head>
  <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
</head>
<body>
  <video id="playerOne" class="fm-video video-js vjs-16-9 vjs-big-play-centered" controls preload="auto" data-setup="{}"> </video>

<script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
<script src='https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js'></script>
<script src='https://cdn.jsdelivr.net/npm/videojs-playlist/dist/videojs-playlist.min.js'></script>
  <script>
// console.clear();
'use strict';

var videoPlayer = window.videoPlayer || {};

(function (o) { 
  var types = {mp4:'video/mp4',webm:'video/webm', m3u: 'application/x-mpegURL'};

  var vPlaylist = [
    // {sources: [{src: baseUrl+'1.mp4', type: types.mp4}]},
    // {sources: [{src: baseUrl+'2.mp4', type: types.mp4}]},
    // {sources: [{src: baseUrl+'3.mp4', type: types.mp4}]},
    // {sources: [{src: baseUrl+'4.mp4', type: types.mp4}]}
    // ,   
    {sources: [{
    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
    type: 'video/mp4'
  }],
 
     textTracks: [{
      src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
      srclang: 'es',
      default: 'true',
      label: 'English'
    }
  ],
  poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg'
}, {
  sources: [{
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    type: 'video/mp4'
  }],
 
     textTracks: [{
      src: 'subtitulo.vtt',
      srclang: 'es',
      default: 'true',
      label: 'Spanish'
    }
  ],
  poster: 'image.jpg'
  }, {
  sources: [{
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
    type: 'video/mp4'
  }],
 
     textTracks: [{
      src: 'subtitulo.vtt',
      srclang: 'es',
      default: 'true',
      label: 'Spanish'
    }
  ],
  poster: 'imagen.jpg'
}];
// [{ ... }, ... ]
 
  var rate = 1; // playback rate
  var options = {
    autoplay: false,
    controls: true,
    muted: false,
    fluid: true,
    playbackRates: [1,1.25,1.5,1.75,2,2.25,2.5],
    inactivityTimeout: 0 // 0 indicates that the user will never be considered inactive.
  };
  var player = videojs('playerOne', options);

  player.ready(function() {
    // videojs.log('Ready Player One');
    this.playlist(vPlaylist);
    this.playlist.autoadvance(0);
    this.playlist.repeat(true);  // Allow skipping back to first video in playlist.
  });

  // player.on(['duringplaylistchange','playlistchange','beforeplaylistitem', 'playlistitem','playlistsorted'], function(e) { videojs.log(e.type); });
 
  player.on('beforeplaylistitem', function() { rate = this.playbackRate(); });
 
  player.on('playlistitem', function() { this.playbackRate(rate); });

//   var buttonComponent = videojs.getComponent('Button');
//   var buttons = ['vprevious','vnext'];
//   var buttonObj;
 
//   for (var i=0; i < buttons.length; i++) {
//     var button = buttons[i];
//     buttonObj = videojs.extend(buttonComponent, {   
//       constructor: function() {
//         buttonComponent.apply(this, arguments);
//         this.addClass('icon-' +button);
//         this.controlText(button);
//       },
//       handleClick: function(e) {
//         switch(button) {
//           case 'vprevious': player.playlist.previous(); console.log(button); break;
//           case 'vnext': player.playlist.next(); console.log(button);  break;
//         }
//       }
//     });

//     videojs.registerComponent(button,buttonObj);
//   }
//   player.getChild('controlBar').addChild('vprevious', {},0);
//   player.getChild('controlBar').addChild('vnext',{},2);


  var buttonComponent = videojs.getComponent('Button');
 
  var prevButton = videojs.extend(buttonComponent, {   
    constructor: function() {
      buttonComponent.apply(this, arguments);
      this.addClass('vjs-icon-previous-item');
      this.controlText('Previous');
    },
    handleClick: function(e) {
      player.playlist.previous();
    }
  });

  var nextButton = videojs.extend(buttonComponent, {   
    constructor: function() {
      buttonComponent.apply(this, arguments);
      this.addClass('vjs-icon-next-item');
      this.controlText('Next');
    },
    handleClick: function(e) {
      player.playlist.next();
      // this.controlText('Next (part 3)');
    }
  });

  videojs.registerComponent('prevButton', prevButton);
  videojs.registerComponent('nextButton', nextButton);

  player.getChild('controlBar').addChild('prevButton', {}, 0);
  player.getChild('controlBar').addChild('nextButton', {}, 2);
})(videoPlayer);
</script>
</body>

para agregar mas videos a la playlist, solo debes repetir todas las veces que quieras estas líneas de código, después del poster: 'imagen.jpg'
JavaScript:
}, {
  sources: [{
    src: 'sample.mp4',
    type: 'video/mp4'
  }],
 
     textTracks: [{
     src: 'subtitulo.vtt',
     srclang: 'es',
     default: 'true',
     label: 'Spanish'
    }
  ],
  poster: 'imagen.jpg'
para finalizar la cola de la playlist, después del poster: 'imagen.jpg' agregar esto y ya
JavaScript:
}];
// [{ ... }, ... ]
 
@elrandygamer @m16u31 @J0ss @Berker gracias por responder, al final encontré la forma correcta después de varias configuraciones y revisar el repositorio oficial, la forma de agregar correctamente los subtítulos es esta:
JavaScript:
{sources: [{
    src: 'sample.mp4',
    type: 'video/mp4'
  }],
     textTracks: [{
     src: 'subtitulo.vtt',
     srclang: 'es',
     default: 'true',
     label: 'Spanish'
    }
  ],
  poster: 'imagen.jpg'
}];

se puede dar como solucionado el tema, ojalá le sirva el dato a cualquiera que ande en la búsqueda de esto en específico, y buscando y buscando llegue hasta esta página, dejo el código completo para incrustar el reproductor de video en cualquier lugar:
HTML:
<head>
  <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
</head>
<body>
  <video id="playerOne" class="fm-video video-js vjs-16-9 vjs-big-play-centered" controls preload="auto" data-setup="{}"> </video>

<script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
<script src='https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js'></script>
<script src='https://cdn.jsdelivr.net/npm/videojs-playlist/dist/videojs-playlist.min.js'></script>
  <script>
// console.clear();
'use strict';

var videoPlayer = window.videoPlayer || {};

(function (o) {
  var types = {mp4:'video/mp4',webm:'video/webm', m3u: 'application/x-mpegURL'};

  var vPlaylist = [
    // {sources: [{src: baseUrl+'1.mp4', type: types.mp4}]},
    // {sources: [{src: baseUrl+'2.mp4', type: types.mp4}]},
    // {sources: [{src: baseUrl+'3.mp4', type: types.mp4}]},
    // {sources: [{src: baseUrl+'4.mp4', type: types.mp4}]}
    // ,  
    {sources: [{
    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
    type: 'video/mp4'
  }],
 
     textTracks: [{
      src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
      srclang: 'es',
      default: 'true',
      label: 'English'
    }
  ],
  poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg'
}, {
  sources: [{
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    type: 'video/mp4'
  }],
 
     textTracks: [{
      src: 'subtitulo.vtt',
      srclang: 'es',
      default: 'true',
      label: 'Spanish'
    }
  ],
  poster: 'image.jpg'
  }, {
  sources: [{
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
    type: 'video/mp4'
  }],
 
     textTracks: [{
      src: 'subtitulo.vtt',
      srclang: 'es',
      default: 'true',
      label: 'Spanish'
    }
  ],
  poster: 'imagen.jpg'
}];
// [{ ... }, ... ]
 
  var rate = 1; // playback rate
  var options = {
    autoplay: false,
    controls: true,
    muted: false,
    fluid: true,
    playbackRates: [1,1.25,1.5,1.75,2,2.25,2.5],
    inactivityTimeout: 0 // 0 indicates that the user will never be considered inactive.
  };
  var player = videojs('playerOne', options);

  player.ready(function() {
    // videojs.log('Ready Player One');
    this.playlist(vPlaylist);
    this.playlist.autoadvance(0);
    this.playlist.repeat(true);  // Allow skipping back to first video in playlist.
  });

  // player.on(['duringplaylistchange','playlistchange','beforeplaylistitem', 'playlistitem','playlistsorted'], function(e) { videojs.log(e.type); });
 
  player.on('beforeplaylistitem', function() { rate = this.playbackRate(); });
 
  player.on('playlistitem', function() { this.playbackRate(rate); });

//   var buttonComponent = videojs.getComponent('Button');
//   var buttons = ['vprevious','vnext'];
//   var buttonObj;
 
//   for (var i=0; i < buttons.length; i++) {
//     var button = buttons[i];
//     buttonObj = videojs.extend(buttonComponent, {  
//       constructor: function() {
//         buttonComponent.apply(this, arguments);
//         this.addClass('icon-' +button);
//         this.controlText(button);
//       },
//       handleClick: function(e) {
//         switch(button) {
//           case 'vprevious': player.playlist.previous(); console.log(button); break;
//           case 'vnext': player.playlist.next(); console.log(button);  break;
//         }
//       }
//     });

//     videojs.registerComponent(button,buttonObj);
//   }
//   player.getChild('controlBar').addChild('vprevious', {},0);
//   player.getChild('controlBar').addChild('vnext',{},2);


  var buttonComponent = videojs.getComponent('Button');
 
  var prevButton = videojs.extend(buttonComponent, {  
    constructor: function() {
      buttonComponent.apply(this, arguments);
      this.addClass('vjs-icon-previous-item');
      this.controlText('Previous');
    },
    handleClick: function(e) {
      player.playlist.previous();
    }
  });

  var nextButton = videojs.extend(buttonComponent, {  
    constructor: function() {
      buttonComponent.apply(this, arguments);
      this.addClass('vjs-icon-next-item');
      this.controlText('Next');
    },
    handleClick: function(e) {
      player.playlist.next();
      // this.controlText('Next (part 3)');
    }
  });

  videojs.registerComponent('prevButton', prevButton);
  videojs.registerComponent('nextButton', nextButton);

  player.getChild('controlBar').addChild('prevButton', {}, 0);
  player.getChild('controlBar').addChild('nextButton', {}, 2);
})(videoPlayer);
</script>
</body>

para agregar mas videos a la playlist, solo debes repetir todas las veces que quieras estas líneas de código, después del poster: 'imagen.jpg'
JavaScript:
}, {
  sources: [{
    src: 'sample.mp4',
    type: 'video/mp4'
  }],
 
     textTracks: [{
     src: 'subtitulo.vtt',
     srclang: 'es',
     default: 'true',
     label: 'Spanish'
    }
  ],
  poster: 'imagen.jpg'
para finalizar la cola de la playlist, después del poster: 'imagen.jpg' agregar esto y ya
JavaScript:
}];
// [{ ... }, ... ]
Sigo creyendo que te serviría mas usar PlayerJS con su sistema de url incrustada para embed que tiene una buena cantidad de parámetros, pero si te funcionó con VideoJS de 10 entonces
 
Si amigo, lo encontré una muy buena alternativa, gracias por compartir el dato, no tenía idea de su existencia, estuve retocando sus opciones y es interesante, básicamente es lo mismo que VideoJS pero con una interfaz gráfica para agregar los elementos sin meter mano al código, aun así, ya sabiendo el simple detallito de los subtítulos que ya solucione en VideoJS, cuando ya tienes estructurado una plantilla base, simplemente vas agregando líneas de texto y lo previsualizas aquí en Codepen, es super cómodo, facilita mucha la vida de los que testean HTML,JS,CSS, ahora voy a investigar como reproducir torrents directamente en VideoJS, seguramente tarde un tiempo en descubrir el método, pero eso ya es otro tema xd.

pd: en pos del conocimiento, y para que quede todo publico (para que a otros les sirva también), podrías decir como incrustar el reproductor PlayerJS?, porque genere una playlist de prueba, y solamente aparece un ejemplo básico como esto:
Insertar CODE, HTML o PHP:
<script src="//site.com/playerjs.js" type="text/javascript"></script>
Insertar CODE, HTML o PHP:
<div id="player"></div>

<script>
   var player = new Playerjs({id:"player", file:"video.mp4"});
</script>
una opción para descargar un JavaScript que no sé de qué va, y un CDN https://cdn.plrjs.com/player/r23bt6brt1ey7/02ks9cku8we3.js
 
Me respondo a mi mismo para que quede como información, estuve viendo y se usa la estructura de este iframe:
HTML:
<iframe src="//cdn.plrjs.com/player/XXXXXX/YYYYYY.html?file=//plrjs.com/sample.mp4&title=Title" type="text/html" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
copias y pegas donde corresponde el CDN que previamente generaste al apretar 'Save to Cloud', pero le cambias la extensión .js a .html
después te vas a la sección de 'Playlist', descargas el archivo .txt, y lo pegas en la parte donde iría el archivo a reproducir que termina en .mp4...
aunque debes hostear el txt, en mi caso use Github, quedaría así: https://codepen.io/anmovi/pen/VwboMEE
 
Si amigo, lo encontré una muy buena alternativa, gracias por compartir el dato, no tenía idea de su existencia, estuve retocando sus opciones y es interesante, básicamente es lo mismo que VideoJS pero con una interfaz gráfica para agregar los elementos sin meter mano al código, aun así, ya sabiendo el simple detallito de los subtítulos que ya solucione en VideoJS, cuando ya tienes estructurado una plantilla base, simplemente vas agregando líneas de texto y lo previsualizas aquí en Codepen, es super cómodo, facilita mucha la vida de los que testean HTML,JS,CSS, ahora voy a investigar como reproducir torrents directamente en VideoJS, seguramente tarde un tiempo en descubrir el método, pero eso ya es otro tema xd.

pd: en pos del conocimiento, y para que quede todo publico (para que a otros les sirva también), podrías decir como incrustar el reproductor PlayerJS?, porque genere una playlist de prueba, y solamente aparece un ejemplo básico como esto:
Insertar CODE, HTML o PHP:
<script src="//site.com/playerjs.js" type="text/javascript"></script>
Insertar CODE, HTML o PHP:
<div id="player"></div>

<script>
   var player = new Playerjs({id:"player", file:"video.mp4"});
</script>
una opción para descargar un JavaScript que no sé de qué va, y un CDN https://cdn.plrjs.com/player/r23bt6brt1ey7/02ks9cku8we3.js
La mejor forma de hacer lo que necesitas es crear el "pattern" básico que ya te lo da PlayerJS y tenes que pegarlo como si fuese otro repro estilo VideoJS a menos que busques precisamente 1 repro por 1 tipo de reproducción... lo que te conviene hacer es crear un repro vacío sin nada o con "opciones por defecto" (por si falla la carga, por ej) y luego poner esto:

En tu plantilla html o lo que uses para adaptarlo solo necesitas poner

Insertar CODE, HTML o PHP:
Entre los <head></head> pones:

<script src="//site.com/playerjs.js" type="text/javascript"></script>

Y luego dentro de <body>:

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

Y finalmente en <footer> o fuera de <body> (recomiendo en footer):

<script>
   var player = new Playerjs({id:"player", file:"video.mp4"});
</script>

Pero en este apartado entran mas detalles para configurar y especificar correctamente el repro, las opciones, cover, etc...

https://playerjs.com/docs/en=code

Acá nos muestra que se puede configurar dentro de ({id:"player", file:"tulinkmp4"}) añadiendo la sig lista

file URL to a file video or audio, playlist, HLS, DASH, YouTube or Vimeo
poster URL to the image that will be displayed on screen before starting
title inscription or title
autoplayautoplay (1 or 0)
startstart playback from the specified second
endend playback on the specified second
duration duration in seconds, if the player does not preload metadata
subtitle URL of subtitle

Todos se añaden de la misma forma que el id:"player", y eso lo pegas... de tu pag si usas un CMS podes ver como hacer para sacar un content id generado en el artículo, y con eso "plasmarlo" en el repro como un campo
 
Me respondo a mi mismo para que quede como información, estuve viendo y se usa la estructura de este iframe:
HTML:
<iframe src="//cdn.plrjs.com/player/XXXXXX/YYYYYY.html?file=//plrjs.com/sample.mp4&title=Title" type="text/html" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
copias y pegas donde corresponde el CDN que previamente generaste al apretar 'Save to Cloud', pero le cambias la extensión .js a .html
después te vas a la sección de 'Playlist', descargas el archivo .txt, y lo pegas en la parte donde iría el archivo a reproducir que termina en .mp4...
aunque debes hostear el txt, en mi caso use Github, quedaría así: https://codepen.io/anmovi/pen/VwboMEE
Como bien mencionas se puede hostear en github pero recomiendo más Cloudflare Pages por cuestiones de carga, nativamente no te dejará que cargues correctamente porque CFPages "borra" lo siguiente al slash (/index.html) pero podes inventar algo como mipag.dominio.com/html?file=linkmp4 sin problema alguno y te lo reconocerá ya que necesita solo el html, podes editarlo y hacer que deje de buscar dicho html... lo que te recomiendo es que si queres hacer una playlist no uses este método porque puede buguear bastante el tema de la reproducción, yo lo indicaría al uso específico si es un solo vídeo
 
Que buenos datos, intentaré probar ese método, y también ya que la mencionaste, Cloudflare Pages es de pago?, veo varias CDN hosteadas en esa pagina? se puede usar para que uno suba sus propias CDN?, me interesa todo esto, porque puedo ir mejorando mis proyectos caseros
 
Que buenos datos, intentaré probar ese método, y también ya que la mencionaste, Cloudflare Pages es de pago?, veo varias CDN hosteadas en esa pagina? se puede usar para que uno suba sus propias CDN?, me interesa todo esto, porque puedo ir mejorando mis proyectos caseros
CFPages es gratis y usa como base Github Pages pero con ciertos límites pero es totalmente gratuito... lo otro es Cloudflare Worker pero en ambos casos te hace proxy usando los servidores de CF mientras que CFWorker se basa más en peticiones y cacheo persistente por lo que podría ser buena idea que solo uses CFPages y no Worker que tiene límite de peticiones simultáneas. Si queres que te muestre un ej mandame un mensaje privado y te paso mi Telegram, ahí te puedo mostrar unos ejemplos de como se ve en ambos casos
 
Atrás
Arriba