How to Develop Related Videos

Question

I want to create a script that works like on websites of the genre: Dailymotion, Metacafe and so many other video repositories that do this. When the user opens a video he puts the video to run inside a video div whose id will be defined for this, in another element HTML also with id brings the upload of the other related videos I selected, ie similar videos, recommended, etc.

The intention here is to know how this programming modeling works, some ideas will be well received and better if there is a practical/didactic example.

Example

var soma = 0
while (soma < 1000){
    soma += parseInt(Math.random() * 100)
    document.write (soma + "<br>")
} 

In this example I declare a variable and start with 0 and a loop for we are a random number from 1 to 100 until 1,000, printing the value of the sum variable after each operation.

I wish to create something client-side and not server-side work my ideas with this combo html, css and js. And the code it reloads randomly from 1 to 100, the files I have are named by number.

 // chamar função apenas 1 vez!!!
var str = window.setInterval('carregar()', 2000);

window.setInterval('window.clearInterval(str)', 3000);

var dir = 'https://sites.google.com/site/mplayerplugin/thumbnails';

var ext = 'jpg';

// função responsável por desenvolver carregamento de videos relacionados
carregar = function(){

var soma = 0;

while (soma < 100){

soma += parseInt(Math.random() * 10);

document.getElementById('playlist').innerHTML += "<img src='"+ dir + "/" + soma + "." + ext +"' onclick='limpar(); carregar();'><br>";

    } 

}

// limpa playlist para popular novamente com demais videos relacionados
limpar = function() {

document.getElementById('playlist').innerHTML = '';

}

#playlist {

	width:250px; 

   	height:100%;

	padding:15px; 

	float: right;

border: 1px solid silver;

overflow: auto;

}

img {

padding: 10 10 10 10;

margin: 0 auto;

width: 196px; 

height: 110px;

text-align: center;

}

img:hover { 

background-color: steelblue; 

cursor: pointer; 

}

<div id="playlist"> &nbsp; </div>

---

I know the question is wide, but I don’t even know where to start to develop something like this. Any help will be welcome.

Answer 1

Follows my model:

	     body {
	          background-color: whitesmoke;
	      }

        .player a span {
            display: none;
        }

        .player a:hover span {
            background: transparent;
            display: block;
            position: absolute;
            z-index: 100;
        }

        .player a:hover span img {
            background: blue;
        }

        .player a:hover em {
            z-index: 1;
            display: none;
        }

        .player a img {
            border: white 1px solid;
        }

        .player a:hover img {
            border: white 1px solid;
        }

        #snapshot {
            width: 480px;
            height: 320px;
            border: 1px solid red;
            background-color: white;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 480px 320px;
            position: absolute;
            cursor: pointer;
        }

        #playlist {
	          padding: 25px 35px 35px 35px;
            width: 200px;
            height: 100%;
            float: right;
            border: 1px solid red;
            overflow: auto;
            position: relevante;
            text-align: center;
            margin: 0 auto;
	          background-color: white;
        }

        img {
            width: 196px;
            height: 110px;
        }

        img:hover {
            cursor: pointer;
        }

    <h1>Vídeo Play!</h1>

    <div class="player">
        <a href="#">
<span>
<img style='background:transparent;border:0;margin:100px 0 0 145px;' src="https://sites.google.com/site/mplayerplugin/thumbnails/run.png" height="480" width="320" />
</span>
<img id="snapshot" height="480" width="320"/>
</a>
    </div>

    <div id="playlist"> &nbsp; </div>


    <script>
        // Chamar função apenas 1 vez!!!
        var str = window.setInterval('carregar()', 1500);

        window.setInterval('window.clearInterval(str)', 3000);

        var dir = 'https://sites.google.com/site/mplayerplugin/thumbnails';

        var ext = 'jpg';

        // Função responsável por desenvolver carregamento de videos relacionados
        carregar = function() {

            var soma = 0;

            while (soma < 100) {
// Partindo de 0 - 100, carregar aleatoriamente 10 arquivos na Playlist. Sendo 1 arquivo único(sem duplicar). Assim 0..100 * 10 + 1. Veja:
                soma += parseInt((Math.random() * 10) + 1);

                document.getElementById('playlist').innerHTML += "<img src='" + dir + "/" + soma + "." + ext + "' onclick='limpar(); carregar(); exibir(this.src)'><br>";

            }
        }

        // Limpa playlist para popular novamente com demais videos relacionados
        limpar = function() {
            document.getElementById('playlist').innerHTML = '';
        }

        // Pega o atributo src da tag image na Playlist e insere no player/snapshot
        function exibir(fig) {
            document.getElementById("snapshot").style.backgroundImage = "url('" + fig + "')";
        }
    </script>

w3schools - see a demonstration