The object tag does not function properly for video fallbacks when using the appendChild method

My video player application utilizes a modified version of video For everybody. The setup involves an HTML5 <video> tag encompassing an <object> tag for flash fallback on Internet Explorer. Everything functions smoothly when I employ this setup statically, but once I attempt to create the video elements using JavaScript, IE9 seems to encounter some issues.

The static code that works fine looks like this:

<video id="video" width="360" height="240>
<source type="video/ogg" src="content/mov1.ogv"></source>
<source type="video/mp4" src="content/mov1.mp4"></source>
<object data="player.swf" type="application/x-shockwave-flash" height="384" width="512">
<param name="movie" value="player.swf" >
<param value="autostart=true&amp;file=/mov1.mp4" name="flashvars">
</object>
</video>

However, if I use a JavaScript function to build the video player as demonstrated here, it doesn't work:

function makeV4EPlayer(mp4URL, ogvURL, movieWidth, movieHeight, displayname){
    //create the video element and set its attributes
    var videoObject= document.createElement('video');
    videoObject.setAttribute("id", "video");        
    videoObject.setAttribute("width", movieWidth);
    videoObject.setAttribute("height", movieHeight);

    //add mp4 source
    var mp4Src=document.createElement('source');
    mp4Src.setAttribute("src", mp4URL);
    mp4Src.setAttribute("type","video/mp4");
    videoObject.appendChild(mp4Src);

    //add ogv source
    var oggSrc=document.createElement('source');
    oggSrc.setAttribute("src", ogvURL);
    oggSrc.setAttribute("type","video/ogg");
    videoObject.appendChild(oggSrc);

    //add object with flash player      
    var flashObject=document.createElement('object');
    flashObject.setAttribute("width", movieWidth);
    flashObject.setAttribute("height", movieHeight);
    flashObject.setAttribute("type", "application/x-shockwave-flash");
    flashObject.setAttribute("data","swf/player.swf");
    var params1 = document.createElement('param');
    params1.setAttribute("name", "movie");
    params1.setAttribute("value","swf/player.swf");
    var params2=document.createElement('param');
    params2.setAttribute("name","flashvars");
    params2.setAttribute("value",'autostart=true' + '&file=/' + mp4URL);
    flashObject.appendChild(params1);
    flashObject.appendChild(params2);
    videoObject.appendChild(flashObject);

    return videoObject;
}

The JavaScript successfully constructs the <video> tag and populates it, but it appears that IE won't play it. Nevertheless, it operates flawlessly on all other browsers.

Upon inspecting the pages using IE9 developer tools, I observed that in the static version, the video tag and object tag are considered siblings - meaning the object isn't nested within the video tag. However, in the dynamic JavaScript version, the object is contained inside the video tag. This seems to be the root of the issue.

It's worth mentioning that I am utilizing the JW Player as my fallback flash player, although I don't believe this is related to the problem at hand.

javascriptinternet-explorerhtml5-videoflash

Answer №1

The Internet Explorer does not support the ogg format (refer to the browser compatibility page), while other browsers do.

Possibly, the MP4 URL is incorrect or the file is corrupted?

=== UPDATE ===

You are referencing 'imagesrc' in the code without defining it beforehand:

params2.setAttribute("value",'autostart=true' + imagesrc + '&file=/' + mp4URL);

Prior initialization of 'imagesrc' is necessary.

=== UDPATE ===

If the object tag should not be within the video tag, modifications need to be made as only one element can be returned. For example, place both within a wrapper element:

