By default, clicking anywhere on the video pauses it. Of course, you do not want this behavior for interactive components or links. To prevent this, add
If you would like to disable pause-on-click globally, you can write:
We provide the
dragHelperReact utility to help with making components draggable by abstracting over the difference between mouse and touch events. Here is code for a draggable pig:
This is accompanied by the CSS code
In order for a component to receive keyboard input, you need to disable the keyboard controls. There is also a strange bug in iOS Safari where input components need to be manually focused.
Mobile devices do not support the fullscreen API. As a workaround, when the fullscreen control is tapped on a mobile device, ractive-player will dispatch an event to the window containing the
iframe. You can then maximize the iframe using CSS.
Here is example code for this:
Controls need a larger clickable area on mobile. You can use the following to increase the clickable area of an HTML component:
We learned this trick from https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/.
For SVG components, such as a
<circle/>, you can use a duplicate element which is a bit larger and has
Click events do not work reliably on mobile devices; one should use touch events instead. We provide an onClick helper for this.
touchmove events to prevent scrolling of the window. This can cause problems with scrolling in elements with
overflow: auto and variants. To ensure an element can be scrolled, write
Here is a button to seek to a specific marker. For example, you could use this to make a table of contents.
Here is a component to automatically pause the video at a certain time/marker, e.g. for the viewer to make a choice.