Convert Flash into HTML5, keep using Flash if browser does not support HTML5

Question

My company is using Flash throughout the website. We want to upgrade into HTML5, while keep using Flash if the browser doesn't support HTML5. The Flash are converted using Google Swiffy.

I have tried many solution, but they are too complicated. Here is my current idea: I create a new Audio object in try/catch statement, so if the browser supports it, it will print the HTML5 code translated by Google Swiffy, but if it jump into catch statement, it means the browser doesn't support HTML5, I will use the old code. Here is my code:

try {
    new Audio();
    // Google Swiffy code here

} catch (er) {
    // Use many lines of "document.write" for old Flash code
    // Many lines for Flash code
}

However, I cannot import the Swiffy runtime into the code, because non-supporting browser will complain the runtime script, and it stuck immediately. So I change my code, to import the script manually like this, but I don't know why it doesn't work:

try {
    new Audio();

    var js = document.createElement("script");

    js.onload = function() {
        document.body.appendChild(js);

        // Google Swiffy code here
    }

    js.type = "text/javascript";
    js.src = "https://www.gstatic.com/swiffy/v5.2/runtime.js";



} catch (er) {
    alert(er);

    <!--
        displayFlash('abc.swf', 420, 450);
    //-->

    document.write("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http:\/\/fpdownload.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,0,0\" width=\"420\" height=\"450\" align=\"middle\"><param name=\"allowScriptAccess\" value=\"always\"><param name=\"movie\" value=\"..\/..\/images\/thap_deluxe.swf\"><param name=\"wmode\" value=\"transparent\"><param name=\"quality\" value=\"high\"><embed src=\"..\/..\/images\/thap_deluxe.swf\" wmode=\"transparent\" menu=\"false\" quality=\"high\" width=\"420\" height=\"450\" allowscriptaccess=\"always\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.macromedia.com\/go\/getflashplayer\"><\/object>");
}

Please suggest me any better solution, or please teach me how to fix the problem with my current solution. Thank you.

Answer 1

I think it is because your js file never loads.
It loads after you append it to the document.

Try it like this:

try {
    new Audio();

    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = "https://www.gstatic.com/swiffy/v5.2/runtime.js";

    document.head.appendChild(js); // Add it to the head.

} catch (er) {
    alert(er);

    <!--
        displayFlash('abc.swf', 420, 450);
    //-->

    document.write("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http:\/\/fpdownload.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,0,0\" width=\"420\" height=\"450\" align=\"middle\"><param name=\"allowScriptAccess\" value=\"always\"><param name=\"movie\" value=\"..\/..\/images\/thap_deluxe.swf\"><param name=\"wmode\" value=\"transparent\"><param name=\"quality\" value=\"high\"><embed src=\"..\/..\/images\/thap_deluxe.swf\" wmode=\"transparent\" menu=\"false\" quality=\"high\" width=\"420\" height=\"450\" allowscriptaccess=\"always\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.macromedia.com\/go\/getflashplayer\"><\/object>");
}

// Or if you want it in the body, unless your whole try / catch is already in a window.onload

Replace

document.head.appendChild(js);

with:

window.onload = function(){
    document.body.appendChild(js);
}