Using this we can take any action based upon the screen orientation of. If the video's already playing, do nothing if (!myVideo. Getting device orientation in realtime is very useful concept to learn in JavaScript. There’s nothing built-in to JavaScript to help us know whether an event was triggered by a user, but we can add logic to keep track of that ourselves: const myVideo = document.querySelector( '#my-video') I finally found a Stack Overflow post by Ankit Chaudhary that pointed me in the right direction. How could I differentiate a user playing the video from my code calling the video play function? Could we use a click event instead This raised an obvious question. Unfortunately, I couldn’t find any similar properties to use for the play event. If those are both 0 you could be pretty sure that it wasn’t a user-triggered click event. But I only wanted to run my callback when the user manually played the video, not when my code triggered the play function. For example, pointer events have screenX and screenY properties that tell you where the click occurred. When the play function was called, it triggered my event listener. This also seemed to be working great! I got my sun hat to head outside… but then I realized there was an issue. offsetY Technical Details Browser Support event.offsetY is a DOM Level 1 (1998) feature. Coordinate Properties See Also: The Mouse Event Object Syntax event. MyVideo.addEventListener( 'play', () => Code language: JavaScript ( javascript ) Definition and Usage The offsetY property returns the relative vertical coordinate of the mouse pointer when a mouse event occurs. I was enhancing a video element to run a special action whenever a user played the video: const myVideo = document.querySelector( '#my-video') It returns a number which represents the horizontal distance of a window relative to the screen in pixels. On a recent project, I finally found a solution to an issue I’ve run into several times: When listening for events in JavaScript, how can I tell whether an event was triggered directly by a user or by my code? The Window screenX property is used for returning the ‘x’ or the horizontal coordinates of a window relative to the screen.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |