On YouTube's player, when you hover on progress-bar and traverse your mouse along, you see a series of thumbnails, as well as time-values. This is great, when you're tying to find a scene that you know of visually, and want its time-value.
Whereas, on videojs player, you see only time-values.
(On X-Finity (Comcast, their fast-forward similarly shows rapid series of thumbnails. But, googling seems to reveal that Videojs doesn't have fast-forward. And, I think I'd prefer YouTube's feature over a fast-forward.)
So, bottom-line question is: How to make Videojs player behave like YouTube's?
(I'm thinking this would be difficult to implement for the end-user, in javascript. Detecting that the slider is being moved is no doubt straight-forward, but code to display thumbnails would be the part that I have NO IDEA
how to accomplish.)
Anyone know how to program this?
BrightCove developed a 'thumbnails' plugin that implements this.
See their example coding here:
https://support.brightcove.com/display-thumbnail-previews-plugin#Example
There is more specific discussion on the subject in this forum here:
How to generate video preview thumbnails for use in VideoJS?
My first cut at implementing the notion is here:
https://weasel.firmfriends.us/Private3-BB/
Related
I have an HTML list of music tracks in a website. Some of them can be previewed with an audio sample.
I want to implement a triangle (play button) in front of each of those tracks, so that the visitor can click on each of those and hear a short audio sample. If the visitor clicks on another track before the previous is done, the latter should stop and the new one should play.
Is this simple plan implementable without much effort? I am good at HTML and CSS, but i can't write JavaScript. I've researched the audio-controls attribute, but it gives me a complete player with a bunch of controls that i don't want displayed.
Are there any tutorials you guys could point me to, if this is only possible with java-script?
Wow, no answer for weeks...
But i found a solution myself. Everything that i described works with a small jQuery player i found here: https://github.com/kuantal/Multiple-circular-player . I can have multiple instances and the script is "intelligent" enough to let only one single instance play at the same time.
Props to the author of the script - well done!
I've been searching for a way to put a looping animation with alpha over top of web content for a few weeks now. The fact that I can't seem to find anyone asking this question or any answers to it makes me think the solution is so mind-numbingly easy that no one needs to ask it.
For an example of this effect go to bonfirestudios.com
They have used this technique multiple times throughout the website, most notably their logo on the main page. They have an animation loop playing over top of their website content. It could just be a video played with a screen blending mode, but my knowledge of html and css is so limited I'm not sure what I should be looking for.
It seems so simple in concept: play a video (with alpha data) on loop, but I can't find anything (or don't know where/how to look specifically) that explains how to achieve this effect. Notably, there are no video controls or anything to otherwise indicate it is a video that's playing. I've checked their code, but my limited understanding of javascript and the like find it hard to know what I'm looking for.
Any help or direction is greatly appreciated, thank you.
It is a video playing (right-click over the animation and you'll see such option as "save video").
The container format is webM (which can contain VP8 or VP9 video codec). This format is from Google and supports transparency.
I'm a designer and animator, I newly start to coding with Adobe Animate CC, In all versions of adobe flash there is List item but i couldn't find a simple way to add image and text to it, if possible guide me how can i make a scrolling list like below sample image (scroll to receive content from server "like a news app") with simple way not complex coding. I prefer to use Adobe Animate not Adobe FlashBuilder/Flex.
Simple suggestions, Link to tutorial, ...
If you take a look here, you might find what you are looking for. However, if you are just starting to code in AS3, expect to go through some rough spots.
http://www.myflashlabs.com/product/flash-dynamic-as3-scroller/
This scroller is pretty good, as it works with touch devices, as well as mouse input (desktop). This still requires you to create a movieclip or sprite and attach whatever items to you want to them. Read the documentation and take your time. Best of luck
I am building web-apps using Ratchet, replicating the look of native APPs.
Ratchet is doing a great job at replicating the look of iOS, but there is a feature which I really miss from iOS which is the ability to "move" an element to the next page by moving and zooming it.
Example: I have a list of articles. Upon clicking the thumbnail of the article, the thumbnail image gets bigger as the articles open, in a seamless transition.
The following gif. from Facebook "paper" illustrates well the effect I want to achieve:
http://d24njcbunk2gp2.cloudfront.net/assets/2014/02/Facebook-Paper-008.gif
My questions would be:
- Is this type of transition possible using only web-technologies?
- Is it possible, in general, to have one element moving in a continuous way from one page to another without any flickering effect?
- Would such effect be possible only with single-page applications? (say a single-page website built with angularJS)
- Would any framework / tool (PhoneGap?) be useful in achieving this result
Thanks so much.
Thomas
I visited http://www.sublimetext.com today and was intrigued by the screencast animation the website has on its opening page. It looks like a mashup between video and slideshow. I've seen them at other modern websites as well, but I assumed it was some HTML5 video tag trickery. But when I looked at the source of sublimetext webpage, I was confused.
The animation on this page is created on a HTML5 2D canvas with plain javascript using base PNG images. Each slide is loaded from a PNG file. The animation is achieved by modifying only handful of pixels from the image. The animation javascript applied these changes on the original PNGs at regular intervals. You will find these deltas stored in *_timeline variables in the script.
My question is what tool can generate such deltas? How can one record one's desktop screen and create such base PNG + animation deltas?
I like this approach because it seems most efficient format for screencasts, where changes in consecutive frames are minimal.
Update 1 I know there are techniques to achieve this using GIF (Check https://askubuntu.com/q/107726), but what cool tool can generate this javascript code that can convert PNG deltas to animation. Googling hasn't helped me find it out.
Update 2 The author of the screencast (and sublimetext) replied to my question on sublimetext forum. He did it using a custom python script and plans to write a blog post about it sometime http://www.sublimetext.com/forum/viewtopic.php?p=34252#p34252
Jon Skinner, the creator of Sublime Text wrote about the process on his website
He also published the encoder he wrote on GitHub
look at one of their images and you'll understand how it works:
http://www.sublimetext.com/anim/command_palette_packed.png
they just cutting and inserting appropriate portions of image into the appropriate positions of canvas element, but if your question is how to make such image, I don't have an idea.
I guess with some software, not by hand, but I don't know such soft...