Tutorial: Reproductor de Video HTML5 con Jwplayer

T

themasterlight


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

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
4 Mar 2018
Mensajes
569
Genial bro! :3
 

pasajero

Delta
Verificación en dos pasos desactivada
Desde
28 Oct 2018
Mensajes
543

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

VIP
Eta
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Feliz cumpleaños!
Desde
11 Oct 2015
Mensajes
1.251
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

Gamma
Verificación en dos pasos activada
¡Usuario con pocos negocios!
Desde
2 May 2013
Mensajes
163

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

Delta
Verificación en dos pasos desactivada
Desde
28 Oct 2018
Mensajes
543
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?
 

Stron

VIP
Eta
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Feliz cumpleaños!
Desde
11 Oct 2015
Mensajes
1.251
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.
 

pasajero

Delta
Verificación en dos pasos desactivada
Desde
28 Oct 2018
Mensajes
543
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
 
T

themasterlight

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
 

emanuelk12

Curioso
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
8 Oct 2019
Mensajes
11
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.png

Saludos
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba