Skip to main content
1 de 3
Renzo
  • 35
  • 10

Cómo cambiar con JS el vídeo en un reproductor Video

Quisiera cambiar el vídeo al dar click en una de las opciones, tengo todos los sources de los videos guardados en variables. Hasta ahora el reproductor carga por defecto un video y cuando seleccionas un vídeo del ordenador lo reproduce.

HTML

    <video width="100%" height="auto" controls autoplay id="videoPlayer">
      <source src="<?php echo $variablesrc1;?>" id="videos">
    </video>

    <input type="file" name="file[]" class="file_multi_video" 
    accept="video/*">

JS

$(document).on("change", ".file_multi_video", function(evt) {
var $source = $('#videos');
$source[0].src = URL.createObjectURL(this.files[0]);
$source.parent()[0].load();
});

En la parte de seleccionar videos a reproducir lo tengo así

<ul class="list-unstyled video-list-thumbs row">
<li class="col-lg-3 col-sm-4 col-xs-6">
    <a href="#" title="<?php echo $variablename1;?>">
        <img src="https://i.ytimg.com/vi/6fyDb3rks2o/maxresdefault.jpg" alt="video" class="img-responsive" height="130px" />
        <h2><?php echo $variablename1;?></h2>
        <span class="glyphicon glyphicon-play-circle"></span>
        <span class="duration">03:15</span>
    </a>
</li>
<li class="col-lg-3 col-sm-4 col-xs-6">
    <a href="#" title="<?php echo $variablename2;?>">
        <img src="https://i.ytimg.com/vi/6fyDb3rks2o/maxresdefault.jpg" alt="video" class="img-responsive" height="130px" />
        <h2><?php echo $variablename2;?></h2>
        <span class="glyphicon glyphicon-play-circle"></span>
        <span class="duration">03:15</span>
    </a>
</li>
<li class="col-lg-3 col-sm-4 col-xs-6">
    <a href="#" title="<?php echo $variablename3;?>">
        <img src="https://i.ytimg.com/vi/6fyDb3rks2o/maxresdefault.jpg" alt="video" class="img-responsive" height="130px" />
        <h2><?php echo $variablename3;?></h2>
        <span class="glyphicon glyphicon-play-circle"></span>
        <span class="duration">03:15</span>
    </a>
</li>
<li class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
    <a href="#" title="<?php echo $variablename4;?>">
        <img src="https://i.ytimg.com/vi/6fyDb3rks2o/maxresdefault.jpg" alt="video" class="img-responsive" height="130px" />
        <h2><?php echo $variablename4;?></h2>
        <span class="glyphicon glyphicon-play-circle"></span>
        <span class="duration">03:15</span>
    </a>
Renzo
  • 35
  • 10