0

Me han pedido hacer un reproductor de streaming y tengo un dropDownList, pero, al elegirlo no se como cambiar el atributo src de este pedazo de codigo:

 <div class="player">
 <div class="videoBox" style="padding: 0; position: relative;">
<a id="TempPlayBtn" href="javascript:;" onClick="demoplayer.play(); $('#TempPlayBtn').remove();" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; z-index: 9999;"></a>
 <video id="demo-player" controls playsinline class="cld-video-player" style="width: 100%; margin-bottom: 10px" height="500">
 <source src="https://ss3.domint.net:3114/t11_str/telesistema/playlist.m3u8" type="application/x-mpegURL" /> 

He estado buscando en la web console a donde tengo que referirme para poder cambiar el valor del src cuando elija cualquier valor del dropDownList.

Si fuera un iframe simplemente seria un jquery asi:

 $('#canal').clic(function({
      if($(#canal).val() == 2){
            $('#idIframe').atrr(src,'nuevo source')
}
});

Pero no he podido dar con lo que necesito para cambiar el src, muchas gracias por su ayuda

Este es mi codigo

 <!DOCTYPE html>
 <html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Telesistema</title>




<!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<meta property="og:url" content="http://telesistema11.com.do/en-directo" />
<meta property="og:type" content="article" />
<meta property="og:title" content="En Vivo" />
<meta property="og:description" content="Telesistema" />
<meta property="og:image" content="}" />
<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet"> <meta property="fb:app_id" content="860356994135936" />

  <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>


 </head>
 <body>

<div class="directo-layout">


<div class="player">
<div class="videoBox" style="padding: 0; position: relative;">
<a id="TempPlayBtn" href="javascript:;" onClick="demoplayer.play(); $('#TempPlayBtn').remove();" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; z-index: 9999;"></a>
 <video id="demo-player" controls playsinline class="cld-video-player" style="width: 100%; margin-bottom: 10px" height="500">

 <source  src="https://ss3.domint.net:3114/t11_str/telesistema/playlist.m3u8" type="application/x-mpegURL" />



  </video>
  </div>


  </div>
  </div>

  <select id="canal">
<option value="seleccion" selected>Seleccionar Canal</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="9">9</option>
<option value="11">11</option>
<option value="15">15</option>
<option value="21">21</option>
<option value="25">25</option>
<option value="37">37</option>
 </select> 


  </div>
  <hr>




 </div>
 </div>

 </div>


 </div>



   <script src="https://telesistema11.com.do/themes/telesistemas/assets/js/jquery-3.2.1.min.js"></script>
  <script src="https://telesistema11.com.do/themes/telesistemas/assets/js/slick.min.js"></script>
  <script src="https://telesistema11.com.do/themes/telesistemas/assets/js/dropdown.js"></script>
  <script type="text/javascript">
   $(document).ready(function () {
       stream = false;
       num = Math.floor((Math.random() * 9999) + 1);

       /* ---------------------------------------- */
       $.ajax({
           type: "GET",
           url: "/streaming",
           data: "num=" + num,
           success: function (datos) {
               stream = datos;

               if (stream === "false") {
                   $("#CurrentVideo").html('<div id="avisostream" style="padding:7em 0; text-align:center; height:485px;"><span style="font-size: 4em;" class="glyphicon glyphicon-off"></span><br /><br /><strong>Sin transmision por internet.</strong><br />En estos momentos no estamos transmitiendo.</div>');
                   $("a.live").hide();
               }
           }
       });  

   });

   $("#canal").click(function() {
    if ($("#canal").val() == 21) {
      $("#demo-player.source").val()=
        "http://d16zdyqofyr6h0.cloudfront.net/player_do_canal21.html";

        location.reload();


    }
    if ($("#canal").val() == 7) {
      $("#video").attr(
        "src",
        "http://d16zdyqofyr6h0.cloudfront.net/player_do_antena_latina.html"
      );
    }
    if ($("#canal").val() == 5) {
      $("#video").attr(
        "src",
        "https://www.grupotelemicro.com/livestream/tablalive"
      );
    }
    if ($("#canal").val() == 4) {
      $("#video").attr(
        "src",
        "https://livestream.com/accounts/27035275/events/8371710/player?"
      );
    }
    if ($("#canal").val() == 2) {
      $("#video").attr(
        "src",
        "https://ss1.domint.net:3126/ta2_str/teleantillas/playlist.m3u8"
      );
    }
    if ($("#canal").val() == 11) {
      $("#video").attr("src", "http://telesistema11.com.do/en-directo");
    }
    if ($("#canal").val() == 9) {
      $("#video").attr(
        "src",
        "https://www.dailymotion.com/embed/video/x6tt2y8"
      );
    }
    if ($("#canal").val() == 13) {
      $("#video").attr(
        "src",
        "https://livestream.com/accounts/27035275/events/8371710/player?"
      );
    }
    if ($("#canal").val() == 15) {
      $("#video").attr(
        "src",
        "https://telemicro.com.do/web/digital-15-en-vivo/"
      );
    }
    if ($("#canal").val() == 37) {
      $("#video").attr(
        "src",
        "https://cdn.com.do/b8b9308a-44ea-4939-a512-0038bfb2578b"
      );
    }
    if ($("#canal").val() == 25) {
      $("#video").attr(
        "src",
        "http://dominicanplayers.com/video-player/265/0/0"
      );
    }
  });




    </script>
   <script type="text/javascript">
    var demoplayer;



$(document).ready(function(){
    // Cloudinary Video
    var cld = cloudinary.Cloudinary.new({
        cloud_name: "telesistema-cloud",
        secure: true
    });
       demoplayer = cld.videoPlayer('demo-player', {
        ads: {
            //adTagUrl: "https://googleads.g.doubleclick.net/pagead/ads?client=ca-video-pub-7896857778453643&slotname=1426185775&ad_type=video_text_image&description_url=http%3A%2F%2Ftelesistema11.com.do&videoad_start_delay=0&vpmute=0&vpa=0", 
            locale:"es",
            adLabel:"Tu video comenzará en"
        }
    });
});

muchas gracias

1 respuesta 1

2

Dado que es un select, puedes hacer algo así:

$(function() {

  $('#sel-video').on('change', function() {
    var srcVideo = $(this).val();
      $('#demo-player').attr('src', srcVideo);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel-video">
  <option value="https://ss3.domint.net:3114/t11_str/telesistema/playlist.m3u8" selected=true>--Escoja un vídeo--</option>
  <option value="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/video/sintel-short.mp4">Mountain</option>
  <option value="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4">Rabbit</option>
</select>


<video id="demo-player" controls playsinline class="cld-video-player" style="width: 100%; margin-bottom: 10px" height="500">
 <source src="https://ss3.domint.net:3114/t11_str/telesistema/playlist.m3u8" type="application/x-mpegURL" />

Aquí se escuchan los cambios del select y se usa el value del mismo para poner la URL del vídeo. Cuando el select cambia, se setea a src el video correspondiente.

En la primera opción he puesto el vídeo que viene en el contenedor video (como si fuera por defecto), para que si se vuelve a esa opción, se ponga de nuevo ese vídeo en el contenedor. Esto es útil por ejemplo si de entrada se quiere mostrar un vídeo de bienvenida.

1
  • Aun asi no logro hacer que tome el valor del elemento elegido, debe ser por k tengo esto: <link href="unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet"> <meta property="fb:app_id" content="860356994135936" />. Creo que investigare mas sobre este reproductor, se que debe de existir alguna forma, muchas gracias por la ayuda, aprendi algo nuevo Commented el 23 mar. 2019 a las 3:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.