hint of implementation

Question

I made a page using the tag <video>, as code below:

function teste(){
var url = document.getElementById('mudarVideo').value;
if(url === '')
{
	alert('campo Vazio');
} else {
   		videoConteudo = document.getElementById('meuVideo');
   	videoConteudo.pause();
   	document.querySelector("#meuVideo > source").src = url;
	videoConteudo.load();
	}				
}

<div class="center">
<input type="text" id="mudarVideo" value="">
<input type="button" id="btn-insere" onclick="teste()" value="Inserir novo video"/>
<video autoplay loop width="960" height="540" id="meuVideo">
	<source src="http://www.jennylynpereira.com/demo/html/awesome-photography3/html/videos/video.mp4" id="tv_main_channel">
</video>
</div>

I wanted to do something interactive, so the user put a video url there on input mudarVideo (for example: techslides.com/demos/sample-videos/small.mp4), the site will be updated with the new content, this implementation was done in javascript and is working, but has no dynamic interaction.

To do this, I must create a database with a table that will receive the url (type VARCHAR) and then store this url in the bank? Then just do a SELECT of that url and add in place of the url, it is not?

document.querySelector("#meuVideo > source").src = url;

Answer 1

You can do the following, add a Listener in the modifiVideo input that runs when its text is changed. This Thinker performs a function that is "debounced", that is, only runs after x milliseconds with no action to prevent the video from changing while the user type.

<div class="center">
    <input type="text" id="mudarVideo" onchange="onUrlChange()" value="">
    <input type="button" id="btn-insere" onclick="teste()" value="Inserir novo video"/>

    <video autoplay loop width="960" height="540" id="meuVideo">
        <source src="http://www.jennylynpereira.com/demo/html/awesome-photography3/html/videos/video.mp4" id="tv_main_channel">
    </video>
</div>
<script>
    function debounce(fn, delay) {
        var timer = null;
        return function () {
            var context = this, args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(context, args);
            }, delay);
        };
    }

    var changeVideoSource = debounce(function(url) {
        document.querySelector("#meuVideo > source").src = url;
    }, 800);

    function onTextChange() {
        var url = document.getElementById('mudarVideo').value;
        if (url.length > 0) {
            changeVideoSource(url);
        }
    }

    function teste(){
        var url = document.getElementById('mudarVideo').value;
        if(url === '')
        {
            alert('campo Vazio');
        } else {
            var videoConteudo = document.getElementById('meuVideo');
            videoConteudo.pause();
            document.querySelector("#meuVideo > source").src = url;
            videoConteudo.load();
        }
    }
</script>