How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

The video player I have created using videoJS includes custom buttons in the control bar. These buttons are not clickable when viewed on mobile or tablet devices without forcing them to work.

let myButton = player?.controlBar.addChild('button');
myButton.controlText('Paramétres (o)');
player?.controlBar
    .el()
    .insertBefore(myButton.el(), player?.controlBar.getChild('fullscreenToggle').el());
let buttonDom = myButton.el();
buttonDom.innerHTML = SVG.SETTING_SVG;
buttonDom.onclick = function () {
    dispatch();
};
javascripthtmlcssnext.jsvideo.js

Answer №1

To incorporate the functionality, utilize the clickHandler feature. This will activate upon both mouse clicks and touches.

let customButton = player?.controlBar.addChild('button', {
  clickHandler: function () {
    processAction();
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Django: Sending Templates through AJAX for Dynamic Rendering

Hey there, this is more of a theoretical question. So I recently discovered a cool trick: using AJAX to trigger a function that delivers a pre-rendered HTML template as a response, which can then be applied to a designated div element. This method feels i ...

pythonhtmldjangoajaxdjango-templates

Adding custom fonts to DOMPDF: a step-by-step guide

First, I moved the dompdf library folder to /dompdf Next, I added a /fonts folder containing Roboto-Black.ttf Then, I created an index.php file <?php // Autoloader inclusion require_once 'dompdf/autoload.inc.php'; // Namespace reference ...

phpcssdompdf

JavaScript code to find a date within a specified range

I have developed a script that calculates the number of weeks between two specified dates. It then generates a table where the number of rows equals the number of weeks. The script can be viewed on JSFIDDLE Script: $('#test').click(function ...

javascriptjquerydate

Having trouble getting routing to function properly with react-router-dom

I'm currently assisting a friend with completing a React Project. I'm facing an issue while trying to set up routing using react-router-dom. The components inside the <switch> tag are not functioning properly. Below are snippets of my code: ...

javascriptreactjsreact-router-dom

Updating children of specified parents using jQuery

I have a collection of files in a directory and some file icons need to be changed as the default ones are not specific enough. Due to limitations, I can only achieve this using jQuery to insert the code since the mimetype function cannot be modified. Bel ...

jqueryhtmlif-statementparent

Exploring the creation of Request Headers

In my NextJS application, I have noticed that JavaScript resources are not being gzipped when accessed on mobile devices (while they work fine on desktop). After investigating further, I discovered that this is due to the lack of an Accept-Encoding header ...

reactjswebpackhttp-headersnext.jsgzip

Top method for centering a flexible SVG vertically once the page width becomes too narrow

Currently, I have two SVG images displayed side by side on a webpage. One SVG needs to maintain a fixed size while the other should scale as needed, and I have achieved this functionality. However, I am facing an issue where I want the two SVGs to align v ...

javascriptjqueryhtmlcss

Refreshing a Next.js page results in a 404 error

I've set up a Next.js page called page.js that can be accessed through the URL http://localhost:3000/page. However, I have a need to access this page through a different URL, namely http://localhost:3000/my-page. To achieve this, I decided to utilize ...

javascriptnext.js

What is the process for incorporating an external script into my Vue methods?

After a user registers, I need to send them a confirmation email using vue.js. I am looking to implement the script provided by . How can I incorporate the "Email.send" method into my vue.js application? <script src="https://smtpjs.com/v3/smtp.js"> ...

javascriptvue.js

Steer clear of retrieving all the elements from the HTML DOM at once

Scenario I am working on a HTML5+CSS+JS slideshow project that needs to be synchronized across 50 clients in a local area network using a single wireless router. Challenge Due to the heavy content, particularly images, of the slides, I intend to dynamic ...

javascripthtmljquery

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

I'm new to working with the canvas element and I want to create some shapes on it. Can someone provide me with guidance on how to draw a Rhombus or Parallelogram on a canvas? Something similar to what is shown in this image: https://i.stack.imgur.c ...

javascripthtmlcanvas

Issue with Pure Javascript FormData upload involving files and data not successfully processing on PHP end

My file upload form follows the standard structure: <form id="attachform" enctype="multipart/form-data" action="/app/upload.php" method="POST" target="attachments"> <!-- MAX_FILE_SIZE must precede the file input field --> <i ...

javascriptphpajax

Mobile devices do not support internal link scrolling in Material UI

Currently, I'm utilizing internal links like /lessons/lesson-slug#heading-slug for smooth scrolling within a page. While everything functions perfectly on desktop, it ceases to work on mobile view due to an overlaid drawer nav component. Take a look a ...

javascriptreactjsmaterial-uinext.js

Tips for submitting a form remotely using Radix Alert Dialog and the form attribute

Currently, I have integrated a Radix UI's Alert Dialog in my Next.js 13 app to confirm the deletion of a contact from the user's contact list: Take a look at the Alert Dialog modal here However, there seems to be an issue with the delete button ...

cssreactjsnext.jsradix-ui

Tips on formatting dates in a Material UI text field

<TextField name="BalDueDate" format="MM/dd/yyyy" value={basicDetails.BalDueDate.slice(0,10)} onChange={event => { ...

javascriptreactjsdateformatmaterial-ui

What is the best way to fetch a partial JSON response object from an API using JavaScript?

Currently, I am utilizing the One Bus Away API, returning a response object in this format: { "code": 200, "currentTime": 1504150060044, "data": { "entry": { "arrivalsAndDepartures": [ {AnD_item1 ...

javascriptjsonangularjsonpobservable

Show a malfunction with the `show_message` function

How can I show the die() message in if($allowed) in the same location as the move_uploaded_file result? <?php $destination_path = $_SERVER['DOCUMENT_ROOT'].'/uploads/'; $allowed[] = 'image/gif'; $allowed[] = ' ...

phpjavascript

Combining a component library for RSC (React Server Components) with the Next.js App Router

I am currently developing a library of React components that will be utilized in various Next.js projects. The goal is to follow the RSC approach, where the majority of components are server-side rendered with only certain nodes having the "use client" dir ...

reactjsnext.jsviterollup

I am trying to locate the XPath for the NG repeat element with the following code snippet: ng-repeat="thread in threads | orderBy:'-last_ts' | filter : globalSearch track by $index" Can you assist

<div ng-click="changeChatThread(thread, true)" class="item ui three column grid thread_item ng-scope active-thread" ng-class="{'active-thread' : selectedThread === thread.chat_id}" ng-repeat="thread in threads | orderBy:'-last_ts' | ...

javascriptseleniumprotractor

Customizing alert message styles in Java script: Changing color and font of specific parts

I have been attempting to change a specific part of text to be bold and displayed in red color. Unfortunately, this does not seem to work on Microsoft Edge. Here is my code: alert("Hi how are you my friend"); The section that needs to be formatted: "fri ...

javascripthtmlcss