implementation tip

Question

implementation tip

Navigation

#1 by (1 votes)

1

I made a page using the <video> tag, as per the 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, as soon as the user places a url of the video there in 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, should I create a database with a table that will receive the url (type VARCHAR ) and then store that url in the database? Then just make a SELECT of that url and add it to the url instead, is not it?

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

php javascript

asked by anonymous 15.03.2015 / 17:31

1 answer

How to put the next and previous buttons on a Slider? How can I convert these strings in PHP?

score 1 · Answer 1

You can do the following, add a listener in the changeVideo input that executes when your text changes. This listener performs a function that is "debounced", that is, it only executes after x milliseconds with no action to prevent the video from changing as the user types.

<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>