Tutorial: Cómo utilizar Jwplayer para reproducir videos en HTML5 en Blogger

  • Autor Autor themasterlight
  • Fecha de inicio Fecha de inicio
T

themasterlight

Jwplayer%2BBlogger.png

Para saber todo sobre el funcionamiento de este reproductor en Blogger, no olvides de entrar a la entrada oficial.

Instalación
Busca <head> y debajo pega el siguiente script:
Insertar CODE, HTML o PHP: 
<script src="https://cdn.jwplayer.com/libraries/ByfLo5yG.js"></script>

Utilizar en Blogger
Para utilizarlo es sencillo solo reemplaza lo que te pide en el siguiente código, puse el código lo mas sencillo para que todos puedan entender:
Insertar CODE, HTML o PHP: 
<div id="player">
 </div>
  <script type="text/javascript">
   jwplayer("player").setup({
    file: "ACA-LA-URL-DEL-VIDEO-EN-MP4",
    image: "ACA-EL-POSTER",
    height: "LA-ALTURA-QUE-LE-QUIERAS-DAR-AL-REPRODUCTOR",
    width: "LA-ANCHURA-QUE-LE-QUIERAS-DAR-AL-REPRODUCTOR",
    stretching: "exactfit",
   });
  </script>
Espero que les guste este aporte y Feliz navidad a todos, cualquier duda o sugerencia no olviden dejarla en el Blog.
 
Genial bro! :3
 
themasterlight dijo:
Jwplayer%2BBlogger.png

Para saber todo sobre el funcionamiento de este reproductor en Blogger, no olvides de entrar a la entrada oficial.

Instalación
Busca <head> y debajo pega el siguiente script:
Insertar CODE, HTML o PHP: 
<script src="https://cdn.jwplayer.com/libraries/ByfLo5yG.js"></script>

Utilizar en Blogger
Para utilizarlo es sencillo solo reemplaza lo que te pide en el siguiente código, puse el código lo mas sencillo para que todos puedan entender:
Insertar CODE, HTML o PHP: 
<div id="player">
</div>
  <script type="text/javascript">
   jwplayer("player").setup({
    file: "ACA-LA-URL-DEL-VIDEO-EN-MP4",
    image: "ACA-EL-POSTER",
    height: "LA-ALTURA-QUE-LE-QUIERAS-DAR-AL-REPRODUCTOR",
    width: "LA-ANCHURA-QUE-LE-QUIERAS-DAR-AL-REPRODUCTOR",
    stretching: "exactfit",
   });
  </script>
Espero que les guste este aporte y Feliz navidad a todos, cualquier duda o sugerencia no olviden dejarla en el Blog.
Hacer clic para expandir...
hola gracias y en wordpress como seria?
 
pasajero dijo:
hola gracias y en wordpress como seria?
Hacer clic para expandir...


En wordpress podrías simplemente crear un shortcode y agregarle el codigo algo asi en tu functions.php (o tambien podrias agregarlo como plugin):
PHP: 
<?php
function jw_player_func( $atts ) {
    $a = shortcode_atts (array (
        'x' => '1280',
        'y' => '720',

    ), $atts);

    ob_start();
    ?>
    <div id="player"></div>
      <script type="text/javascript">
       jwplayer("player").setup({
        file: "<?php echo $atts['file'] ?>",
        image: "<?php echo $atts['image'] ?>",
        height: "<?php echo $a['y'] ?>",
        width: "<?php echo $a['x'] ?>",
        stretching: "exactfit",
       });
      </script>  

    <?php
    return ob_get_clean();
}
add_shortcode( 'jwplayer', 'jw_player_func' );
   
?>

y usarlo asi en tus entradas:
Insertar CODE, HTML o PHP: 
[jwplayer file="archivo.mp4" image="image.mp4" y="720" x="1280"]

la etiqueta que va en el head, lo agregas en head.php
 
themasterlight dijo:
Jwplayer%2BBlogger.png

Para saber todo sobre el funcionamiento de este reproductor en Blogger, no olvides de entrar a la entrada oficial.

Instalación
Busca <head> y debajo pega el siguiente script:
Insertar CODE, HTML o PHP: 
<script src="https://cdn.jwplayer.com/libraries/ByfLo5yG.js"></script>

