Video.js jQuery disrupting video play/pause functions in Firefox

问题

I am trying to use video.js to prevent fast-forward, but allow rewind, for mp4 videos on a Moodle site. The following script works in Chrome and Opera, but not in Firefox:

window.onload = function() {
  if ($('iframe').length > 0) {

    $('iframe').ready(function() {
      var videoPlayer = $('iframe').contents().find('video')[0];

      var cssLink = document.createElement("link")
      cssLink.href = "https://vjs.zencdn.net/5.0/video-js.min.css";
      cssLink.rel = "stylesheet";
      cssLink.type = "text/css";
      $('iframe').contents().find('head').append(cssLink);

      videojs(videoPlayer, {}, function() {
        var vjsPlayer = this;
        $('iframe').contents().find('video').prop('controls', 'true');
        $('iframe').contents().find('div .vjs-big-play-button').html('');
        $('iframe').contents().find('div .vjs-control-bar').html('');
        $('iframe').contents().find('div .vjs-caption-settings').html('');

        var currentTime = 0;

        vjsPlayer.on("seeking", function(event) {
          if (currentTime < vjsPlayer.currentTime()) {
            vjsPlayer.currentTime(currentTime);
          }
        });

        vjsPlayer.on("seeked", function(event) {
          if (currentTime < vjsPlayer.currentTime()) {
            vjsPlayer.currentTime(currentTime);
          }
        });

        setInterval(function() {
          if (!vjsPlayer.paused()) {
            currentTime = vjsPlayer.currentTime();
          }
        }, 1000);
      });
    });
  }
}

In Firefox, the desired effect is achieved (seeking forward does not change the time on the video, but seeking backward does), however, the play/pause functions are broken. If I have seeked an odd number of times in either direction, the video is paused and only plays when holding down the play button. If I have seeked an even number of times (including zero), the video plays but the pause button does nothing. I get the same results in Microsoft Edge, and have posted a question about that as well.

I tried to add a type="video/mp4" attribute to the source tag, but the video has no source tag. From the last part of the answer on this question, I suppose this is because the source is hidden from the user. Is there a way I can view/edit the source? I can right click on the video to get the link, but there is no source element or scr attribute on the video in the html of the page.

Here is the <video> tag in Chrome:

<video autoplay="" name="media" id="vjs_video_3_html5_api" class="vjs-tech" controls=""><source src="https://localhost/pluginfile.php/26769/mod_resource/content/4/Sample%20Video.mp4" type="video/mp4">
  <source src="https://localhost/pluginfile.php/26769/mod_resource/content/4/Sample%20Video.mp4" type="video/mp4">
</video>

And here is the <video> tag in Firefox:

<video controls="" class="vjs-tech" id="vjs_video_3_html5_api" style="position:absolute; top:0; left:0; width:100%; height:100%" autoplay=""></video>

Additionally, I have seen a suggestion to add AddType video/mp4 .mp4 to the .htaccess file, but I'm worried about doing that in Moodle. The content of the .htaccess file is:

deny from all
AllowOverride None
Note: this file is broken intentionally, we do not want anybody to undo it in subdirectory!

What would the consequences be of editing this?

Are there any other suggestions for getting the mp4 videos working properly with Firefox?

来源：https://stackoverflow.com/questions/34864139/video-js-jquery-disrupting-video-play-pause-functions-in-firefox

标签

javascript

html5

firefox

moodle

video.js