-1

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>

2
  • 1
    Por favor aclara tu pregunta, añade un enlace al soporte que te dieron anteriormente. Siendo sincero no entiendo qué quieres lograr. Commented el 28 mar. 2019 a las 18:16
  • Hola, gracias por tu respuesta, felizmente ya lo resolvieron. Para la próxima tendré en cuenta tu tip.
    – Renzo
    Commented el 1 abr. 2019 a las 15:24

2 respuestas 2

1

para reproducir los video de youtube requieres un iframe:

nota: el snippets de stackoverflow no permite iframe por eso no lo podras ver aqui!

version funcional: jsfiddle

$(document).ready(function(){
    // seleccionamos el  video
	let video = $("#videoPlayer");
    // seleccionamos el anchor
	let anchor = $("a");
    // seleccionamos el iframe
    let frame = $("#youtube");
    // embed youtube url
    let embed = "https://www.youtube.com/embed/";

	$(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();
        // optenemos el valor el href del anchor
        let href = $(this).attr("href");
        // creamos un regex para youtube
        let you =/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i;
        // validamos que sea un video de youtube
        if (href.match(you)) {
            //obtenemos el id del video
            let idv = href.match(you)[1];
            // escondemos el reproductor de video html5
            video.css("display","none");
            // pausamos el video html5
            video[0].pause();
            // configuramos el iframe con el video de youtub
            frame.attr("src",`${embed}${idv}?autoplay=1`);
            // mostramos el iframe
            frame.css("display","initial");

        }else{
            // escondemos el iframe
            frame.css("display","none");
            // mostramos el reprodutor de video html5
            video.css("display","initial");
            // desconfiguramos el iframe para que el video se pause
            frame.attr("src",`${embed}`);
            // asignamos como src del video el valor el href del anchor
            video[0].src = href;
            //cargamos el video
            video[0].load();
            //le damos play
            video[0].play();
        }
	})
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

 <video width="400px" height="auto" controls autoplay id="videoPlayer">
  <source src="" id="videos">
</video>

<iframe width="400px"  src="" frameborder="0" id="youtube" allow='autoplay' style="display:none;"></iframe>

<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="https://www.youtube.com/watch?v=W9K7VfN4XPE" title="<?php echo $variablename3;?>">
    <img src="http://static.t13.cl/images/sizes/1200x675/1523274300-sencillo.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>

1
  • Buenas ! el código nuevamente va perfecto gracias !
    – Renzo
    Commented el 1 abr. 2019 a las 13:46
0

Así:

Yo usé un replace porque:

URL de Youtube: https://youtu.be/**DYpOsgBdN6k**

URL embed: https://www.youtube.com/embed/**DYpOsgBdN6k**

Tuve que reemplazar lo que no está en negrita con replace() así: str.replace("https://youtu.be/","https://youtube.com/embed/")

Usé br para que todo esté vertical, antes de cada etiqueta

function car(){
var x=document.getElementById("txt");
let str = x.value; document.getElementById("vid").src=str.replace("https://youtu.be/","https://youtube.com/embed/");
}
<!DOCTYPE html>
<html>
<body>
<br><input id="txt">
<br><button onclick="car()">Cargar video</button>
<br><iframe id="vid"></iframe>
</body>
</html>

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.