Utilizar en Blogger
Para utilizarlo es sencillo solo reemplaza lo que te pide en el siguiente código, puse el código lo mas sencillo para que todos puedan entender:
Insertar CODE, HTML o PHP: 
<div id="player">
</div>
  <script type="text/javascript">
   jwplayer("player").setup({
    file: "ACA-LA-URL-DEL-VIDEO-EN-MP4",
    image: "ACA-EL-POSTER",
    height: "LA-ALTURA-QUE-LE-QUIERAS-DAR-AL-REPRODUCTOR",
    width: "LA-ANCHURA-QUE-LE-QUIERAS-DAR-AL-REPRODUCTOR",
    stretching: "exactfit",
   });
  </script>
Espero que les guste este aporte y Feliz navidad a todos, cualquier duda o sugerencia no olviden dejarla en el Blog.
Hacer clic para expandir...
Gracias tengo un proyecto en mente que me servirá mucho
 
Stron dijo:
En wordpress podrías simplemente crear un shortcode y agregarle el codigo algo asi en tu functions.php (o tambien podrias agregarlo como plugin):
PHP: 
<?php
function jw_player_func( $atts ) {
    $a = shortcode_atts (array (
        'x' => '1280',
        'y' => '720',

    ), $atts);

    ob_start();
    ?>
    <div id="player"></div>
      <script type="text/javascript">
       jwplayer("player").setup({
        file: "<?php echo $atts['file'] ?>",
        image: "<?php echo $atts['image'] ?>",
        height: "<?php echo $a['y'] ?>",
        width: "<?php echo $a['x'] ?>",
        stretching: "exactfit",
       });
      </script> 

    <?php
    return ob_get_clean();
}
add_shortcode( 'jwplayer', 'jw_player_func' );
  
?>

y usarlo asi en tus entradas:
Insertar CODE, HTML o PHP: 
[jwplayer file="archivo.mp4" image="image.mp4" y="720" x="1280"]

la etiqueta que va en el head, lo agregas en head.php
Hacer clic para expandir...
pero solo funcionara con los videos que suba a mi hosting cierto? por ejemplo de google drive no funciona?
 
pasajero dijo:
pero solo funcionara con los videos que suba a mi hosting cierto? por ejemplo de google drive no funciona?
Hacer clic para expandir...

Si tienes el link directo del video, podrias usarlo sin problema.
 
Stron dijo:
En wordpress podrías simplemente crear un shortcode y agregarle el codigo algo asi en tu functions.php (o tambien podrias agregarlo como plugin):
PHP: 
<?php
function jw_player_func( $atts ) {
    $a = shortcode_atts (array (
        'x' => '1280',
        'y' => '720',

    ), $atts);

    ob_start();
    ?>
    <div id="player"></div>
      <script type="text/javascript">
       jwplayer("player").setup({
        file: "<?php echo $atts['file'] ?>",
        image: "<?php echo $atts['image'] ?>",
        height: "<?php echo $a['y'] ?>",
        width: "<?php echo $a['x'] ?>",
        stretching: "exactfit",
       });
      </script> 

    <?php
    return ob_get_clean();
}
add_shortcode( 'jwplayer', 'jw_player_func' );
  
?>

y usarlo asi en tus entradas:
Insertar CODE, HTML o PHP: 
[jwplayer file="archivo.mp4" image="image.mp4" y="720" x="1280"]

la etiqueta que va en el head, lo agregas en head.php
Hacer clic para expandir...
no funciona
agregue la libreria en head y luego el codigo que usted me dio o este <div id="player"> </div> <script type="text/javascript"> jwplayer("player").setup({ file: "ACA-LA-URL-DEL-VIDEO-EN-MP4", image: "ACA-EL-POSTER", height: "LA-ALTURA-QUE-LE-QUIERAS-DAR-AL-REPRODUCTOR", width: "LA-ANCHURA-QUE-LE-QUIERAS-DAR-AL-REPRODUCTOR", stretching: "exactfit", }); </script> pero no funciona
 
pasajero dijo:
no funciona
agregue la libreria en head y luego el codigo que usted me dio o este <div id="player"> </div> <script type="text/javascript"> jwplayer("player").setup({ file: "ACA-LA-URL-DEL-VIDEO-EN-MP4", image: "ACA-EL-POSTER", height: "LA-ALTURA-QUE-LE-QUIERAS-DAR-AL-REPRODUCTOR", width: "LA-ANCHURA-QUE-LE-QUIERAS-DAR-AL-REPRODUCTOR", stretching: "exactfit", }); </script> pero no funciona
Hacer clic para expandir...
Pusiste la url madre? manda blog para ver que usted hizo mal
 
Disculpa hay alguna manera de hacer para cambiar la url dentro del reproductor con otra apretando un botón?.
Pregunto porque se puede en el iframe pero con esto ni idea.
Lo hice con el iframe en blogger
Screenshot_4.webp

Saludos
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba