1

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>

3
  • debes agregar a tu pregunta los src de lo videos o como los manejas o almacenas para poder ayudarte de momento solo vemos miniaturas con nombres y tiempo pero sin referencia de src de videos!
    – Bryro
    Commented el 27 mar. 2019 a las 18:37
  • @Bryro Hola si, perdona culpa mía vi ese fallo ahora. Pero veo que te apañaste con mi info y me ayudaste muchísimo
    – Renzo
    Commented el 28 mar. 2019 a las 14:48
  • 1
    @Trauma perfecto, listo !
    – Renzo
    Commented el 28 mar. 2019 a las 14:54

1 respuesta 1

2

Puedes hacer algo como esto:

el video lo tomo del href del anchor

$(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>

4
  • Duda resuelta 100% satisfactória con tu ayuda, muy clara y perfecta para lo que necesitaba! Gracias
    – Renzo
    Commented el 28 mar. 2019 a las 14:49
  • Hola !, es posible hacer que reproduzca un URL Youtube?
    – Renzo
    Commented el 28 mar. 2019 a las 17:52
  • si. pero para poder responderte con codigo debes hacer otra pregunta!
    – Bryro
    Commented el 28 mar. 2019 a las 17:55
  • Vale gracias!, lo tengo aquí [es.stackoverflow.com/questions/249705/…
    – Renzo
    Commented el 28 mar. 2019 a las 18:05

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.