AoN
Internet Programmer
- Aug 1, 2012
- 114
A small little rundown of what I'm trying to do:
1) Dynamically determine if a browser is capable of playing HTML5 video (Working)
2) If not capable of playing HTML5 video, load Flash version of video, CSS, and page (Working)
3) If capable of playing HTML5 video, load HTML5 version of video, CSS, and page (Stuck)
All the code needed loads into the browser (IE10, IE11, and Chrome 36 have been tested). The problem is with the execution of JavaScript that is added through the dynamic loading. I'm using the Adobe Captivate CS6 publishing system for Flash and HTML5 output, and all my customized code works perfectly if the scripts are loaded normally, but not through this dynamic method. To save a little bit of effort, I'm just going to post the code for the HTML5 version.
I included all the functions for inserting files (internal and external CSS and JavaScript), in case the problem is there, though it took me several hours just to get the internal CSS function to work without disabling the JavaScript function. :S
When using the browser debugger in IE, it errors with the execution (as a part of the DoCPInit function) of the CPPreInit function, which is located in CPLibrary.js, the fifth script dynamically loaded. The debugger states that the function is undefined.
Honestly, I'd prefer to use PHP to get this all done, but my hands are tied, so JavaScript has to get the job done, and I know it can, I'm just screwing it up.
1) Dynamically determine if a browser is capable of playing HTML5 video (Working)
2) If not capable of playing HTML5 video, load Flash version of video, CSS, and page (Working)
3) If capable of playing HTML5 video, load HTML5 version of video, CSS, and page (Stuck)
All the code needed loads into the browser (IE10, IE11, and Chrome 36 have been tested). The problem is with the execution of JavaScript that is added through the dynamic loading. I'm using the Adobe Captivate CS6 publishing system for Flash and HTML5 output, and all my customized code works perfectly if the scripts are loaded normally, but not through this dynamic method. To save a little bit of effort, I'm just going to post the code for the HTML5 version.
Code:
function addExternalStyleSheet(href)
{
if(document.createStyleSheet)
{
document.createStyleSheet(href);
}
else
{
var newSheet = document.createElement('link');
newSheet.setAttribute('rel', 'stylesheet');
newSheet.setAttribute('type', 'text/css');
newSheet.setAttribute('href', href);
document.getElementsByTagName('head')[0].appendChild(newSheet);
}
}
function addInternalStyleSheet(selector, attributes)
{
if(document.createStyleSheet)
{
var styleSheet = document.createStyleSheet('');
styleSheet.cssText = selector + '{' + attibutes + '}';
}
else
{
var styleTag = document.createElement('style');
var head = document.getElementsByTagName('head')[0];
head.appendChild(styleTag);
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
if(sheet.insertRule)
sheet.insertRule(selector + '{' + attributes + '}', 0);
else
sheet.addRule(selector, attributes, 0);
}
}
function addJavaScript(src)
{
var newScript = document.createElement('script');
newScript.setAttribute('type', 'text/javascript');
newScript.setAttribute('src', src);
document.getElementsByTagName('head')[0].appendChild(newScript);
}
function generateEmbed()
{
if(fileType == 'html5')
{
addExternalStyleSheet('assets/playbar/playbarStyle.css');
addExternalStyleSheet('assets/css/CPLibrary.css');
addExternalStyleSheet('assets/css/CPQuiz.css');
addExternalStyleSheet('assets/css/smoothness/jquery-ui-1.8.14.custom.css');
addExternalStyleSheet('assets/css/dd.css');
addInternalStyleSheet('.shadow', 'overflow: hidden;');
addInternalStyleSheet('.cpMainContainer', 'background-color: transparent; height: 100%; width: 100%; padding: 0px; position: absolute;');
addInternalStyleSheet('.blocker', 'position: absolute; left: 0px; top: 0px; display: none;');
addInternalStyleSheet('.loadingBackground', 'background-color: #777777; opacity: 0.5;');
addInternalStyleSheet('.loadingString', 'color: #ffffff;');
addJavaScript('assets/js/jquery-1.6.1.min.js');
addJavaScript('assets/js/uncompressed.jquery.dd.js');
addJavaScript('assets/js/uncompressed-jquery-ui-1.8.14.custom.js');
addJavaScript('assets/js/CPRuntimeDailog.js');
addJavaScript('assets/js/CPLibrary.js');
addJavaScript('assets/js/CPQuizLibrary.js');
addJavaScript('assets/js/CPPlaybar.js');
addJavaScript('assets/js/CPTOC.js');
addJavaScript('assets/js/CPWidgetManager.js');
addJavaScript('assets/playbar/playbarScript.js');
addJavaScript('Project.js');
document.getElementById('player').innerHTML = '\n <div class="cpMainContainer" id="cpDocument" style="left: 0px; top: 0px;">\n <div class="shadow" id="project_container" style="left: 0px; top: 0px; position: absolute;">\n <div id="project" class="cp-movie" style="width: 1280px; height: 720px">\n <div id="project_main" class="cp-timeline cp-main">\n <div id="div_Slide" onclick="handleClick(event)" style="top: 0px; width: 1280px; height: 720px; position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0);"><\/div>\n <\/div>\n <div id="autoplayDiv" style="display: block; text-align: center; position: absolute; left: 0px; top: 0px;">\n <img id="autoplayImage" src="" style="position: absolute; display: block; vertical-align: middle;" \/>\n <div id="playImage" tabindex="0" role="buton" aria-label="play" class="autoPlayButton" onkeydown="CPPlayButtonHandle(event)" onClick="cp.movie.play()" style="position: absolute; display: block; vertical-align: middle;"><\/div>\n <\/div>\n <\/div>\n <div id="playbar" style="left: 0px; float: left; position: absolute;"><\/div>\n <div id="toc" style="left: 0px; float: left; position: absolute;"><\/div>\n <div id="cc" style="left: 0px; float: left; position: absolute; visibility: hidden;">\n <div id="ccText" style="left: 0px; float: left; position: absolute; width: 100%; height: 100%;">\n <p style="margin-left: 8px; margin-right: 8px; margin-top: 2px;"><\/p>\n <\/div>\n <div id="ccClose" style="background-image: url(.\/assets\/Playbar_icons\/ccClose.png); right: 0px; float: right; position: absolute; cursor: pointer; width: 13px; height: 11px;" onclick="showHideCC()"><\/div>\n <\/div>\n <div id="passwordDiv" style="display: block; text-align: center; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;"><\/div>\n <div id="expDiv" style="display: block; text-align: center; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;"><\/div>\n <\/div>\n <\/div>\n <div id="blockUserInteraction" class="blocker" style="width: 100%; height: 100%;">\n <table style="width: 100%; height: 100%; text-align: center; vertical-align: middle;" id="loading" class="loadingBackground">\n <tr style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">\n <td style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">\n <image id="preloaderImage"><\/image>\n <div id="loadingString" class="loadingString">Loading...<\/div>\n <\/td>\n <\/tr>\n <\/table>\n <\/div>\n';
function DoCPInit()
{
CPPreInit();
cp.QuizLibraryInit();
CPPostInit();
}
document.oncomplete = DoCPInit();
}
}I included all the functions for inserting files (internal and external CSS and JavaScript), in case the problem is there, though it took me several hours just to get the internal CSS function to work without disabling the JavaScript function. :S
When using the browser debugger in IE, it errors with the execution (as a part of the DoCPInit function) of the CPPreInit function, which is located in CPLibrary.js, the fifth script dynamically loaded. The debugger states that the function is undefined.
Honestly, I'd prefer to use PHP to get this all done, but my hands are tied, so JavaScript has to get the job done, and I know it can, I'm just screwing it up.
