1

Tenho o seguinte código:

var buttons = $('#videoGallery .vid');
var liHeight = $('#videoGallery li').height();

buttons.click(function(){
var videoID = $(this).attr('data-videoID');
var videos = $('<div id="meuVideo"> <iframe width="560" height="315" src="https://www.youtube.com/embed/'+ videoID +'?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>');

$('#meuVideo, .nowPlaying').remove();
videos.insertAfter(this).hide().slideDown("fast");
$('<span class="nowPlaying">▼ Reproduzindo ...</span>').insertAfter(this);
$('html, body').animate({
    scrollTop: (videos.offset().top-liHeight)
}, 200);
});

$('#close').click(function(){
$('#meuVideo, .nowPlaying').remove();
});


#videoGallery ul {
list-style: none;
margin: 0;
padding: 0;
}
#videoGallery span {
display: block;
background-color: steelblue;
color: #fff;
font-family: sans-serif;
cursor: pointer;
padding: 4px 10px;
border-bottom: 1px solid #fff;
}

#videoGallery li {
position: relative;
}
span.nowPlaying {
position: absolute;
top: 0;
right: 0;
}


<script   src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
 <div id="videoGallery">
 <ul>
 <li><span class="vid" data-videoID="6AmRg3p79pM">Video 1</span></li>
 <li><span class="vid" data-videoID="MkLFlaWxgJA">Video 2</span></li>
 <li><span class="vid" data-videoID="kIhe7nFcbUg">Video 3</span></li>
 <li><span class="vid" data-videoID="El3IZFGERbM">Video 4</span></li>
 <li><span id="close">Fechar Tudo</span></li>
 </ul>
 </div>

O resultado pode ser visto aqui.

Da forma como está, só é possivel adicionar vídeos do YouTube. Gostaria que fosse possível adicionar também vídeos do Daily Motion e do UOL, com esses players:

  //DailyMotion
  <iframe frameborder="0" width="480" height="270" src="//www.dailymotion.com/embed/video/x3hyqc1" allowfullscreen></iframe>
  //UOL
  <iframe width="640" height="360" src="http://mais.uol.com.br/static/uolplayer/?mediaId=15704761" allowfullscreen frameborder="0"></iframe>

Gostaria que ficasse assim:

  <li><span class="vid" data-videoID="6AmRg3p79pM">Video 1 - Youtube - dailymotion - Uol</span></li>
4
  • 1
    E por que nao coloca como mostrou no fim do código? Commented 16/12/2015 às 16:42
  • Como assim? a última parte do codigo é como queria deixar
    – Endou
    Commented 16/12/2015 às 18:31
  • Que confuso, sei da resposta mas nao faco ideia de qual era o problema. Criem uma resposta e mantenham a questão, por favor.
    – RBoschini
    Commented 16/12/2015 às 18:48
  • O problema é que o codigo só da para usar videos do youtube. gostaria de usa videos de outros servidores aquele dois que mencionei na pergunta.
    – Endou
    Commented 16/12/2015 às 20:21

1 Resposta 1

2

Pensei que já tivesses resolvido este problema.
Para adicionar suporte a outras plataformas de video, cria uma class para cada tipo de plataforma por exemplo - dailyMvideo e adiciona uma função click() para cada uma das plataformas adicionadas utilizando o mesmo modelo que usei no video do Youtube, mas fazendo as alterações necessárias no código iframe para as respetivas plataformas.

Por outras palavras:

var ytVideo = $('#videoGallery .ytVideo');
var dailyMvideo = $('#videoGallery .dailyMvideo');
var uolVideo = $('#videoGallery .uolVideo');
var liHeight = $('#videoGallery li').height();

// Youtube Video
ytVideo.click(function(){
var videoID = $(this).attr('data-videoID');
var videos = $('<div id="meuVideo"> <iframe width="560" height="315" src="https://www.youtube.com/embed/'+ videoID +'?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>');

$('#meuVideo, .nowPlaying').remove();
videos.insertAfter(this).hide().slideDown("fast");
$('<span class="nowPlaying">▼ Reproduzindo ...</span>').insertAfter(this);
$('html, body').animate({
    scrollTop: (videos.offset().top-liHeight)
}, 200);
});

// Daily Motion Video
dailyMvideo.click(function(){
var videoID = $(this).attr('data-videoID');
var videos = $('<div id="meuVideo"> <iframe frameborder="0" width="480" height="270" src="http://www.dailymotion.com/embed/video/'+ videoID +'" allowfullscreen></iframe> </div>');

$('#meuVideo, .nowPlaying').remove();
videos.insertAfter(this).hide().slideDown("fast");
$('<span class="nowPlaying">▼ Reproduzindo ...</span>').insertAfter(this);
$('html, body').animate({
    scrollTop: (videos.offset().top-liHeight)
}, 200);
});

// UOL Video
uolVideo.click(function(){
var videoID = $(this).attr('data-videoID');
var videos = $('<div id="meuVideo"> <iframe width="640" height="360" src="http://mais.uol.com.br/static/uolplayer/?mediaId='+ videoID +'" allowfullscreen frameborder="0"></iframe> </div>');

$('#meuVideo, .nowPlaying').remove();
videos.insertAfter(this).hide().slideDown("fast");
$('<span class="nowPlaying">▼ Reproduzindo ...</span>').insertAfter(this);
$('html, body').animate({
    scrollTop: (videos.offset().top-liHeight)
}, 200);
});

