I want to isolate the 'play', 'pause', and 'stop' functions for my HTML5 player. I want to put those in random places on my homepage (i.e., stop at the top left, play at the bottom-right, and pause at the middle of the page). I also want to be able to isolate the tracker. So, for example, have the tracker on the bottom-left of the page.
Can anyone tell me what it would take to isolate out one of the controls? So, for example, "If the user clicks anywhere in div, "bottom-right", the audio will start to "play". The tracker, bottom-left, will start to track, and the stop and pause buttons will go to ready state....
I don't believe you can affect the controls of a browser's native audio player, at least to the extent you want to, through CSS or JavaScript. Therefore, you'll need to omit the controls attribute from your audio tag (which will give you a player with no controls) and write the controls, and the logic behind the controls, yourself.
This tutorial should give you enough to get started. However, you should note that, depending on the level of functionality you require, this may not be a trivial task.
You might also consider looking for a third-party library which supports the level of UI customisation you require. I haven't used it myself but have heard good things about audio.js.
[Edit]
This HTML5 audio test suite is quite handy as a summary of the API for the audio element and has links through to the appropriate entry in the W3 specification for each of the properties and events listed, though I would expect support to be inconsistent across the various browsers which support HTML5 audio.
I've created this fiddle which demonstrates an HTML5 audio player controlled by a very basic set of custom controls (only tested in latest version of Chrome).
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.
I'm currently experimenting with HTML5 Drag and Drop API. Now I've got several questions:
1.
Am I right, that it's not possible to connect draggable elements with drop-areas?
Example: You have 2 different kinds of elements you want to be able to drag and drop: Files and Text-Labels. Now if I give some div an DragOver-Handler and a Drop-Handler it will respond to both, files and text-labels. I'm looking for a simple possibility to only respond to a specific type of draggable items.
A connected problem is the dropEffect cursor-style: At the moment I enable all possible drop-targets in the DragStart-Handler and disable all of them in the DragEnd-Handler (with "disable" I mean, that I remove all DragOver- and Drop-Handlers). If I wouldn't do so, it'll look like if you could drop a file on an element that should only react to text-labels.
2.
The dropEffect cursor-style is a mess. In Firefox I don't get them at all, in Chrome it will give me a big "plus"-icon (even if I have removed the DragOver- and Drop-Handlers from an element)
3.
Last feature I am looking for is multi-select: Select multiple Text-Labels and then drag all of them at a time. Is this possible? My first idea was to create a new div and move all selected elements inside this div and then drag the newly created div. Seems pretty hackish and looks quite ugly ;-)
I hope you guys have some answers for me. Thanks!
I don't think that HTML5 drag and drop (and friends) are supposed to be replacements for commonly used "drag and drop" Javascript libraries (although it COULD be used instead of them in some cases). The name is misleading.
Modern operating systems include APIs that allow cross-application communication: clipboard and drag-and-drop. Both APIs are quite similar and need to be quite low-level because of specific challenges:
the data must be sent across processes, so it must be somehow serialized,
the sender must have a way way of offering the data in many formats (eg. text/plain and text/html) and the receiver the ability to pick one that it likes best,
the sender and receiver may live in different processes, so they can never find out about each other (they might even be entities coming from different platforms, GUI frameworks, programming languages etc.), the only channel of communication is the data itself,
Current HTML5 APIS, as opposed to - say - JQueryUI draggables - are not meant to give programmer strict control of the look and feel of the dragging process, but rather enable tight integration with the native, system-wide mechanisms. Which may or may not be what the programmer needs.
So to answer the questions:
you cannot "connect draggable elements with drop-areas", because your draggable elements can even come from outside the browser. But you can make an area that rejects certain types of data (which is what user expects from native drag and drop).
"div" and "multiselect" are not things that operating system understands (we don't have native multi-cliboards or multiple-text-selections). You CAN implement such functionality if you make a with inner divs that can be toggled (eg. by clicking while holding shift). When someone tries to drag the outer dive, make a transfer object that says which inner divs were selected (you could even create an image that shows them).
If the above solutions sound a bit low-level, well - that's because they are. When you develop a desktop game or tool, you do not rely on native drag and drop for moving pieces across the chessboard or moving sliders in the GUI. I think it will be the same with JavaScript. JQueryUI Draggables are not going anywhere.
I was wondering if there is a full-proof way of knowing when the user is dragging the timeline of an HTML5 video. Thus far I've been binding to timeUpdate, but it's unclear whether the currentTime is increasing due to a drag or simply the video playing. Thanks!
I know that MediaElement.js which is a html5 video element implementation supports an event called 'seeked' which gives you what you want.
You could use that or look into the code to see what kind of logic they're using for detecting seeking.
Another way is that you can implement your own custom seek bar and if that's the case, you can just handle when the user drags the timeline scrubber to throw up a seeked event. The W3C has a document on how to implement the seeking.