I am trying to embed a number of different Vimeo players, which feature video content at different resolutions. I want the dimensions of each player be identical to that of it's respective video, so no letter boxing / black border appears around the edges. I'd have thought this would happen automatically, but every player I've embedded defaults to the same size, regardless of the dimensions of the video.
Does anybody know a way to either solve this simply, or pull the dimensions of the video itself so I could set the player's height dynamically?
I'm using the Iframe embed method.
Cheers
When working with different resolutions and browser sizes, best solution currently using JavaScript. Here's a jQuery plugin called FitVids that I would recommend.
How you would use it:
$(document).ready(function(){
// use div container that contains all your videos
$(document.body).fitVids();
});
Related
I've been trying to remove a border that is around an embedded Vimeo video on my site. I've tried removing the border with CSS and JS to no avail.
I'm wondering if there is a way to remove the border using Javascript.
The video can be seen here at the top of the page: http://feliciasantos.com/handforgedworks/
Felicia, I think the video content itself is uploaded to Vimeo with top and bottom black borders which makes it almost impossible to remove them with JS or CSS.
See the standalone player here: https://player.vimeo.com/video/292992048
(It can be done since it's a background video and the controls are not needed but it's not so easy, you'll have to find out the correct aspect ratio of only the video content without the black borders. So take the height of the video content and divide it by the width. That's the ratio. Next you'll have to wrap the iframe in a div which confirms to that ratio with a overflow: hidden where the iframe is positioned absolutely in the center of the div, e.g. http://jsfiddle.net/luwes/grybtsfm/)
However the best way to make it work is to crop the original video to remove the black borders and re-upload that to Vimeo.
Hope this helps.
I'm creating a video player with HTML5 and Javascript and I'm wondering if anyone has solved the challenge of creating dynamic thumbnails.
Mimicking youtube video player where you hover over progress bar and a popup shows with a thumbnail. I know that youtube saves out an image and repositions the sprite in the thumbnail viewer frame based on position hovered over.
Is this viable to do with JS and canvas?
What I'm doing now is... hovering over my progress bar creates a copy of the video element. I then set the currentTime on the copied element. I then grab a snapshot using canvas. I'm not sure why, but the images seem to be blank.
Maybe someone has run into this problem?
YouTube have pre rendered thumbs that are stored in a single image in a grid with ten columns and how ever many rows are needed. The thum images I have seen are low quality jpg 800 pixels across giving thumbs 80 pixels by ?? (depending on aspect) When the user hovers the thumb closest to the that time is displayed.
Creating the thumbs at the client side will be problematic because video are not entirely random access. Seeking to a random location involves the video moving to the nearest previous keyframe and then decoding all frames till it gets to the frame you have requested. Depending on the format, encoding options, the spacing of key frames (if any rolling eyes), and if the seek location has been loaded, seeking to some location can be very slow. Getting a set of thumbs for a video can take a long time. The additional problem with the HTML5 video API is that it has only one playback channel, so while you are seeking for thumbs you can not watch the video.
You problem with blanks may be due to not waiting for the seek event.
Try
video.addEventListener("seeked",function(e){
// snap shot code here
});
But this does not always work I have found. So it pays to listen to all the appropriate events, and only seek when the video is ready. Here is a list of media events that will help.
As videos don't change your best bet is to create the thumbs on your server after the video has been uploaded. Low quality jpgs seem to be the go and will be loaded by the client much sooner than even a fraction of the video has been.
However, this can be achieved by using a combination of HTML5 canvas. You will have to do the following.
add an timeupdate event listener to the HTML5 video
at each 1 sec, grab the current time and create an element (span is this case) and bind the value of the current time in a special attribute of the newly created span
Append each created span element to your HTML5 progress element (I suppose you're using 'div' and not 'progress' element.
Add an mouseenter event listener to the created span.
Whenever the user hovers the progress bar, the mouse would eventually touches one of the span. Then, dynamically create a video element and set the src attribute with the main HTML5 video source. Then, set the currentTime to the value of the hovered span and snapshot it to an already canvas element.
There, you show the user the current frameRate.
Scripting is all about manipulations and gradually processes of putting pieces of codes to work.
I'm want to load images of products in a website with an animation of an hexagon grid
Hex_loading DEMO
I would like to know what is the best way.
I've read about inserting a gif, but I think image quality wouldn't be good; or video, but I don't know if it's to much for what I want (also I would have to load directly images for mobile devices).
Is there any other tecnology I'm missing out that would be a better fit for what I want?
Thank you in advanced
I don't think there is a way to change the loading pattern. But you can wait for the image to be loaded and then play an animation.
I suggest using a html5 <canvas> element to animate the images.
So I am pretty new to this but I am wondering for a web page that has a big image in the middle like github:windows page, how would do you work with the image inside that div/area depending on the screen size? is there a way to get images to resize or be cut off depending on either window size or screen size? is it typical practice to use media queries to change the picture based on the device? How is this done in css (can I reselect src in css for the img tag)? do you have to use a window resize js event to continually re-check like masonry?
I know these are quite a few questions (sorry) but I am really just looking for advice on best practice approach as again I am new to this....
always appreciated!
Adaptive Images may be what you are looking for. It offers dynamic resizing and caching of images based on screen size. It's very easy to implement and has very few dependencies.
I need to make a interactive image gallery (or image slider) where some hotspots need be placed on. It has to be possible to click on those hotspots, to update a sidebar with the corresponding info. Some basic animation must also be possible on a slide or scene of the gallery.
Which setup would be the best solution.
I'm currently thinking about the canvas element, but the lack of specific events for drawn hotspots makes me doubt. EaselJS could be a solution though.
An alternative could be just using a regular javascript image gallery and place some fixed positioned hotspots on it.
This is actually a basic mvc-setup, I have the image gallery, hotspots and the sidebar.
Should I use a javascript mvc library like http://javascriptmvc.com/ or backbone.js
So my question actually is, what would be the best setup, with performance and some basic animation in mind?
Thanks.
other interesting links I found:
http://processingjs.org
http://raphaeljs.com
...
If you are displaying large images or expect users to have older browsers or browsers without current GPU acceleration then you should always use standard HTML4 elements to get this done. Using canvas is overkill and will cause you pain later on if you are not overly-experienced with it.
With DOM-based images you already have click events and can even use image maps to do the click-regions. With canvas you need to code your own click detection and map mouse position to a region to check for clicks.
All in all the simplest solution is usually the best one and for performance and ease of dev, canvas is not the way forward in my opinion.