// Fechar Videos
$('#close').click(function(){
$('#meuVideo, .nowPlaying').remove();
});
#videoGallery ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#videoGallery span {
    display: block;
    background-color: steelblue;
    color: #fff;
    font-family: sans-serif;
    cursor: pointer;
    padding: 4px 10px;
    border-bottom: 1px solid #fff;
}

#videoGallery li {
    position: relative;
}
span.nowPlaying {
    position: absolute;
    top: 0;
    right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="videoGallery">
    <ul>
        <li><span class="ytVideo" data-videoID="6AmRg3p79pM">Video 1</span></li>
        <li><span class="dailyMvideo" data-videoID="x10abe2">Video 2</span></li>
        <li><span class="uolVideo" data-videoID="15704761">Video 3</span></li>
        <li><span class="ytVideo" data-videoID="El3IZFGERbM">Video 4</span></li>
        <li><span id="close">Fechar Tudo</span></li>
    </ul>
</div>

Chamando outra vez a atenção

Estes videos não irão funcionar aqui no Stack Overflow e no jsFiddle, apenas os videos do Youtube são lá suportados pelo que parece, mas eu testei este código localmente e está a funcionar corretamente.

Para que o Daily Motion funcione localmente, tem que se adicionar o http: no início do link fonte do video - src="http://www.dailymotion.com/embed/video/....
Aqui no código JS ele está com o http: de quando testei localmente, mas depois podes removê-lo quando fizeres upload do código para a tua plataforma, mas penso que isto não irá fazer diferença ou trazer problemas, a menos que estejas a usar um certificado SSL.

PS: Eu estava (e ainda estou) para fazer disto um plugin e torná-lo disponível no GitHub para todas as plataformas de video, mas em vez de utilizar items da lista, utilizar as respectivas imagens tornado-o num LazyLoad Plugin, entretanto ainda não o comecei a desenvolver, mas se arranjar uma solução mais aprimorada entretanto, eu faço aqui uma edição e comento para ficares a saber.


Edição da edição para as tuas necessidades

Exemplo jsFiddle: https://jsfiddle.net/src_code/3x8gfjvk/

var ytVideo = $('.videoGallery .ytVideo');
var dailyMvideo = $('.videoGallery .dailyMvideo');
var uolVideo = $('.videoGallery .uolVideo');
var liHeight = $('.videoGallery li').height();

// Youtube Video
ytVideo.click(function(){
var videoID = $(this).attr('data-videoID');
var videos = $('<div class="meuVideo"> <iframe width="560" height="315" src="https://www.youtube.com/embed/'+ videoID +'?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>');

$('.meuVideo, .nowPlaying').remove();
$(this).parents().eq(2).append(videos);
$('<i class="nowPlaying">▼ Reproduzindo ...</i>').insertAfter(this);
});

// Daily Motion Video
dailyMvideo.click(function(){
var videoID = $(this).attr('data-videoID');
var videos = $('<div class="meuVideo"> <iframe frameborder="0" width="480" height="270" src="http://www.dailymotion.com/embed/video/'+ videoID +'" allowfullscreen></iframe> </div>');

$('.meuVideo, .nowPlaying').remove();
$(this).parents().eq(2).append(videos);
$('<i class="nowPlaying">▼ Reproduzindo ...</i>').insertAfter(this);
});

// UOL Video
uolVideo.click(function(){
var videoID = $(this).attr('data-videoID');
var videos = $('<div class="meuVideo"> <iframe width="640" height="360" src="http://mais.uol.com.br/static/uolplayer/?mediaId='+ videoID +'" allowfullscreen frameborder="0"></iframe> </div>');

$('.meuVideo, .nowPlaying').remove();
$(this).parents().eq(2).append(videos);
$('<i class="nowPlaying">▼ Reproduzindo ...</i>').insertAfter(this);
});

// Fechar Videos
$('.close').click(function(){
$('.meuVideo, .nowPlaying').remove();
});
.videoGallery {margin-bottom:5px;}
.videoGallery ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.videoGallery li {
    display: inline-block;
    background-color: steelblue;
    color: #fff;
    padding: 4px 10px;
    border: 1px solid steelblue;
}
.videoGallery li:first-child,
.videoGallery li:last-child {background-color:initial; color:#000;}
.videoGallery span {cursor: pointer;}

i.nowPlaying {
    font-size: 13px;
    background: #C50202;
    margin-left: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="videoGallery">
    <ul>
        <li>Video 01</li>
        <li><span class="ytVideo" data-videoID="6AmRg3p79pM">Youtube</span></li>
        <li><span class="dailyMvideo" data-videoID="x10abe2">Daily Motion</span></li>
        <li><span class="uolVideo" data-videoID="15704761">UOL</span></li>
        <li><span class="ytVideo" data-videoID="El3IZFGERbM">Youtube</span></li>
        <li><span class="close">Fechar Tudo</span></li>
    </ul>
</div>

2
  • Vamos continuar esta discussão no chat.
    – Endou
    Commented 17/12/2015 às 23:12
  • Chun, esse codigo só funcionaria através de Iframes? ou teria alguma forma de fazer em videos que são compartilhados através da forma object?
    – Endou
    Commented 4/01/2016 às 13:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .