--- a/toolkit/content/tests/widgets/test_videocontrols.html
+++ b/toolkit/content/tests/widgets/test_videocontrols.html
@@ -344,16 +344,24 @@ add_task(async function click_event_disp
   await waitForEvent("pause");
   video.currentTime = 0.0;
   await waitForEvent("seeking", "seeked");
   is(video.paused, true, "checking video play state");
   synthesizeMouse(video, scrubberOffsetX + 10, scrubberCenterY, {});
   await waitForEvent("seeking", "seeked");
 
   video.removeEventListener("click", clientScriptClickHandler);
+
+  // Bug 1412617, click event should dispatch to video element if clicking on the
+  // area other than controlBar.
+  let receivedClickEvent = false;
+  video.addEventListener("click", () => receivedClickEvent = true, {once: true});
+  synthesizeMouseAtCenter(video, {});
+  await waitForEvent("play");
+  ok(receivedClickEvent, "Should receive click from clicking on spacer");
 });
 
 // Bug 1367194: Always ensure video is paused before finishing the test.
 add_task(async function ensure_video_pause() {
   if (!video.paused) {
     video.pause();
     await waitForEvent("pause");
   }

--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1539,17 +1539,17 @@
 
         ttBtn.classList.add("textTrackItem");
         ttBtn.setAttribute("index", tt.index);
 
         ttBtn.addEventListener("click", event => {
           event.stopPropagation();
 
           this.changeTextTrack(tt.index);
-        });
+        }, {mozSystemGroup: true});
 
         ttBtn.appendChild(ttText);
 
         this.textTrackList.appendChild(ttBtn);
 
         if (tt.mode === "showing" && tt.index) {
           this.changeTextTrack(tt.index);
         }
@@ -1842,20 +1842,28 @@
         addListener(this.controlsSpacer, "dblclick", this.toggleFullscreen);
 
         addListener(this.videocontrols, "resizevideocontrols", this.adjustControlSize);
         addListener(this.videocontrols, "transitionend", this.onTransitionEnd);
         addListener(this.video.ownerDocument, "mozfullscreenchange", this.onFullscreenChange);
         addListener(this.controlBar, "transitionend", this.onControlBarTransitioned);
         addListener(this.video.ownerDocument, "fullscreenchange", this.onFullscreenChange);
         addListener(this.video, "keypress", this.keyHandler, {capture: true});
-        // Prevent any click event within media controls from dispatching through to video.
+        // Prevent any click event within controlBar from dispatching through to video.
         addListener(this.videocontrols, "click", function(event) {
-          event.stopPropagation();
+          const targetNode = event.originalTarget;
+          // Natvie anonymous content in <input> might show up as orginalTarget (bug 208427).
+          // Node.contains cannot indicate whether NAC is a descendant of controlBar or not,
+          // so an extra check for parentNode is needed for workaround.
+          if (this.controlBar.contains(targetNode) ||
+              this.controlBar.contains(targetNode.parentNode)) {
+            event.stopPropagation();
+          }
         }, {mozSystemGroup: false});
+
         addListener(this.videocontrols, "dragstart", function(event) {
           event.preventDefault(); // prevent dragging of controls image (bug 517114)
         });
 
         if (!this.videocontrols.isTouchControls) {
           addListener(this.scrubber, "input", this.onScrubberInput);
           addListener(this.scrubber, "change", this.onScrubberChange);
           // add mouseup listener additionally to handle the case that `change` event