I have a set of images that correspond to video thumbnails. The user clicks a thumb which loads the browser. This would be simple enough, but I need to track which of the thumbs was clicked, so that I can automatically cue up the next video in sequence.
My first thought was to do something like this (highly simplified example):
<div class="thumbs">
<img id="vt_0" src="thumbxxx00.jpg" />
<img id="vt_1" src="thumbxxx01.jpg" />
<img id="vt_2" src="thumbxxx02.jpg" />
<img id="vt_3" src="thumbxxx03.jpg" />
<img id="vt_4" src="thumbxxx04.jpg" />
<img id="vt_5" src="thumbxxx05.jpg" />
<img id="vt_6" src="thumbxxx06.jpg" />
</div>
<script type="text/javascript">
var videos = [ "xxx00", "xxx01", "xxx02", "xxx03", "xxx04", "xxx05", "xxx06" ];
var video_index = null;
function playVideo(id) {
// play video then call "onVideoFinish()" when video ends.
}
function onVideoFinish() {
video_index = (video_index = 6) ? video_index : video_index+1;
playVideo(videos[video_index]);
}
$j("div.thumbnail img").live("click", function (e) {
e.preventDefault();
var selected_id = $(this).attr("id").split("_")[1];
video_index = selected_id;
playvideo( videos[video_index] );
});
</script>
At first glance this seems to be okay, but I'm not sure if this is the best/most elegant solution, especially as I'd be implementing all these methods from within an object context.
This is how I would do it. The only global that you need in this case is currentPlayOrder, which could be stored someone as part of a preferences or configuration model.
First the HTML. I moved the video sources into the rel attribute of the associated thumbnail. I assume that your application is generating the thumbnails, in which case, this would be an appropriate method since whatever generates the thumbnail HTML could be made aware of the associated video sources.
<div class="thumbs">
<img id="vt_0" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoA"/>
<img id="vt_1" src="http://serverfault.com/content/img/sf/logo.png" rel="videoB"/>
<img id="vt_2" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoC"/>
<img id="vt_3" src="http://serverfault.com/content/img/sf/logo.png" rel="videoD"/>
<img id="vt_4" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoE"/>
<img id="vt_5" src="http://serverfault.com/content/img/sf/logo.png" rel="videoF"/>
<img id="vt_6" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoG"/>
</div>
Now the JS. Notice the use of previousSibling and nextSibling to determine play order:
<script type="text/javascript">
var PLAY_ORDER_BACKWARD = "previousSibling";
var PLAY_ORDER_FORWARD = "nextSibling";
var currentPlayOrder = PLAY_ORDER_FORWARD;
$(document).ready(function() {
$(".thumbs img").each(function(i, node) {
$(node).click(function() {
playVideo(this.getAttribute("rel"), this);
});
});
});
var playVideo = function(source, thumbNode) {
console.log("Play video %s", source);
onVideoFinish(thumbNode);
// If your video play accepts a callback, you may need to pass it as
// function() { onVideoFinish(thumbNode); }
}
var onVideoFinish = function(thumbNode) {
// Get the next img node (if any) in the appropriate direction
while ( thumbNode = thumbNode[currentPlayOrder] ) {
if ( thumbNode.tagName == "IMG" ) { break; }
}
// If an img node exists and it has the rel (video source) attribute
if ( thumbNode && thumbNode.getAttribute("rel") ) {
playVideo(thumbNode.getAttribute("rel"), thumbNode);
}
// Otherwise, assume that there are no more thumbs/videos in this direction
else {
console.log("No more videos to play");
}
}
</script>
Hope that helps.
Here's how I would do it.
Instead of storing the video names inside an array, why not store the video name along with the thumbnail?
You can use the class attribute to store the name of the video.
Once you take this approach, things become simple.
<div class="thumbs">
<img id="vt_0" src="thumbxxx00.jpg" class="xxx00"/>
<img id="vt_1" src="thumbxxx01.jpg" class="xxx01"/>
<img id="vt_2" src="thumbxxx02.jpg" class="xxx02"/>
<img id="vt_3" src="thumbxxx03.jpg" class="xxx03"/>
<img id="vt_4" src="thumbxxx04.jpg" class="xxx04"/>
<img id="vt_5" src="thumbxxx05.jpg" class="xxx05"/>
<img id="vt_6" src="thumbxxx06.jpg" class="xxx06"/>
</div>
<script type="text/javascript">
function setupVideoPlayer(order)
{
//lastThumb won't be accessible from outside of setupVideoPlayer
//function.
var lastThumb = null;
var imageSelector = 'div.thumbs img';
function playVideo(video)
{
//Play the video.
onVideoFinish();
}
function onVideoFinish()
{
//If order is 'ascending', we will go to the 'next'
//image, otherwise we will go to 'previous' image.
var method = order == 'asc' ? 'next' : 'prev';
//When user is at the end, we need to reset it either at the
//first image (for ascending) or the last (for descending).
var resetIndex = order == 'asc' ? 0 : $(imageSelector).length - 1;
//When video has finished playing, we will try to
//find the next/prev (depending upon order) sibling of 'lastThumb',
//If we can not find any sibling, it means we are at the
//last/first thumbnail and we will go back and fetch the first/last
//image.
//Also, instead of calling the playVideo method, we will
//fire the click event of thumbnail. This way, if you decide to
//do something in future (say playing an ad before the video)
//you only need to do it in your click handler.
if($(lastThumb)[method]().length == 0)
$(imageSelector).get(resetIndex).click();
else
$(lastThumb)[method]().click();
}
$j(imageSelector)
.click(
function()
{
//on click, we store the reference to the thumbnail which was
//clicked.
lastThumb = this;
//We get the name of the video from the class attribute
//and play the video.
playVideo($(this).attr('class'));
}
);
}
$(document).ready(
function() { setupVideoPlayer('asc'); }
);
</script>
Above code has the advantage that you can modify your HTML and it will automatically play those videos.
You can wrap the images with an anchor tag and use the onClick method as follows:
<img src="thumbxxx00.jpg" />
<img src="thumbxxx01.jpg" />
...
Related
I have a script that plays a video in a Modal when a thumbnail gets clicked. This only works with the first video mentioned in the html, so I'm trying to use js to grab the particular video whos thumbnail is clicked on.
I have set up a variable in the js called vidcode, and gave it a value of the first video's address (rLdpnu2dDUY) or whatever it's called. I then set up a value 'start' for the link part before, and 'end' for the link part after. Now I have "showVideo = start + vidcode + end" and then innerHTML = showVideo, which works no problems.
So far the injection part works. My problem now is passing the address of the clicked thumbnail into the vidcode variable to play the corresponding video. I have looked on SO, w3, and Google. I have 6 different tries and none work fully.
I can create a link which
- Sets the variable, but then does not call the script.
- Calls the script but does not pass on the variable.
- Click one thumb to set the variable then another thumb to call the script. That one will then work but it's an extra step. At least with this one I know that the variable is being set..
<!--== Standard button but requires var vidcode to be preset in the Modal script ==-->
<img src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg">
<!--== Add onClick to trigger a mini-script which sets the var vidcode early ==-->
<script>function hDSansxhArU(){var vidcode = 'hDSansxhArU';}</script>
<!--== Adding the javascript directly to the link code, yet it does not trigger the Modal script ===-->
<!--== Adding the javascript directly to the link code, to trigger a mini-script, to then call the modal ===-->
<script>function buttt(){var vidcode = 'duBjWlIzpzQ'; modalviewer();}</script>
<!--== Use the video's code as an id, then calling that id immediately and setting it to var vidcode ==-->
<script>
document.getElementById('hDSansxhArU').onclick = function() {
var vidcode = 'hDSansxhArU';
modalviewer()
};
</script>
Spots are commented out when trying something else
function modalviewer(){ //This function usually isn't here
var start = '<iframe width="840" height="472" src="https://www.youtube.com/embed/';
var end = '" frameborder="0" encrypted-media></iframe>';
//var showVideo = start + vidcode + end;
// This part works fine when vidcode gets a value
document.getElementById("button").addEventListener("click", function() {
document.querySelector(".theVideo").innerHTML = showVideo;
document.querySelector(".bg-modal").style.display = "flex";
});
document.querySelector(".bg-modal").addEventListener("click", function() { //.bg-modal to make the surrounding clickable
document.querySelector(".bg-modal").style.display = "none";
document.querySelector(".theVideo").innerHTML = "";
});
};
Expected results:
Click a link and have either
- set that address to variable 'vidcode', or
- set the address gobbledegook to 'vidcode' from here
and either have the modal script in a separate js file or at the bottom of the page.
As a code-newbie, I'm proud to have figured it out so far (with previous help from SO), it just frustrates me that I can only get half of this to work at a time :/.
#CTOverton provided what was needed, although everyone else and in Stop/Pause video when Modal is closed (not using $ sign) contributed with everything that they got me to look up as well. #Phoenix1355 actually started me on the right path despite me not posting any code at all, in turn leading me to learn so much in very little about Javascript and HTML.
This has been plaguing me for at least a week (I've lost track of time making this website), researching, getting other setups, trying overly-complicated setups, being told it can only be done by paying for a hosting plan or having to use Wordpress.. And this Console.log output, sooo helpful omg. Thank you everyone who contributed!
Here is the finished code:
<html>
<head>
<link href="http://www.jolanxbl.ca/snips/modal.css" rel="stylesheet" />
</head>
<body>
<center>
<br><br><br><br><br>
<!--List of videos-->
<img data-vidcode="rLdpnu2dDUY" src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg" width="200px">
<img data-vidcode="hDSansxhArU" src="https://img.youtube.com/vi/hDSansxhArU/hqdefault.jpg" width="200px">
<img data-vidcode="duBjWlIzpzQ" src="https://img.youtube.com/vi/duBjWlIzpzQ/hqdefault.jpg" width="200px">
</center>
<!-- Modal Section 1 -->
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<div class="theVideo">
<iframe width="840" height="472" src="https://www.youtube.com/embed/rLdpnu2dDUY" frameborder="0" encrypted-media; picture-in-picture allowfullscreen></iframe>
</div>
</div>
</div>
<script>
let vidcode = 'rLdpnu2dDUY';
// Get all elements with classname 'thumbnail'
let thumbnails = document.getElementsByClassName('thumbnail');
// Loop for every element with class
Array.from(thumbnails).forEach(function(element) {
element.addEventListener('click', thumbnailClicked);
});
function thumbnailClicked(event) {
// Event is mouse click event
// target is the img (as that is what you click on)
// dataset is the data attributes of img
vidcode = event.target.dataset.vidcode;
console.log('vidcode: ', vidcode)
//document.querySelector(".gridContainer").addEventListener("click", function() {
document.querySelector(".theVideo").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/' + vidcode + '" frameborder="0" encrypted-media></iframe>';
document.querySelector(".bg-modal").style.display = "flex";
}
document.querySelector(".bg-modal").addEventListener("click", function() { //.bg-modal to make the surrounding clickable
document.querySelector(".bg-modal").style.display = "none";
document.querySelector(".theVideo").innerHTML = "";
});
</script>
</body>
</html>
Based on your description I think you are looking for something along the lines of the "data attribute". Data attributes are custom attributes you can assign to any DOM element that contain essentially whatever you want.
In you case if you have a page with lots of thumbnails and you want a specific action to happen when you click on a specific thumbnail, your best bet is if you store that unique identifier (the video id, or are you put it vidcode) on the element you are clicking on.
This can be done like this:
<body>
<!--List of videos-->
<img data-vidcode="rLdpnu2dDUY" src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg">
<img data-vidcode="example2" src="img2.jpg">
<img data-vidcode="example3" src="img3.jpg">
<script>
let vidcode = 'rLdpnu2dDUY';
// Get all elements with classname 'thumbnail'
let thumbnails = document.getElementsByClassName('thumbnail');
// Loop for every element with class
Array.from(thumbnails).forEach(function(element) {
element.addEventListener('click', thumbnailClicked);
});
function thumbnailClicked(event) {
// Event is mouse click event
// target is the img (as that is what you click on)
// dataset is the data attributes of img
vidcode = event.target.dataset.vidcode;
console.log('vidcode: ', vidcode)
}
</script>
</body>
Try passing the vidcode as an parameter for modalviewer function and then use the value.
function modalviewer(vidcode){
var start = '<iframe width="840" height="472" src="https://www.youtube.com/embed/';
var end = '" frameborder="0" encrypted-media></iframe>';
var showVideo = start + vidcode + end;
document.querySelector(".theVideo").innerHTML = showVideo;
};
<div class="theVideo"></div>
Click
<script>
document.getElementById('hDSansxhArU').onclick = function() {
var vidcode = 'hDSansxhArU';
modalviewer(vidcode)
};
</script>
I'm learning Javascript for my Intro to Programming Concepts class and I decided to make a simple photography portfolio site for my final project. I'm making the gallery now and I'm not sure how swap images.
This is what it looks like (cut off but you get the idea):
screenshot
This is the HTML:
<div id="gallery">
<div>
<img src="images/nature/1.jpg">
<br>
<div class="gallery">
<img src="images/nature/2.jpg">
<img src="images/nature/3.jpg">
<img src="images/nature/4.jpg">
<img src="images/nature/5.jpg">
<img src="images/wedding/1.jpg">
<img src="images/wedding/2.jpg">
<img src="images/wedding/3.jpg">
<img src="images/wedding/5.jpg">
<img src="images/wedding/4.jpg">
</div>
</div>
</div>
How do I make it so when you click an img from .gallery it swaps places with the first img (images/nature/1.jpg)?
The following should take whatever image is currently in the first image and swap it out with the one that is clicked:
var firstImage = document.getElementsByTagName('img')[0],
gallery = document.getElementsByClassName('gallery')[0];
gallery.addEventListener('click', function(e) {
var target = e.target;
if (target.tagName == "IMG") {
var newImage = target.src;
target.src = firstImage.src;
firstImage.src = newImage;
}
});
You can test it out here: https://jsfiddle.net/hxhe90qL/6/
After enough clicking around, however, the images will probably be all out of order. You could change it to only swap the first image by replacing the code inside the if statement to:
firstImage.src = target.src;
I think you mean when you click on swipe div, no matter what pic is showing in .gallery will be replaced by 1.jpg.
If that is the case, you can bind onclick event on .gallery, by getting event object, you can get access to the source dom element that triggers the event.
Then you can use javascript to change src attribute.
var gallery = document.querySelector('.gallery');
gallery.addEventListener('click', function(e) {
var targetImg = e.target;
targetImg.src = 'images/nature/1.jpg';
});
I'm trying to cobble together a function for a user to select an image for their avatar, preview it on the page using javascript, select the crop using the jquery guillotine, then upload it to the server w/ the coordinates where it can be processed.
So far I can select an image to upload and it will appear in the preview, but guillotine needs the image to be already loaded when it is invoked. Is there a way that I can force guillotine to re-load when I select an image?
This is my code:
<head>
<script src="{% static "assets/js/user_profile.js" %}"></script>
<script type="text/javascript">
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("id_avatar").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("avatar_preview").src = oFREvent.target.result;
};
};
</script>
</head>
<body>
<input type='file' id='id_avatar' name='avatar' onchange="PreviewImage();" /><br />
<div id="parent" style="width: 300px; height: 300px; overflow: hidden;">
<img id="avatar_preview" src="#" alt="your image" style="width:400px;" />
</div>
</body>
And this is what's in my user_profile.js, which is what I'd like to reinstantiate when I change the avatar input:
jQuery(function() {
var picture = $('#avatar_preview')
var camelize = function() {
var regex = /[\W_]+(.)/g
var replacer = function (match, submatch) { return submatch.toUpperCase() }
return function (str) { return str.replace(regex, replacer) }
}()
var showData = function (data) {
data.scale = parseFloat(data.scale.toFixed(4))
for(var k in data) { $('#'+k).html(data[k]) }
}
picture.on('load', function() {
picture.guillotine({ eventOnChange: 'guillotinechange' })
picture.guillotine('fit')
for (var i=0; i<5; i++) { picture.guillotine('zoomIn') }
// Show controls and data
$('.loading').remove()
$('.notice, #controls, #data').removeClass('hidden')
showData( picture.guillotine('getData') )
// Bind actions
$('#controls a').click(function(e) {
e.preventDefault()
action = camelize(this.id)
picture.guillotine(action)
})
// Update data on change
picture.on('guillotinechange', function(e, data, action) { showData(data) })
})
// Display random picture
picture.attr('src', 'img/unsplash.com_' + Math.ceil(Math.random() * 25) + '.jpg')
})
Is there a way to wrap that into something that can be reloaded without reloading the page and losing the preview?
With a few modifications you can achieve what you want. First off, Guillotine's code demo is much easier to follow than the code from the display demo.
Whenever you set a preview (change the src attribute) the image will be loaded and an onload event will be triggered (eventually). You only care about when new previews finish loading, you don't need to worry about changes on the file input.
So, focus on reloading the plugin each time the image finishes loading, like this. Basically it boils down to:
picture.on('load', function() {
// Reload the plugin (remove existing instance if any and create a new one)
if (picture.guillotine('instance')) picture.guillotine('remove')
picture.guillotine({ eventOnChange: 'guillotinechange' })
// Bind buttons, only once! (to avoid overlaps)
if (! picture.data('bindedBtns')) {
picture.data('bindedBtns', true)
$('#rotate_left').click(function(){ picture.guillotine('rotateLeft') })
$('#rotate_right').click(function(){ picture.guillotine('rotateRight') })
// ...
}
}
You might also find Presto quite useful. It's sole purpose is to display image previews from file inputs. It gracefully falls back looking for the best available way to display the previews.
If you also pair it up with Bifrost the last attempt will be to upload the image asynchronously and get the preview from the server (no need for HTML5, XMLHttpRequest or Flash) so you can be sure you'll get a preview on any browser.
Unfortunately I haven't had the time to complete Presto's readme but the source is very clean and at the top you'll find documentation for it's API and features.
Hope it helps.
I'm trying to do a small trick to allow auto playing/stopping of a youtube player embedded inside a bootstrap modal without using YouTube's API (since I i'll be needing more video provides in the future so I want to have a generic solution).
The trick works like that:
A Modal with a YouTube video (iframe) is shown and played [the video has autoplay=1 source]
Once the modal is hidden (hide event) the iframe's src is captured within data-iframe-src attribute on that iframe and the original src of the iframe is set to '', this way the video stops playing.
Once I load back the video (show event) I'm trying to re-assign the src of the iframe from the data-iframe-src attribute but the only thing it sets is ?autoplay=1 I thought it might be because of the URL structure (//youtube...)
I tried to use encodeURIComponent and decodeURIComponent but still no luck.
Here's my code:
$('#modal-video').on('hide show',function(e){
var $iframe = $(this).find('.video-wrap:visible').find('iframe'),
iframe_src = '';
if ( e.type == 'hide' ) {
// Snapshot
$iframe.attr('data-iframe-src', encodeURIComponent( $iframe.attr('src') ) );
// Clear iframe
$iframe.attr('src','');
}
else {
// Show and re-assign the iframe src
$iframe.attr('src', decodeURIComponent( $iframe.attr('data-iframe-src') ) );
}
});
Any ideas?
Why don't you use the callbacks from bootstrap itself?
$(function() {
$('#myModal').on('shown.bs.modal', function (e) {
var src = $('#videowrapper').attr('data-iframe-src');
$('#videowrapper').attr('src', src);
});
$('#myModal').on('hidden.bs.modal', function (e) {
$('#videowrapper').attr('src', '');
});
});
This works as you want it to.
edit:
the data attribute is loaded from jQuery into the src attribute
<iframe id="videowrapper" width="560" height="315" src="" data-iframe-src="https://www.youtube.com/embed/SJTyY2csya8?autoplay=true" frameborder="0" allowfullscreen></iframe>
edit2:
Working example: http://jsfiddle.net/trk9vkat/
Well I have multiple videos in the modal, something like this:
<div id="modal">
<div class="video-wrap video-1">
iframe...
</div>
<div class="video-wrap video-2">
iframe...
</div>
<div class="video-wrap video-3">
iframe...
</div>
I think the issue was with the event names, it should be hide and shown, this way I can use the :visible selector.
And I did not have data-iframe-src set prior to closing the modal, now i've set it in the link the triggers the modal.
So this did the trick:
// Video Trigger
$('.play-video').on('click',function(e){
e.preventDefault();
var id = $(this).data('video-id'),
$video = $('.' + id),
$iframe = $video.find('iframe');
src = $iframe.attr('src');
// Hide all
$('.video-wrap').hide();
// Show selected video
$video.show();
// Show modal
center_modal('modal-video');
// Autoplay video
src = video_autoplay( src );
if ( typeof( $iframe.attr('data-iframe-src') ) == 'undefined' ) {
$iframe.attr('data-iframe-src', src);
}
});
// Show / Hide
$('#modal-video').on('hide shown',function(e){
var $iframe = $(this).find('.video-wrap:visible').find('iframe');
if ( e.type == 'hide' ) {
$iframe.attr('src','');
}
else {
if ( $iframe.attr('src') == '' ) {
$iframe.attr('src',$iframe.attr('data-iframe-src'));
}
}
});
Thanks for your time & help! ;-)
I have a video array, and then a list of thumbs that correspond to the array. When you click on one of the buttons, it needs to be deactivated for the duration of the video. I have it so that after the first click, it deactivates the whole list
$('li', '.thumbs').on('touchend click', function() {
$("#myVid").on("loadeddata", function() {
$("#bigPic").addClass("move");
$("#MyT").fadeOut(750);
});
playVideo2( $(this).index() );
$('li', '.thumbs').unbind();
});
if each item in the list is set up like this:
<li rel='1' id="first">
<div style="top:0px;">
<img src="graphics/filler.png" alt="" width="280" height="128" />
</div>
</li>
with the id being different for each, can I just put the id instead of the .thumbs, and just have it unbind or turn off itself? I know this must be inefficient, but I'm not sure how else to do it. Do I use this() somehow? If so, how?
You could make use of a global variable to check which video is playing.
//init
var currentlyPlaying = undefined;
Within your event handling part you set this variable to the ID of the clicked button.
currentlyPlaying = $(this).attr('id');
With that setup you can check the variable before doing anything in your script.
if ( !(currentlyPlaying == $(this).attr('id')) ) {
// your script
}
Alternatively, you can use the ID to unbind as you suggested, of course.
$('li', '.thumbs #' + $(this).attr('id')).unbind();