I am interested in incorporating seek forward and seek rewind buttons into the flowplayer for video playback

I have integrated flowplayer into my website and configured the video using the following method. Additionally, I have included two buttons for fast forward and rewind functionality.

  <div class="flowplayer" data-swf="flow/flowplayer.swf">
      <video id="myvideo" class="myvideo">
        <source type="video/mp4" src=""/>
      </video>
    </div>
    <div> <a id="fastFwd" onClick="seek();return false;">fastFwd</a> 
    <a id="rewind" onClick="seek();return false;">rewind</a>
    </div>


   <script>
      $("#forward, #rewind").click(function (seek) {
          if (api.ready) {
            var target = $(this).attr("myvideo") == "forward" ? 5 : -5;
            api.seek(api.video.time + target);
          }
        });
    </script>


 However, I am facing an issue where the buttons are not functioning as intended.

Answer №1

It seems like there is a mismatch in the IDs you are using. You may need to ensure that your HTML and jQuery have corresponding IDs, or update them to match each other.

<script>
  $("#skipAhead, #goBack").click(function (offset) {
      if (player.isActive) {
        var position = $(this).attr("myvideo") == "forward" ? 10 : -10;
        player.seek(player.video.time + position);
      }
    });
</script>

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

Conceal and Reveal Navigation Bar

On a mobile screen, here is how my navigation bar looks: Just to clarify, I am currently only focusing on making the nav bar responsive and not other content. The stylus code for the navigation bar is as follows: -> code in stylus!!! .nav display ...

The Proper Way to Include External CSS in a Next.js Page Without Triggering Any Warnings

I find myself in a scenario where I must dynamically inject CSS into a webpage. The content of this page is constantly changing, and I am provided with raw HTML and a link to a CSS file from a server that needs to be displayed on the page. My attempt to ...

Choose an item from the drop-down menu

Currently, I am working on an automation project and have encountered a challenge with selecting an option from a dropdown menu. The only method that allowed me to access the element was through IHTMLDocument3: $dropdown = $ie.Document.IHTMLDocument3_get ...

I am facing an issue where an AJAX post to Express is not returning any data to req.query. I have tried various solutions but nothing seems to

I have encountered an issue with my setup where the body is empty when sending data through ajax. In Chrome's network tab, I can see the post and content with the correct payload: {"EventName":"asd","PrivacyLevel":1,"TypeInt":1,"ExpectedDate":"asd"," ...

The type '{}' cannot be assigned to type 'IntrinsicAttributes & FieldsProp'. This error message is unclear and difficult to understand

"The error message "Type '{}' is not assignable to type 'IntrinsicAttributes & FieldsProp'.ts(2322)" is difficult to understand. When I encountered this typeerror" import { useState } from "react"; import { Card } fr ...

Issues arise when attempting to use AngularJS in Internet Explorer 8 with compatibility mode enabled or when running in Internet Explorer 7 mode

Currently, I am facing an issue with AngularJS version 1.0.1. After creating an app and testing it in IE8 compatibility mode as well as IE7, I noticed that ng-change and ng-click are not responding. I have not tested other event handlers yet, but these two ...

Ways to resolve issues related to null type checking in TypeScript

I am encountering an issue with a property that can be null in my code. Even though I check for the value not being null and being an array before adding a new value to it, the type checker still considers the value as potentially null. Can anyone shed lig ...

Experiencing difficulties when establishing a connection between MongoDB and Node.js

I'm encountering an issue when attempting to connect MongoDB and Node.js on my local server. Can anyone assist me with solving this problem? Below is my JavaScript code: const mongodb = require("mongodb"); // Provide the function to connect to the d ...

Utilizing PHP Codeigniter, Ajax, and Jquery for Database Email Monitoring in Real Time

I've been working on incorporating a real-time email duplication check into an application using PHP CodeIgniter, Ajax, and jQuery. Unfortunately, I haven't had much success with it. jQuery <script type="text/javascript"> $(document).read ...

The dropdown menu dynamically populates only upon clicking it

Users can utilize a textbox with auto-complete functionality to input the name of an actor or actress, which is functioning correctly. Once a user enters a name in the textbox, a dynamic dropdown should appear containing a list of movies featuring that act ...

Using CSS to create a jQuery Vertical Slide Out menu

In my recent project, I have implemented a vertical menu with a feature that displays the sub-items when the parent item is hovered over. The structure of the HTML code looks like this: <ul id="nav"> <li><a href="#">Continents</a& ...

Effortless file uploading with Uploadify

I've been attempting to use Uploadify to upload PDF or TXT files, but so far it's only uploading image files. Even after trying various methods like renaming file extensions and allowing different formats, I can't seem to make it work for no ...

A guide on utilizing the sx prop in React to customize the color scheme of a navigation bar

I'm currently working on creating a sleek black navbar in react. Check out the code snippet I have so far: import UploadIcon from "@mui/icons-material/Upload"; import CustomButton from "./CustomButton"; import AppBar from '@mu ...

Undefined error encountered in the Google Places library

I'm new to working with the Ionic framework and was experimenting with implementing an autocomplete search feature using the Google Maps API. After going through several resources, I included the following code: <script type="text/javascript" src ...

Showcasing Javascript variables through HTML labels

I have an advertisement on a website. (Image). The prices in this advertisement are stored as javascript variables, and I want them to update automatically when I change the values of these variables. The prices appear between "Desde" and "Bs." in red f ...

Angular 2: Executing a function after ngFor has completed

Within Angular 1, I crafted a personalized directive called "repeater-ready" to pair with ng-repeat for triggering a callback method upon completion of an iteration: if ($scope.$last === true) { $timeout(() => { $scope.$parent.$parent.$ ...

Error message occurred in Express/React application when Node was unable to locate the "error" view

My app was functioning properly a few hours ago, but now I am encountering an error upon starting it. The issue lies in the absence of a /views directory in /lib, which is present in my src/ directory, containing error.jade. Despite trying various soluti ...

Tips for displaying an alert when the input value dynamically changes in jQuery

I am attempting to display an alert when the input value changes. I am using jQuery, so here is a demonstration of what I am trying to achieve but the alert is not showing or working. Thank you $(".d1, .d2").click( function (e) { var $this = $(this); $( ...

Guide on using Ajax to log a user in post-registration in Laravel 5.4

I am currently working on implementing a Modal registration box using Ajax. Everything is functioning properly, but I am facing an issue with logging the user in as well. Below is the modified register function in RegisterController.php: /** * Managing ...

Cannot locate element using React Testing Library with the selector: [data-testid="task"]

I've encountered an issue while testing a Task component that should be rendered after submitting a form. I'm utilizing redux-toolkit, but despite setting data-testid="task" for the Task component, it doesn't appear in the test DOM ...