Cortado Ogg-player in MediaElement.js - on the verge of full functionality

Question

Cortado Ogg-player in MediaElement.js - on the verge of full functionality

After modifying the MEjs demo player, I successfully enabled OGG playback in IE/Safari browsers by incorporating the Cortado Java applet.

Although I got play/pause functionality working, applet.currentTime and applet.duration proved to be effective alternatives despite getPlayPosition() not providing the expected result as per the documentation.

My attempt to link these functionalities with the current position indicators on the mejs player encountered a stumbling block. The setCurrentTime method triggered a

DOM Exception: InVALID_STATE_ERR (11)

in IE, leading to similar errors in Safari. It appears that the targeted object is no longer accessible?

The provided code allows for playing and pausing, displaying seconds/total time in the console (F12 tools need to be enabled in IE). Is there a recommended approach to integrate this with the play bar?

<!DOCTYPE html>
<html>
...
... <!-- Code continues here -->
...
</html>

This implementation utilizes MeJS 2.10.3 version.

javascript dom mediaelement.js ogg cortado

Answer 1

Answer №1

[UPDATE]
Upon reviewing the code for MediaElement.js, it appears that mejs.players is actually an object instead of an array. To access the first player, you should look into mejs.players['mep_0'] rather than mejs.players[0], as it would result in undefined.

It seems likely that jQuery could be encountering difficulties creating an interactive <applet> element. In my experience, jQuery (which heavily relies on document.createDocumentFragment) sometimes struggles to attach or trigger events on dynamically created or cloned DOM nodes, particularly in IE. This issue might be causing the DOM error you're facing, possibly due to the failure to initialize your <applet> object.

To potentially resolve this issue, I recommend using the native methods document.createElement and document.appendChild instead of jQuery.append.

if (jQuery(this.$node).find('applet').length==0) {
    var createElem = function(name, attributes) {
        var el = document.createElement(name);
        attributes = attributes || {};
        for (var a in attributes) {
            el.setAttribute(a, attributes[a]);
        }
        return el;
    };
    var applet = createElem('applet',{
        code:'com.fluendo.player.Cortado.class',
        codebase: 'http://theora.org/',
        archive: 'cortado.jar',
        width: 100,
        height: 100
    });
    applet.appendChild(createElem('param', {name:'url', value:d.src}));
    applet.appendChild(createElem('param', {name:'seekable', value: 'true'}));
    applet.appendChild(createElem('param', {name:'autoPlay', value: 'false'}));
    this.$node.get(0).appendChild(applet);
}

Answer 2

[UPDATE]
Upon reviewing the code for MediaElement.js, it appears that mejs.players is actually an object instead of an array. To access the first player, you should look into mejs.players['mep_0'] rather than mejs.players[0], as it would result in undefined.

It seems likely that jQuery could be encountering difficulties creating an interactive <applet> element. In my experience, jQuery (which heavily relies on document.createDocumentFragment) sometimes struggles to attach or trigger events on dynamically created or cloned DOM nodes, particularly in IE. This issue might be causing the DOM error you're facing, possibly due to the failure to initialize your <applet> object.

To potentially resolve this issue, I recommend using the native methods document.createElement and document.appendChild instead of jQuery.append.

if (jQuery(this.$node).find('applet').length==0) {
    var createElem = function(name, attributes) {
        var el = document.createElement(name);
        attributes = attributes || {};
        for (var a in attributes) {
            el.setAttribute(a, attributes[a]);
        }
        return el;
    };
    var applet = createElem('applet',{
        code:'com.fluendo.player.Cortado.class',
        codebase: 'http://theora.org/',
        archive: 'cortado.jar',
        width: 100,
        height: 100
    });
    applet.appendChild(createElem('param', {name:'url', value:d.src}));
    applet.appendChild(createElem('param', {name:'seekable', value: 'true'}));
    applet.appendChild(createElem('param', {name:'autoPlay', value: 'false'}));
    this.$node.get(0).appendChild(applet);
}

Cortado Ogg-player in MediaElement.js - on the verge of full functionality

Answer №1

Similar questions

Correct the spacing around periods, even within separate div elements

The drop-down menu fails to appear when I move my cursor over it

Efficiently verifying elements within an array

Trouble with VueJS: @change event not triggered when <input> value changes

Ajaxload script for mouseover events

Present the selected values in the correct manner

Using D3.JS, you can determine the minimum and maximum values within an array of arrays, a feature that is not

Exploring the Power of Arrays, For-Loops, and Functions in JavaScript

Simultaneous appearance of multiple jQuery dialogs

Using Vue to pass an array of rules to a child component

What are the steps to integrate mp3 music into my web application?

Issue with the message deletion feature in discord.js

When the user clicks on an image, passing either the image name or image ID attribute

Obtaining the data stored in objects within a parse database

Unable to Remove parentNode Class

Select an item from the options available

Place the simulation nodes in designated locations

Is it necessary to link event handlers to `this` when using TypeScript and React?

"A common error that may occur in Node.js is the inability to set headers after they have

Retrieving video information using Dailymotion API with JSON and jQuery