Hide progressbar from <audio> HTML - javascript

I am working on a game in which I want background music playing. I was wondering if there was a way to hide the progress bar of the music and only display the play and stop button with the volume slider?
Right now I have resized the width so that the play button will only show, but when I change it to a bigger width to have the slider show, the progressbar comes back out. I want to get rid of the progress bar completely.

Unfortunately, there is no way to pick and choose which controls you want in HTML5. If you don't want to use the full set of default audio player controls, you'll have to make your own set of controls instead of using the browser default ones.
See this answer for more details on creating your own and accessing the DOM API for audio elements.

Related

controlling the time to load and play animated gifs

I have a slide with many animated gifs. Every slide contains an animated gif.
The effect I am trying to achieve is having the animated gifs play according to the timeline I created in photoshop and from the first frame to last when in view.
My issue is the animated gifs will start from the middle of the timeline instead of from the first frame when it is active and in view. I reckon it could be due to the loading time? I have tried increasing the time for the first frame and last frame of each slide but to no avail.
Is there a way to control the time to load and play the animated gifs when it is in view? is it something that needs to be done in javascript or jQuery?
From my point of view, CSS Sprites will give you better support that you wanted in your animation. Most important thing you need is to control over animation.
As you don't have any control over animated GIFs. You can't start them, you can't stop them, only thing they just do is to animate as soon as they load.
On the otherhand, with sprites, you can control the animation. Most importantly you can start, stop and react to browser events, pan through the animation.
As reference you can see Google Doodles which only activates when you only click on them.
For active reference, you can see the blog which might inspire you to use CSS Sprites.
https://itnext.io/creating-css-animations-using-sprite-sheet-47e2b7a3793c
Again, it's only opinion. Decisions is yours which one you will use for animation.

What is this technique called using html5 video? [duplicate]

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.

Buttons disappear on React slide-out

I'm trying to make custom controls for a video player. Part of the reason is because hovering over the video to bring up controls is not what I want. Instead, I want a "Show Controls" button that you can press to display them. Right now, I have that working and I'm using react-transition-group to make a Slide function with React.
However, the problem is that when the controls slide back out, they awkwardly go below the video frame before disappearing. I want it so that as the button dips below the video frame, it disappears gradually until they are all below the frame. I though that changing the z-index of the buttons on exit-active/enter-active might work but it didn't seem to have an effect. Does anyone know how to do this?

Video with timed image overlay

I was wondering if anyone could help me with HTML5 video with image overlays that are timed. I want the images to display and disappear at certain times, which will make the video pause and resume on the click of a button. I want to know the best approach to this in regards using HTML5, javascript etc.
I am using the video tag in HTML5 with Dreamweaver CS6 at the moment and I have full screen video working, with an image overlaid using the z-index, but I can't get it to display and disappear at a certain time.
Any ideas?
probably you have to add some event listener to your video:
timeupdate , loadstart, ect to manage the visibility of your image in overlay

HTML5 video background and transition

I am making a website for a friend of mine and he wants a really complicated one. Between the menupoints there are videos and the content is displayed on the last frame. So I thought I could use the videos (about 2 seconds long) as a background and fade the content in after two seconds. How should I go about this?
what I'd do is have the content as a hidden div. When you play the video attach an onended event to it and use that to hide the video element and reveal the content - that way they always stay in sync - for instance see something like this Add a div to replace Video after Video Plays Through

Categories

Resources