function makeV4EPlayer(mp4URL, ogvURL, movieWidth, movieHeight, displayname){
    // create a wrapper
    var videoWrapper = document.createElement('div');
    videoWrapper.style.width = movieWidth+'px';
    videoWrapper.style.height = movieHeight+'px';
    videoWrapper.style.padding = '0';
    videoWrapper.style.margin = '0';

    //create the video element and set its attributes
    var videoObject= document.createElement('video');
    videoObject.setAttribute("id", "video");        
    videoObject.setAttribute("width", movieWidth);
    videoObject.setAttribute("height", movieHeight);

    //add mp4 source
    var mp4Src=document.createElement('source');
    mp4Src.setAttribute("src", mp4URL);
    mp4Src.setAttribute("type","video/mp4");
    videoObject.appendChild(mp4Src);

    //add ogv source
    var oggSrc=document.createElement('source');
    oggSrc.setAttribute("src", ogvURL);
    oggSrc.setAttribute("type","video/ogg");
    videoObject.appendChild(oggSrc);

    // add video to wrapper
    videoWrapper.appendChild(videoObject);

    //add object with flash player      
    var flashObject=document.createElement('object');
    flashObject.setAttribute("width", movieWidth);
    flashObject.setAttribute("height", movieHeight);
    flashObject.setAttribute("type", "application/x-shockwave-flash");
    flashObject.setAttribute("data","swf/player.swf");
    var params1 = document.createElement('param');
    params1.setAttribute("name", "movie");
    params1.setAttribute("value","swf/player.swf");
    var params2=document.createElement('param');
    params2.setAttribute("name","flashvars");
    params2.setAttribute("value",'autostart=true' + '&file=/' + mp4URL);
    flashObject.appendChild(params1);
    flashObject.appendChild(params2);

    // add flash player to wrapper
    videoWrapper.appendChild(flashObject);

    return videoWrapper;
}

You may also test using this jsfiddle (I cannot access IE9 to check for you).

Alternatively, two separate functions can be created - one for the video tag and another for the object tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching from PHP to jQuery or JavaScript can make for a

I've been attempting to convert this PHP code to jQuery or JavaScript without success. I'm still learning about jQuery and JavaScript Check out the original PHP code: <?php // Set timezone date_default_timezone_set('UTC'); ...

javascriptphpjquery

If an array is present in the object, retrieve the array item; otherwise, retrieve the field

When obj arrays are nested and found, everything works correctly; however, if they are not found, the page breaks as it becomes null. How can I check if they exist beforehand, and if not, just output the next level field? The code below works when both ar ...

javascriptjqueryarrays

When utilizing styled-jsx alongside postcss, experiencing issues with styles failing to reload or rebuild

I'm currently using postcss in conjunction with styled-jsx. In my setup, I have multiple CSS files that I'm importing using the @import directive within the _app.js file. Everything seems to work smoothly, except when I modify any of the CSS file ...

javascriptreactjsnext.jsstyled-jsx

Error during compilation in npm (symbol '_' is not recognized)

After updating all the dependencies in my JavaScript program without making any changes to my components, I encountered an error when running: npm run build The error specifically mentions a problem with one of my components: Failed to compile. ./src/c ...

javascriptnode.jsreactjsnpmreact-bootstrap

My intention is to ensure that the page is printed with the Background graphics checkbox pre-checked

