Add Players in script code

Question

Add Players in script code

Navigation

#1 by (2 votes)

1

I have the following code:

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><divid="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>

The result can be seen here .

As it is, you can only add YouTube videos. I would like to also be able to add videos from Daily Motion and UOL with these 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"allowfullscreenframeborder="0"></iframe>

I would like it to look like this:

  <li><span class="vid" data-videoID="6AmRg3p79pM">Video 1 - Youtube - dailymotion - Uol</span></li>

javascript div script youtube

asked by anonymous 16.12.2015 / 16:15

1 answer

Mask in image How do I select multiple values from the same table

score 2 · Accepted Answer

I thought you already had resolved this problem. To add support for other video platforms, create a class for each platform type for example - dailyMvideo and add a click() function for each of the added platforms using the same model I used in the Youtube video, but doing the changes needed in the iframe code for their platforms.

In other words:

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><divid="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>

  Calling attention again
These videos will not work here on Stack Overflow and jsFiddle, only Youtube videos are supported there for what they seem, but I've tested this code locally and it's working properly.

In order for Daily Motion to work locally, you have to add http: to the beginning of the video source link - src="http://www.dailymotion.com/embed/video/....  HereintheJScodeithashttp:ofwhentestedlocally,butthenyoucanremoveitwhenuploadingcodetoyourplatform,butIthinkthiswillnotmakeadifferenceorbringtroubleunlessyou'reusinga SSL certificate .

PS: I was (and still am) to make this a plugin and make it available on GitHub for all video platforms, but instead of using items from the list, using their images made it LazyLoad Plugin, though I have not started it yet, but if I get a better solution though, I'll do an edit here and comment on it. you will know.

Issue editing for your needs

jsFiddle Example: link

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><divclass="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>