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!
Related
Full Disclosure, talk to me like I am stupid because, well, I kinda need to be guided.
I would like to create a series of web pages where the user would hear a sound when they would click on links whether it be photos or text links it doesn't really matter. The idea here is to generate an audio sound when a link is clicked. And I want that to be able to span across all clickable links in the HTML document. I am not sure how to do it and I'm not asking Google the right question because I'm learning how to do sounds for every other possible aspect of web development rather than this specific need. Might be because I haven't slept in 24 hours but I'm trying to create the Kobayashi Maru and it would be really cool if I could make the lcars computer sound effects.
So how can I make all the links play the same sound or ideally I'd like to be able to make sounds for active links and then a different sound for non active links but I would just settle for one sound effect right now. Could anybody please help me out?
I've tried various scripts but they are for specific objects
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/
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.
first post on here so be gentle!
I am currently designing an ad banner for my college assignment, the main feature i have is a car spinning, like a full 360 degree view.
Now I have took all of the media I needed and photoshopped them to how they need to look I just need some diction of where to go next.
I did want it where you can click and drag anywhere on the screen and it pulls the car around to where you want it, but I don't even know where to start with that! (please help if you can)
So I thought I would instead have it as a sort of image gallery with a next and previous button to select the next frame you want. But I don't like the way it looks so I was wondering if there was a way with action script where I could click on a button(next/previous) and the car would spin until I un-click? Rather than me having to keep clicking to load the next frame.
Also if I could I wanted a left to right scroll bar what could control the images, do you know any way of doing that?
Many Thanks in advance for ANY help!
Jordan.
If you want a commercial solution:
Krpano -> very advanced, excellent support, highly recommended for panoramas, 2D object is a bit lacking tho. Examples of 2D object
Object2VR -> very easy to use, not that great support, lacking API.
I would go personally for krpano because it is simply a superior tool. Great for panos, tons of possibilities. If you want it easy, go for Object2VR.
Now if you want to program it, and you need to program it, there are many options how you can do it. First of all, you need to load all the images into your app. Even if you don't maintain them in memory (that would be prefered, tho), you should load them so they are cached and can be reloaded fast. Your rotation can be achieved by "re-loading" the next image, or if you keep them in memory by simply referencing the next index of the array/vector. You always keep a reference index and upon click you simple increase the index and load the image. You than swap the images. It is too broad to explain, you will simply have to begin and ask for advice with some specific code.
I'm trying to figure out what would be the best way to record a blackboard type of application in the webbrowser. Where a tutor can record a video of the blackboard with audio.
I think the obvious answer here is to make a html5 canvas and capture it at intervals as images and combine these to a video. Like so
However this has several disadvantages. It is not easy to edit the video later on. Also videos would require a lot of storage space.
What are your ideas? How can I construct this recording and playback of a blackboard?
/Jake
I am currently working on a project that records HTML5 canvas drawings and allows you to play them back later. There are no images, everything is stored in the Javascript/JSON. There is no audio, so I plan on adding a transcript feature along with it. If you want to follow along with my project, it is at http://github.com/eipark. The code is still very much raw and buggy, but I am actively developing it for a school project and hope to have at least the "video" recording portion done in the next week.