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

themasterlight · 25 Dic 2019

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.

Rykrdo · 25 Dic 2019

Genial bro! :3

pasajero · 25 Dic 2019

themasterlight dijo:
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.

hola gracias y en wordpress como seria?

Stron · 26 Dic 2019

pasajero dijo:
hola gracias y en wordpress como seria?

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

Pixtoons · 26 Dic 2019

themasterlight dijo:
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.

Gracias tengo un proyecto en mente que me servirá mucho

pasajero · 26 Dic 2019

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

pero solo funcionara con los videos que suba a mi hosting cierto? por ejemplo de google drive no funciona?

themasterlight · 26 Dic 2019

pasajero dijo:
pero solo funcionara con los videos que suba a mi hosting cierto? por ejemplo de google drive no funciona?

Debes de conseguir la URL madre, para esa ocasión cite en el post original una manera.

Pixtoons · 26 Dic 2019

themasterlight dijo:
Debes de conseguir la URL madre, para esa ocasión cite en el post original una manera.

Crees que sirva para XVIDEOS?

pasajero · 26 Dic 2019

themasterlight dijo:
Debes de conseguir la URL madre, para esa ocasión cite en el post original una manera.

cual es el post original amigo veo que en este solo fue para blogger

Stron · 26 Dic 2019

pasajero dijo:
pero solo funcionara con los videos que suba a mi hosting cierto? por ejemplo de google drive no funciona?

Si tienes el link directo del video, podrias usarlo sin problema.

themasterlight · 26 Dic 2019

pasajero dijo:
cual es el post original amigo veo que en este solo fue para blogger

El post original lo dice en el primer párrafo. Pero de todas manera: https://www.desdeblogger.xyz/2019/12/reproductor-de-video-html5-con-jwplayer.html?m=1

themasterlight · 26 Dic 2019

Pixtoons dijo:
Crees que sirva para XVIDEOS?

Claro, siempre y cuando consigas la URL madre.

pasajero · 26 Dic 2019

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

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

themasterlight · 26 Dic 2019

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

Pusiste la url madre? manda blog para ver que usted hizo mal

pasajero · 26 Dic 2019

themasterlight dijo:
Pusiste la url madre? manda blog para ver que usted hizo mal

si asi
<script src="https://cdn.jwplayer.com/libraries/ByfLo5yG.js"></script>

themasterlight · 26 Dic 2019

pasajero dijo:
si asi
<script src="https://cdn.jwplayer.com/libraries/ByfLo5yG.js"></script>

No amigo, hablo de que me mande la URL madre del video, a ver si usted lo hizo bien.

emanuelk12 · 3 Feb 2020

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

Saludos

otakueli1313 · 3 Sep 2021

emanuelk12 dijo:
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

Ver el archivo adjunto 206414

Saludos

Podrias mandar link para ver que tal, esta ese reproductor

JosRod · 3 Sep 2021

otakueli1313 dijo:
Podrias mandar link para ver que tal, esta ese reproductor

https://panda-themes.blogspot.com/reproductor-de-video-html5-con-jwplayer

otakueli1313 · 4 Sep 2021

JosRod dijo:
https://panda-themes.blogspot.com/reproductor-de-video-html5-con-jwplayer

esta genial esa pagina, solo que en barra de navegación hay algunas secciones que no funcionan, osea no mandan a ningún lugar