en un post anterior de poder cambiar de vídeo con JS me dieron la respuesta perfecta.
Esta vez tendría la duda de si uno de los "src" que quiero reproducir al seleccionar es un URL de Youtube.
Tengo el ejemplo anterior de un compañero de la comunidad :
$(document).ready(function(){
let video = $("#videoPlayer")[0];
let anchor = $("a");
$(document).on("change", ".file_multi_video", function(evt) {
let $source = $('#videos');
$source[0].src = URL.createObjectURL(this.files[0]);
$source.parent()[0].load();
});
// asignamos un evento click a los anchor
anchor.on("click", function(e){
// prevenimos el comportamiento por defecto del anchor
e.preventDefault();
// asignamos como src del video el valor el href del anchor
video.src = $(this).attr("href");
// cargamos el video
video.load();
// le damos play
video.play();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video width="400px" height="auto" controls autoplay id="videoPlayer">
<source src="" id="videos">
</video>
<input type="file" name="file[]" class="file_multi_video"
accept="video/*">
<ul class="list-unstyled video-list-thumbs row">
<li class="col-lg-3 col-sm-4 col-xs-6">
<a href="https://download.blender.org/peach/trailer/trailer_400p.ogg" title="<?php echo $variablename1;?>">
<img src="https://peach.blender.org/wp-content/uploads/poster_rodents_big.jpg?x81236" 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="https://thenewcode.com/assets/videos/downtown-los-angeles.mp4" title="<?php echo $variablename2;?>">
<img src="https://st.depositphotos.com/1035350/4080/i/950/depositphotos_40803427-stock-photo-downtown-los-angeles.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="http://learn.shayhowe.com/assets/misc/courses/html-css/adding-media/earth.mp4" title="<?php echo $variablename3;?>">
<img src="https://static.posters.cz/image/1300/fotomurales/planet-earth-416x290-cm-premium-non-woven-wallpaper-130gsm-i55819.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="https://vjs.zencdn.net/v/oceans.mp4" title="<?php echo $variablename4;?>">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/09/2b/37/3c/ocean-blue-tenerife.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>
</li>