Firefox triggers VideoJS event 'ended' at the beginning

When I use video JS, the "ended" event in Firefox is triggered both at the end and beginning of the video playback.

Check out this example in FF: http://jsfiddle.net/planadecu/a3Chu/

All other browsers seem to work fine with this.

The code snippet called at the start of the video is as follows:

var videoPlayer = _V_("video", {}, function(){
  this.addEvent("ended", function(){ 
      this.posterImage.el.style.display = 'block';
  });
});​

I am looking for a way to trigger an event only at the end of the video, not at the start. Do you have any suggestions on how to fix this issue (which seems like a bug to me)?

You can replicate this problem using the provided fiddle.

Thank you for your assistance.

Answer №1

It appears there might be an issue with the video in question...

You can view the problem here: http://jsfiddle.net/a3Chu/2/

The change I made was removing this specific source file:

<source type="video/webm" src="http://www.reservango.com/static/video/reservango_video_vfinal_CAT.webm">

I observed that the script is functioning correctly - starting the video from the end(!)

I tested with different .webm files and they played normally, leading me to think there may be something unique about your file.

My testing was done on FF 15.0.1

UPDATE

I also tried on FF 16.0.2, but the issue seems to persist with that specific video file. You may want to consider rearranging the sources so that other formats are prioritized first. It's worth noting that my FF will play the .ogv format if .webm is placed last within the modified fiddle. Though not foolproof, a similar strategy is suggested in this older FF version post:

The inconsistency of some .webm files working is puzzling... Have you considered re-encoding the video? Additionally, verifying the mime types on the server could help, especially if there are discrepancies causing confusion for FF (which has happened before). This discrepancy could explain why externally hosted .webm files load correctly.

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

I tried to use my Google Maps app, but for some reason, it failed

Here's the code snippet I've been working on: if($_POST){ // get latitude, longitude and formatted address $data_arr = geocode($_POST['address']); // if able to geocode the address if($data_arr){ $latitude = $data_arr[0]; $l ...

Customize the AngularJS ng-grid filter to format the filter text

Currently, I am working with ng-grid in AngularJS (v2.0.8) and I am interested in exploring the syntax for the filterText field within the API. Specifically, I am looking to understand how to filter data based on certain columns and how to filter multiple ...

Unable to display information from a repeated `textarea` in ngRepeat

Check out my code on Plunker: https://plnkr.co/edit/rBGQyOpi9lS0QtnCUq4L I'm trying to log the content of each textarea when typing, using the printStuff() function: $scope.printStuff = function(customize, item) { console.log(customize[item.inde ...

Increase the totalAmount by adding the product each time

Can someone help me understand why the totalAmount shows as 20 when I add a product? Also, why doesn't it increase when I try to increment it? Any insights would be appreciated. Thank you. ts.file productList = [ { id: 1, name: 'Louis ...

Tips for ensuring your anchor links function properly with Ajax interactions

I have been working on transferring data from a MySQL database using AJAX with JSON as the datatype. Below is the code I've used: $("#klik_cari").click(function() { //ajax configuration $.ajax({ url: "<?php echo ...

Maintain the original alignment of table cells <td> even when the <tbody> element is set to display:block

I've been working on creating a theme for SMF, but I'm encountering some challenges with the tables. Here's an example of my HTML code: <div id="wrapper"> <table class="table_list"> <tbody class="header"> ...

What is causing the lack of redirection with this particular "res.redirect()" function?

How can I successfully implement a redirection in a Node.js and Express.js application? When I attempt to redirect by clicking a button, only the URL changes without any further action taking place. Using a form with a button inside, the form specifies a ...

Is there a way to create a mobile-exclusive slideshow using JavaScript?

I am trying to create a slideshow on my website, but whenever I add JavaScript it seems to break the desktop version. I want these three pictures to remain static and only start sliding when viewed on a mobile device. I have searched for resources on how t ...

What is the mechanism through which createStore fetches the initialState from the reducer function in redux?

While analyzing the code of redux in createStore.js, I am having trouble understanding how it retrieves the initial state from the reducer function when it is specified as the 1st argument. https://github.com/reduxjs/redux/blob/master/src/createStore.js#L ...

Run JavaScript when ColdFusion page is being loaded

Within my ColdFusion page, I have incorporated multiple cfinclude template calls to bring in separate files. Before each cfinclude template call, I am seeking a way to update a javascript variable. I have attempted to achieve this by using: <script typ ...

What is the process for retrieving document field values for an item in Umbraco 7 backoffice?

I have developed a unique Umbraco 7 dashboard where I aim to retrieve specific field details from instances of a particular document type in my Umbraco CMS. After successfully obtaining a list of all documents of the specified type using entityResource.ge ...

Adjust the size of fonts for elements that are added dynamically

My goal is to dynamically add elements with decreasing font sizes to a fixed-width/height container until they no longer fit. I've managed to scale the font based on the browser window size, but that's not the intended solution. Is it possible t ...

Guide on how to address the problem of the @tawk.to/tawk-messenger-react module's absence of TypeScript definitions

Is there a way to fix the issue of missing TypeScript definitions for the @tawk.to/tawk-messenger-react module? The module '@tawk.to/tawk-messenger-react' does not have a declaration file. 'c:/develop/eachblock/aquatrack/management-tool-app ...

I am currently working on coding a function that will search an array to determine if a specific item is present. If the item is found, a variable will be set to true;

So, I have this array of prices for various items like bread, apple, noodles, beef, milk, and coke. const prices = [ ["bread", 20], ["apple", 50], ["noodles", 100], ["beef", 40], ["milk", 32], ["coke", 25], ]; And here's the JavaScript co ...

Utilizing the '::marker' pseudo-element for generating Markdown-inspired headers

This code snippet is functioning correctly, however, I have a suggestion to make it more appropriate. Instead of using '::before', why not try using '::marker'? I attempted this adjustment but encountered an issue. Can anyone explain wh ...

What is the best method to center a div on the screen?

Is there a way to have a div open in the center of the screen? ...

Invoke a jQuery function in the parent page using regular JavaScript from an iframe

I have successfully created an iframe using regular javascript. Inside the iframe is a Jquery function along with JQuery itself and it functions correctly within the iframe. However, I am now looking to execute this function from the parent page instead of ...

Make sure that the Chai assertion does not result in any errors

One of my functions involves retrieving file content. export function getFileContent(path: string): any { const content = readFileSync(path); return JSON.parse(content.toString()); } If I need to verify that calling getFileContent(meteFile) result ...

Django: Getting two separate variables' values in an AJAX POST call

I am facing an issue while trying to send two different values from two separate dropdowns to my Django view. Unfortunately, only the value from the first dropdown is reaching the view. Let's take a look at the following view: def MyView(request): ...

My attempts to connect to the FreeSwitch server and make calls to the SIP client (XLite) using the SIPml5 client have been met with challenges

I am encountering issues with registering to a FreeSwitch server and making calls to a SIP client (XLite) using the SIPml5 SIP client. Below is the HTML5 code I am using: <!DOCTYPE html> <html> <head> <meta content="charset=utf-8"/ ...