Tutorial: Como utilizar Jwplayer para reproduzir vídeos em HTML5 no Blogger

themasterlight · 25/12/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:

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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.

CANIBAL · 25/12/2019

Genial bro! :3

pasajero · 25/12/2019

themasterlight disse:
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:

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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/12/2019

pasajero disse:
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:

Inserir CODE, HTML ou 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/12/2019

themasterlight disse:
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:

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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/12/2019

Stron disse:
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:

Inserir CODE, HTML ou 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/12/2019

pasajero disse:
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/12/2019

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

Crees que sirva para XVIDEOS?

pasajero · 26/12/2019

themasterlight disse:
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/12/2019

pasajero disse:
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/12/2019

pasajero disse:
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/12/2019

Pixtoons disse:
Crees que sirva para XVIDEOS?

Claro, siempre y cuando consigas la URL madre.

pasajero · 26/12/2019

Stron disse:
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:

Inserir CODE, HTML ou 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/12/2019

pasajero disse:
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/12/2019

themasterlight disse:
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/12/2019

pasajero disse:
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 · 03/02/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 · 03/09/2021

emanuelk12 disse:
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 o anexo 206414

Saludos

Podrias mandar link para ver que tal, esta ese reproductor

JosRod · 03/09/2021

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

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

otakueli1313 · 04/09/2021

JosRod disse:
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

Tutorial: Como utilizar Jwplayer para reproduzir vídeos em HTML5 no Blogger

themasterlight

CANIBAL

pasajero

Stron

Pixtoons

pasajero

themasterlight

Pixtoons

pasajero

Stron

themasterlight

themasterlight

pasajero

themasterlight

pasajero

themasterlight

emanuelk12

otakueli1313

JosRod

otakueli1313