I am writing a webapp where I need to display a video and some (non standard) controls for it, which should appear in overlay. So create some divs and position them over the video, with a higher z-index.
Still, on iPhone and iPad, it appears those controls are not clickable. I register actions for the click event, but that is not fired at all when I tap on the controls. I understand I can have no control while the video is actually playing (it even goes fullscreen), but the problem is that the controls are unusable even when the video is stopped.
I have also tried to remove the controls attribute from the video, with no effect.
Is there a way to register click events for elements that are positioned over a video on iPhone/iPad?
I had the same problem and got it working by setting the CSS property of the HTML5 video element while
paused to -webkit-transform:scale(0.01);
playing to -webkit-transform:scale(1);
The problem is that the HTML5 video element on iOS seems to hijack the click events in the areas (of the elements layered on top) that are contained in the bounding box of the video element. If the bounding box is made smaller with scale(0.01) or the bounding box is pushed off the screen with translateX(-2560px), no element areas are directly above the video element and the click events will get fired.
One thing to try is to make the element with controls obstruct the whole video, not just a section of it - this will help you debug it in any case. Another approach is to use touch events instead of click events. These execute faster and are usually not over-ridden.
Sample code would be helpful.
Related
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.
Currently a canvas element (which is built by a third party) on my webpage is intercepting drag events (because it assumes you want to drag something within the canvas), but this can "trap" the user within the canvas, especially if they zoomed in on it on mobile. I want the user to be able to scroll/swipe up and down on the canvas to reach the rest of the page above and below it, just like it were any other HTML element. They should be able to click into the canvas still, I just don't want the canvas to intercept regular page scrolling.
EDIT: I was able to find wheel and mousewheel events in the third-party code and remove them from the canvas object, resolving the issue for desktop users. Which event would be relevant for mobile users? I tried removing touchmove without success.
your issue seems to be that you're not correctly differentiating between scrolling and dragging.
I suggest you only prevent the default scrolling when the dragging actually takes place
I am building an audio player in a SPA and have a main player widget that shows the currently playing track along with controls at the bottom of the page. The desired UI is to hide all controls but the play/pause button until the user hovers near the play/pause button. At this point the extra information, seek bar, volume controls etc. will be animated onto the screen.
Excuse my shoddy drawing
I should add that the controls are positioned fixed to the bottom of the screen.
Initially, I tried adding an extra fixed positioned div on top of everything (high z-index) and using that to trigger the hover event. Obviously, this doesn't allow for clicking the buttons below it so I tried pointer-events: none on the element but then no hover event is registered.
I then tried putting the hover region underneath the control elements and adding the hover trigger to both the hover region and the controls. This causes strange behavior when moving the cursor between the hover region and any controls (i.e. to click pause/play).
My next thought is to scrap the hover region HTML element and use a pure JS solution. I could register a mousemove event to the document body and detect when the cursor is within the hover region, triggering control animations. However, I am worried this might cause performance issues as seems a bit heavy.
I hope someone has some input/improvements on the things I have tried or comes up with something I haven't thought of!
BTW: I am using angular2 for the animation if that sparks some bright ideas to use that.
Update 1
Here's a jsFiddle showing the first two attempts. Change the z-index of hover-region to see the effect of it being on top of the play button or below.
I've created a working version for you at http://jsfiddle.net/6wk69fvo/1/. You already did what I was going to suggest, which is to use onmouseenter and onmouseleave.
But rather than just checking the hover area, you also need to check the toolbar area, and then just OR the two values together.
Also note that I put the play / pause button as a child of the hover area. If you don't want to do that, you'd need to create a third check for mouseenter or mouseleave for that div.
You can alter the control's opacity make it visible/invisible. Here is a simple example done in pure html/js to avoid the overhead of setting up an ng2 app, yet, I'm sure you can quickly adapt it to your code.
I am digging into the finer points of Andre Ruffert's rangeslider.js and I am having difficulty into incorporating his code into controlling and reacting to a simple HTML5 audio element.
I see that you can programmatically change the value of the slider with the click of a button, but how would I link the audio to update automatically with the audio as it plays, and modify the audio by clicking and dragging the thumb of the slider?
I've made a working demo here: http://jsfiddle.net/alan0xd7/79ff562k/
This uses the timeupdate event to update the range slider.
However there are some quirks when you try to change the time while it is playing - sometimes it snaps back to where it was. I believe this is some sort of race condition, because as you are sliding the track, the timeupdate event would fire and change it back to the current time. To make it work properly, you probably need to introduce some additional logic like pausing the audio while the slider is being dragged.
Hope this helps!
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