Create a video by javascript

Question

Create a video by javascript

Asked 6 years, 8 months ago

Viewed 272 times

0

I tried to create a video on my page that is generated by clicking the button through javascript, as follows in the code:

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>

But I didn’t succeed to make the video appear, someone would point out the problem?

You want to put the video inside the input?

– hugocsl

2018/02/27 at 16:03
https://videojs.com/

– Willian

2018/02/27 at 16:04

1 answer

Browser other questions tagged javascript html css videojs

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2018-02-27T16:06:31+00:00

I think you want to add it somewhere, if that’s it then you have to use it appendChild to add to a desired location of the page, for example:

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>