I see this little player every now and then, but I have no idea where it comes from or how to make one. See here about halfway down the page for one example.
It looks like this screenshot
I know this is not exactly a programming question, but where else should I ask?
It is the WordPress Audio Player. See http://wpaudioplayer.com/.
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!
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.
This may well be a long-shot (I suspect some of the feature requests in the project I'm working on might be 'bordering on' pedantic) but is there a simple way - that doesn't involve designing a javascript video player - to lower the amount of time the html5 video player progress bar takes to disappear, once the mouse stops moving?
Yes, you read me right.
I guess what I'm hoping for is, say, an html attribute in the video tag that can be set to a certain amount of milliseconds, or something... I haven't been able to find anything, so I'm guessing the answer is 'no'.
Actually I'm hoping the answer is a straight 'no', but unfortunately I have to ask.
Any help, either way, much appreciated.
Thanks.
Im pretty new to html5, im learning at school.
I have a credits button (image) and what i want is when i click on the credits picture. a video should overlay everything thats on the Website.
I thought about redirect to another page with that Video on it. But i want it to happen flawless. Maybe with something like Video.
Someone has an idea?
I think this is going to be pretty hard to make in HTML only.
What you are trying to make is called 'Lightbox', if you have a little bit of Javascript knowledge you can try using this jQuery plugin. it's pretty simple to use and it has support for Video.