Skip to main content
se añadieron 365 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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

$(function() {

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

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel-video">
  <option value="-1"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.

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

$(function() {

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

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel-video">
  <option value="-1" 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.

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.

Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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

$(function() {

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

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel-video">
  <option value="-1" 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.