Agregar enlace M3U para video en vivo en WordPress

  • Autor Autor mxmex
  • Fecha de inicio Fecha de inicio
M

mxmex

Épsilon
Intento copiar el codigo HTML en wordpress para poner una trasmision de un canal de tv en vivo y no se ve sale blanco el espacio.
Ese mismo codigo en DREAMWEAVER si se ve perfecto.

Alguien me puede ayudar o recomendar algun plugin donde poner el enlace m3u?
y que se vea tipo un video en vivo?

agradezco la ayuda
 
El código era un iframe?
 
@rafadizeosp

<head>
<meta charset="UTF-8">
<title>Reproducción archivos m3u8</title>
<script src="http://jwpsrv.com/library/ejuoyqCsEeK4ayIACpYGxA.js"></script>
<style type="text/css">
body{bgcolor:#f0f0f0;}
#reproductor_aspect{display: none;}
#reproductor_jwpsrv{position: absolute; top: 0px; z-index: 10;}
#reproductor_wrapper{position: relative; display: block; width: 700px; height: 400px;}
</style>
<script>// <![CDATA[
//La Key que debes conseguir en la web de JWPlayer en Hexadecimal
jwplayer.key="6RfMdMqZkkH88h026pcTaaEtxNCWrhiF6ACoxKXjjiI=";
// ]]></script>
</head>

<body>


<div id="reproductor_wrapper">
<object type="application/x-shockwave-flash" data="http://p.jwpcdn.com/6/8/jwplayer.flash.swf" width="100%" height="100%" bgcolor="#000000" id="reproductor" name="reproductor" tabindex="0">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="seamlesstabbing" value="true">
<param name="wmode" value="opaque">
</object>
<div id="reproductor_aspect"></div>
<div id="reproductor_jwpsrv"></div>
</div>
<script>// <![CDATA[
jwplayer('reproductor').setup({
//URL m3u8 que queremos reproducir
file: "AQUIVA LA URL DEL M3U",
width: "700",
skin: "five",
height: "400",
title: 'xsoundtv.com',
image: "",
logo: {
file: "",
position: 'top-right',
margin: '0',
link: ""
},
stretching: "fill",
autostart: "true",
abouttext: '',
aboutlink: '',
});
// ]]></script>
<p>
.
</p>

</body>
 
Prueba cambiando jwplayer('reproductor').setup({ por jwplayer('#reproductor').setup({
 
mxmex dijo:
@rafadizeosp

<head>
<meta charset="UTF-8">
<title>Reproducción archivos m3u8</title>
<script src="http://jwpsrv.com/library/ejuoyqCsEeK4ayIACpYGxA.js"></script>
<style type="text/css">
body{bgcolor:#f0f0f0;}
#reproductor_aspect{display: none;}
#reproductor_jwpsrv{position: absolute; top: 0px; z-index: 10;}
#reproductor_wrapper{position: relative; display: block; width: 700px; height: 400px;}
</style>
<script>// <![CDATA[
//La Key que debes conseguir en la web de JWPlayer en Hexadecimal
jwplayer.key="6RfMdMqZkkH88h026pcTaaEtxNCWrhiF6ACoxKXjjiI=";
// ]]></script>
</head>

<body>


<div id="reproductor_wrapper">
<object type="application/x-shockwave-flash" data="http://p.jwpcdn.com/6/8/jwplayer.flash.swf" width="100%" height="100%" bgcolor="#000000" id="reproductor" name="reproductor" tabindex="0">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="seamlesstabbing" value="true">
<param name="wmode" value="opaque">
</object>
<div id="reproductor_aspect"></div>
<div id="reproductor_jwpsrv"></div>
</div>
<script>// <![CDATA[
jwplayer('reproductor').setup({
//URL m3u8 que queremos reproducir
file: "AQUIVA LA URL DEL M3U",
width: "700",
skin: "five",
height: "400",
title: 'xsoundtv.com',
image: "",
logo: {
file: "",
position: 'top-right',
margin: '0',
link: ""
},
stretching: "fill",
autostart: "true",
abouttext: '',
aboutlink: '',
});
// ]]></script>
<p>
.
</p>

</body>
Hacer clic para expandir...

Cual es la URL para hacer pruebas en mi localhost?
file: "AQUIVA LA URL DEL M3U"
 
Hola podrías dejar link de la web, o enviármelo por MP
 
Pasa el m3u para probar
 
xLincex dijo:
Pasa el m3u para probar
Hacer clic para expandir...
Reproducir videos m3u8, Pero cómo sería compatible con móviles, que se tendría que modificar en el código para que sea compatible con móviles, es para una entrada de blogger:

<head>
<meta charset="UTF-8">
<title>Reproducción archivos m3u8</title>
<script src="http://jwpsrv.com/library/ejuoyqCsEeK4ayIACpYGxA.js"></script>
<style type="text/css">
body{bgcolor:#f0f0f0;}
#reproductor_aspect{display: none;}
#reproductor_jwpsrv{position: absolute; top: 0px; z-index: 10;}
#reproductor_wrapper{position: relative; display: block; width: 700px; height: 400px;}
</style>
<script>// <![CDATA[
//La Key que debes conseguir en la web de JWPlayer en Hexadecimal
jwplayer.key="6RfMdMqZkkH88h026pcTaaEtxNCWrhiF6ACoxKXjjiI=";
// ]]></script>
</head>

<body>


<div id="reproductor_wrapper">
<object type="application/x-shockwave-flash" data="http://p.jwpcdn.com/6/8/jwplayer.flash.swf" width="100%" height="100%" bgcolor="#000000" id="reproductor" name="reproductor" tabindex="0">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="seamlesstabbing" value="true">
<param name="wmode" value="opaque">
</object>
<div id="reproductor_aspect"></div>
<div id="reproductor_jwpsrv"></div>
</div>
<script>// <![CDATA[
jwplayer('reproductor').setup({
//URL m3u8 que queremos reproducir
file: "https://moodle1.playmudos.com/MU11QTgrRXRJdnBQMlB2WlJsZmxUa1BRMG0vQ0RCMEhFUUI5ZythR1oxOD0.m3u8",
width: "700",
skin: "five",
height: "400",
title: 'xsoundtv.com',
image: "",
logo: {
file: "",
position: 'top-right',
margin: '0',
link: ""
},
stretching: "fill",
autostart: "true",
abouttext: '',
aboutlink: '',
});
// ]]></script>
<p>
.
</p>

</body>
 
Última edición:
Hola, este no es jwplayer pero es una buena alternativa se llama vidstack player:
HTML: 
<link rel="stylesheet" href="https://cdn.vidstack.io/player.css" />
<link rel="stylesheet" href="https://cdn.vidstack.io/plyr.css" />
<script src="https://cdn.vidstack.io/plyr" type="module"></script>

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

<script type="module">
  import { PlyrLayout, VidstackPlayer } from 'https://cdn.vidstack.io/player';
        const player = await VidstackPlayer.create({
          target: '#player',
          title: 'Sprite Fight',
          src: 'https://files.vidstack.io/sprite-fight/hls/stream.m3u8',
          poster: 'https://files.vidstack.io/sprite-fight/poster.webp',
          layout: new PlyrLayout({
            thumbnails: 'https://files.vidstack.io/sprite-fight/thumbnails.vtt',
          }),
        });
</script>

Te dejo el enlace a la documentacion: Vidstack Player
 
lehaxo dijo:
Reproducir videos m3u8, Pero cómo sería compatible con móviles, que se tendría que modificar en el código para que sea compatible con móviles, es para una entrada de blogger:

<head>
<meta charset="UTF-8">
<title>Reproducción archivos m3u8</title>
<script src="http://jwpsrv.com/library/ejuoyqCsEeK4ayIACpYGxA.js"></script>
<style type="text/css">
body{bgcolor:#f0f0f0;}
#reproductor_aspect{display: none;}
#reproductor_jwpsrv{position: absolute; top: 0px; z-index: 10;}
#reproductor_wrapper{position: relative; display: block; width: 700px; height: 400px;}
</style>
<script>// <![CDATA[
//La Key que debes conseguir en la web de JWPlayer en Hexadecimal
jwplayer.key="6RfMdMqZkkH88h026pcTaaEtxNCWrhiF6ACoxKXjjiI=";
// ]]></script>
</head>

<body>


<div id="reproductor_wrapper">
<object type="application/x-shockwave-flash" data="http://p.jwpcdn.com/6/8/jwplayer.flash.swf" width="100%" height="100%" bgcolor="#000000" id="reproductor" name="reproductor" tabindex="0">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="seamlesstabbing" value="true">
<param name="wmode" value="opaque">
</object>
<div id="reproductor_aspect"></div>
<div id="reproductor_jwpsrv"></div>
</div>
<script>// <![CDATA[
jwplayer('reproductor').setup({
//URL m3u8 que queremos reproducir
file: "https://moodle1.playmudos.com/MU11QTgrRXRJdnBQMlB2WlJsZmxUa1BRMG0vQ0RCMEhFUUI5ZythR1oxOD0.m3u8",
width: "700",
skin: "five",
height: "400",
title: 'xsoundtv.com',
image: "",
logo: {
file: "",
position: 'top-right',
margin: '0',
link: ""
},
stretching: "fill",
autostart: "true",
abouttext: '',
aboutlink: '',
});
// ]]></script>
<p>
.
</p>

</body>
Hacer clic para expandir...
El elemento <object> con el tipo application/x-shockwave-flash para incrustar contenido Flash no es recomendable ni compatible con la mayoría de los navegadores modernos.
Adobe Flash Player fue descontinuado oficialmente el 31 de diciembre de 2020
 
lehaxo dijo:
este código ya lo puedo utilizar pegando en una entrada de blogger?
Hacer clic para expandir...
Que te puedo decir:
A simple vista no se si funcione
tampoco si funcionan los enlaces
tampoco si funciona, no se si quede como tu lo quieres como para saber que agregarle
Lo que tienes primero que hacer es poner el código en un archivo html y verlo en el navegador para ver si funciona
después si funciona, pegas cada parte donde va en una entrada o en el html directo
si no funciona, tendrias que ver si no hay algun otro script que interfiera, o ver los errores en la consola.
 
ahora sale el m4a
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

B
Transmitir video en vivo desde WordPress con filmadora
Respuestas
7
Visitas
212
bewstars
B
V
Reproductor para Transmitir en Vivo desde Wordpress #Solicitud
Respuestas
3
Visitas
225
bludog
B
Atrás
Arriba