0

Eu tentei criar um vídeo na minha página que é gerado pelo clique do botão através do javascript, como segue no código:

function tocar_video(mysrc){
	var video = document.createElement('video');

	video.src = mysrc;
	video.autoplay = true;
}
.bt202{
	background-image:url("https://image.freepik.com/icones-gratis/botao-de-play_318-42541.jpg");
	background-size:100% 100%;
	background-repeat:no-repeat;
	width:50px;
	height:50px;
}
<!DOCTYPE html>
<html>
<body>
<input class="bt202" id="00202" type="button" onclick="tocar_video('http://somesite.com/somevideo.mp4');"></input>
</body>
</html>

Mas não tive êxito para fazer o vídeo aparecer, alguém saberia apontar o problema?

2
  • Vc quer por o vídeo dentro do input?
    – hugocsl
    Commented 27/02/2018 às 16:03
  • videojs.com
    – Willian
    Commented 27/02/2018 às 16:04

1 Resposta 1

3

Creio que você quer adicionar ele a algum lugar, se for isto então tem que usar appendChild para adicionar a um local desejado da página, por exemplo:

var lastVideo;

function tocar_video(mysrc){
    if (lastVideo && lastVideo.stop) {
         lastVideo.stop(); //Para o video anterior
    }

    var video = document.createElement('video');

    video.src = mysrc;
    video.autoplay = true;

    var videoContainer = document.querySelector("#video-container");

    videoContainer.innerHTML = ""; //Limpa elementos dentro do container ou video anterior

    videoContainer.appendChild(video);

    lastVideo = video; //Define para poder ser parado se trocar de video
}
.bt202{
	background-image:url("https://image.freepik.com/icones-gratis/botao-de-play_318-42541.jpg");
	background-size:100% 100%;
	background-repeat:no-repeat;
	width:50px;
	height:50px;
}
<input class="bt202" id="00202" type="button" onclick="tocar_video('https://www.w3schools.com/html/mov_bbb.mp4')">

<input class="bt202" id="00203" type="button" onclick="tocar_video('https://upload.wikimedia.org/wikipedia/commons/9/96/Video_animation_gyroscope_precession.ogv');">

<input class="bt202" id="00204" type="button" onclick="tocar_video('https://upload.wikimedia.org/wikipedia/commons/9/99/Animation_of_Rotating_Earth_at_Night.webm')">

<input class="bt202" id="00205" type="button" onclick="tocar_video('https://upload.wikimedia.org/wikipedia/commons/b/bb/Animation.ogv');">

<!-- Container aonde vai ser adicionado o video -->
<div id="video-container"></div>

2
  • Sim, obrigado, resolveu o problema. Mas desse modo é possível manipular as medidas, controls e outras funções ? Eu tentei algo como videoContainer.setAttribute("width","400"); e não funcionou
    – Dr.G
    Commented 27/02/2018 às 20:03
  • @Dr.G adicione no video o setAttirbute e não no videoContainer
    – Syzoth
    Commented 27/02/2018 às 20:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .