I want to create a script that works like in sites of the genre: dailymotion , metacafe and many other video repositories that do this. When the user opens a video, he starts the video to run inside a div
whose id
will be defined for this, in another element HTML
also with id
brings the loading of the other videos related to which I selected, , 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 with a for
loop a random number from 1 to 100 until it reaches 1,000, printing the value of the sum variable after each operation.
I want to create something client-side
and not server-side
work my ideas with this combo html
, css
and js
. And the code it recharges 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"> </div>
I know the question is wide, but I do not even know where to start developing something like that. Any help would be welcome.