Create a video by javascript

Question

Create a video by javascript

Navigation

#1 by (3 votes)

0

I tried to create a video on my page which is generated by button click 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 was not successful in making the video appear, could anyone point out the problem?

javascript html css videojs

asked by anonymous 27.02.2018 / 16:57

1 answer

Using tag picture Configuring the Web.Config file

score 3 · Accepted Answer

I think you want to add it somewhere, if it is so you have to use appendChild to add to a desired place on 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>