Add Players in script code

Asked

Viewed 246 times

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>
 <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>

The result can be seen here.

The way it is, you can only add Youtube videos. I would like it to be possible to add Daily Motion and UOL videos 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" allowfullscreen frameborder="0"></iframe>

I’d like to keep it that way: 

  <li><span class="vid" data-videoID="6AmRg3p79pM">Video 1 - Youtube - dailymotion - Uol</span></li>
javascript script div youtube
  • 1

    And why don’t you put it like you showed at the end of the code?

  • What do you mean? the last part of the code is how I wanted to leave it

  • That’s confusing, I know the answer but I have no idea what the problem was. Create an answer and keep the question, please.

  • The problem is that the code is only to use youtube videos. I would like to use videos from other servers that two that I mentioned in the question.

1 answer

2


I thought you already had solved this problem.
To add support for other video platforms, create a class for each platform type for example - dailyMvideo and adds a function click() for each of the platforms added using the same template I used on the Youtube video, but making the necessary changes to the code iframe for the respective 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>

<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>

Calling attention again

These videos will not work here on Stack Overflow and jsFiddle, only Youtube videos are there supported by what it seems, but I have tested this code locally and it is working properly.

For the Daily Motion to work locally, you have to add the http: at the beginning of the video source link - src="http://www.dailymotion.com/embed/video/....
Here in the JS code it is with the http: when I tested it locally, but then you can remove it when you upload the code to your platform, but I don’t think this will make a difference or cause problems, unless you’re using a 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 list items, use the respective images turned into one Lazyload Plugin, however I haven’t started to develop it yet, but if I find a more improved solution meanwhile, I make here an edition and comment to know.

Editing the edition for your needs

Example 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>

  • Let’s go continue this discussion in chat.

  • Chun, would this code only work through Iframes? or would it have some way to do in videos that are shared through the Object form?

Browser other questions tagged javascript script div youtube

You are not signed in. Login or sign up in order to post.