When using the print button, I typically include the following code: onclick="window.print();" I also came across this code snippet to set a checkbox as checked by default: <style type="text/css" media="print"> * { -webkit-print-color- ...

javascripthtmljquerycssjquery-plugins

Tokenizing with jQuery UI

I have been following a tutorial that utilizes jQuery UI to generate Facebook tokens, as shown in this link: However, I am facing an issue where I need to pass two values through JSON: the ID and the NAME. The server-side script is structured as follows: ...

javascriptjqueryajaxjquery-uijsonp

Tampermonkey's .click() function appears to be malfunctioning

I am attempting to automate clicking a button in Tampermonkey, but for some reason the code is not working as expected. Interestingly, when I manually run the code in the console, it functions perfectly. Here is the snippet: $(document).ready(function() ...

javascriptjquerytampermonkey

hiding a dropdown menu in vuejs when clicking outside of it

Utilizing dropdown menu components in vuejs to create a standard dropdown menu. The code for the dropdown component is as follows: <template> <span class="dropdown" :class="{shown: state}"> <a href="#" @click.prevent="toggleDro ...

javascriptdrop-down-menuvue.jsvuejs2vue-component

Creating dynamic and engaging animations for components using ReactCSSTransitionGroup

I'm currently attempting to add animation to a modal that appears when a button is clicked using ReactCSSTransitionGroup. The modal is showing up on button click, however, there is no transition effect. My render method is set up like this: render() ...

javascriptreactjsreactcsstransitiongroup

Implementing the expand and collapse functionality to the Discovery sidebar on the DSpace 4.2 xmlui platform

I recently began using DSpace and I am attempting to implement an expand/collapse feature in the Discovery sidebar of DSpace 4.2 xmlui using the Mirage theme. After finding some helpful jquery code, I attempted to add this functionality by placing the js f ...

javascriptjquerydspace

Unleashing the power of eventListeners through exponential re-rendering upon state updates

Trying to implement an eventListener for "keydown" to update the state (a boolean named showMenu). I placed it inside a useEffect, but it's not functioning correctly and I can't pinpoint the issue. When I include showMenu in the dependency arra ...

javascriptreactjsdomdom-events

Sort the array by the elements in a separate array

Here is a filters array with three values: serviceCode1, serviceCode2, and serviceCode3. ['serviceCode1', 'serviceCode2', 'serviceCode3'] I have another array with approximately 78 records that I want to filter based on the a ...

javascriptangulartypescript

Dynamic refresh of content with Ajax

Recently, I stumbled upon the platform Polyvore and decided to test it out. While experimenting with its "Create a set" feature, I noticed that the site provides a view of items either from your own collection or sourced elsewhere. An interesting observat ...

javascriptajaxauto-update

How can we avoid re-rendering the same component repeatedly when using React Router v6?

As a beginner in react, I'm facing an issue with preventing components from re-rendering when navigating to a different page. Specifically, I want to display only text on my Signup and Login pages, but the Navbar keeps re-rendering every time I switch ...

javascriptcssreactjsreact-native

Is it possible to send array data in a jQuery AJAX call using the GET method?

Is there a way to pass a JavaScript array as a parameter in an AJAX GET request? I am currently dealing with an API call and have a method that requires three parameters, with the third one being an array. ...

javascriptjqueryajax

Having issues with my toggler functionality. I attempted to place the JavaScript CDN both at the top and bottom of the code, but unfortunately, it is still not

I recently attempted to place the JavaScript CDN at the top of my code, but unfortunately, it did not have the desired effect. My intention was to make the navigation bar on my website responsive and I utilized a toggler in the process. While the navbar di ...

javascripthtmlcssbootstrap-5

Error: The property 'parentNode' cannot be read because it is null

I wanted to test if my laptop can handle WebGL by loading examples from my instructor's webpage. The examples on the webpage worked fine, just showing a square within a square. I then decided to copy the exact codes into a notepad text editor, saved t ...

javascript

What is the best way to reach the end of a countdown and hit 0

Is there a way to complete the countdown to 0 second? Once the countdown is finished, it will display 00days00hours00minutes01seconds I would like it to show 0 seconds like this 00days00hours00minutes00seconds. Is there a method to achieve this? Explore ...

javascriptjquery

Combine an array of objects using the main key in each object

I have an array of objects with different years and details var worksSummaryDetailsArr = [ { year: 2020, worksSummaryDetailsObj: [ [Object], [Object], [Object], [Object] ] }, { year: 2021, worksSummaryDetailsObj: [ [Object], [Object], ...

javascriptarraysjsonobject

MUI version 5 - Checkboxes are receiving a variety of unique classes

After recently upgrading from Mui v4 to v5, I've noticed a strange behavior with checkboxes. Upon inspecting the DOM differences between the two versions, it appears that some additional classes are now being applied in v5 and the extra span with the ...

javascriptreactjsmaterial-ui