CODEWITHSUNDEEP
javascripthtmlfirefoxmp4video.js
Michiel
Michiel

Reputation: 8103

Configure VideoJS Flash fallback

Since Firefox doesn't allow me to use an .mp4 file in the <video>-tag, I have to use the Flash-fallback on my VideoJS player.

For Chrome, Safari and IE, I can configure my VideoJS player with javascript to do pretty much anything. For example I like to loop it 5 times, hide the controls and mute the video. No issue there for the HTML5 version:

// Initialize the video with some settings
videojs(videoID, { 
    "controls": false, 
    "autoplay": false,
    "preload":  "auto",
});

var myVideo = videojs(videoID);

// Set the counter
var loop_count = 1;

// Function to loop the video exaclty 5 times
var loopInstagramVideo = function() {
    if (loop_count <= 5) {
        myVideo.play();
        loop_count++;
    } else {
        loop_count = 1;
    }
};

// Function to manipulatie the playing video (mute, no controls,...)
var setVideoOptions = function() {
     myVideo.muted(1);
     myVideo.controls(0);
};

// Set functions on the video
myVideo.on("play", setVideoOptions);
myVideo.on("ended", loopInstagramVideo);

So I would like to do the same for the Flash version.
The code above is generating an error on the videojs-call with the error:

TypeError: The element or ID supplied is not valid. (videojs)

Any thoughts on how to tackle this issue?

Upvotes: 0

Views: 1277

Answers (1)

Chuck
Chuck

Reputation: 908

While this isn't an answer for your "looping" question, I just myself discovered that after calling videojs() on an element, the ID changes. Whether it's the ID of the element changes or the focus of the videojs call changes I don't know. The error pertaining to the ID not being valid is being caused by your first and second videojs() calls.

I would change this:

videojs(videoID, { 
    "controls": false, 
    "autoplay": false,
    "preload":  "auto",
});

var myVideo = videojs(videoID);

To this:

var myVideo = videojs(videoID);

myVideo.controls = false;
myVideo.autoplay = false;
myVideo.preload = "auto";

OR put those properties in the video tag itself.

Upvotes: 1

Related Questions