Quero criar um Script que funcione como em sites do gênero: dailymotion, metacafe e outros tantos repositórios de vídeos que fazem isso. Quando o usuário abre um vídeo ele bota o vídeo pra rodar dentro duma div
cujo id
será definido para isso, em outro elemento HTML
também com id
traz o carregamento dos demais videos relacionados ao qual selecionei, ou seja, vídeos similares, recomendados, etc.
A intenção aqui é saber como funciona essa modelagem de programação, algumas idéias serão bem recebidas e melhor se houver um exemplo prático/didático.
Exemplo
var soma = 0
while (soma < 1000){
soma += parseInt(Math.random() * 100)
document.write (soma + "<br>")
}
Neste exemplo declaro uma variável e a inicio com 0 e com um laço for
somo um número aleatório do 1 ao 100 até chegar a 1.000, imprimindo o valor da variável soma depois de cada operação.
Desejo criar algo client-side
e não server-side
trabalho minhas idéias com este combo html
, css
e js
. E o código ele recarrega de modo aleatório do 1 ao 100, os arquivos que tenho são nomeados por número.
// 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>
Sei que a pergunta é ampla, mas não sei nem por onde começar a desenvolver algo do tipo. Qualquer auxilio sera bem vindo.