Error In Mozilla Firefox.

Question

I write HTML/JS code for HTML5 video player and have a error in Firefox 27.0.1 version, In Ubuntu/Windows Chrome in works, in IE11 it works.

HTML

<div id="newprogressBar" style="border:1px solid #aaa; color:#fff; width:295px; height:20px;"><span id="newprogress" style="background-color:#ff0000; height:20px; display:inline-block;"></span></div>

JS in HTML

var video = document.getElementById("videoPlayer"), (HTML5 <video *.mp4>)
newprogressBar = document.getElementById("newprogressBar");
newprogress = document.getElementById("newprogress");

Event function in JS

newprogressBar.addEventListener('click', function(event) {
width = parseFloat(newprogressBar.style.width);
var x = event.offsetX / width; 
video.currentTime = Math.round(x * video.duration);
}, false); 

I have an error on this line in Firefox

video.currentTime = Math.round(x * video.duration);

Error:

TypeError: Value being assigned to HTMLMediaElement.currentTime is not a finite floating-point value.

• Dennis: What are x and video.duration?
• bjb568: Sounds like it's NaNing.
• Dennis: Looks like a relevant question here: stackoverflow.com/questions/11334452/event-offsetx-in-firefox
• Oscar Paz: You should put console.log(width, x, x * video.duration) in your code to see what's going on. I'm sure one of those values is NaN.
• Denis: NaN it's true, nut why only in firefox? x - it's temp variable for debug. I need to create navigation on video, i see where user click and do thing like this (Max width - selected)

Answer 1

Check for .webm video file within video tag. Firefox on linux (also maybe on other OS) doesn't play .mp4 files.

• Lajos Mészáros: It needs the gstreamer plugin.