Highlighted

html5 embedding problem

Community Beginner ,
Jan 08, 2019

Copy link to clipboard

Copied

I'm currently working on a website and have been using flash files instead of html5. My website contains interactive audiobooks etc. that I have created using Opus Pro. However, when I publish in html5 and copy the code onto my website's pages, a blank screen comes up when I preview or publish it. The html works when I open it outside of muse, but muse doesn't seem to agree with it. Could somebody help me out please? Thanks.

Most Valuable Participant
Correct answer by Ussnorway | Most Valuable Participant

corneliust83113803  wrote

Thanks Ussnorway. I'm going to give this a try and finger's crossed. However I think that I'll run into more problems due to the fact that a lot of my html is more interactive (buttons to play sounds, multiple pages etc.) where this method won't work.

the sound only autoplays because your Opus code tells it to

corneliust83113803  wrote

I assumed that html could just be copied and pasted as I'd done before

you assumed correct however the issue is that Opus is NOT html, its html + bits and those bits get blocked my Muse when you drop them into a html box without adjusting your codes

Muse was made for non-coders to use and people like Nancy or myself can always fine tune because we know how to code... Adobe Animate | Opus is not designed to work with Muse, they are for coders to control what happens inside a Google add, Adobe Edge Animate was made with Muse in mind and will be much better (for a coder) to get animations running inside Muse

corneliust83113803  wrote

I don't really know how to write my own code.

then my recommendation is that you stop trying to use code and use a widget instead... there are lots of sound widgets around, here is a free one to try Nomad Dreamers

better ones cost a bit $ but give you more options... let someone else do the code and you work on the design side of things?

Views

462

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

html5 embedding problem

Community Beginner ,
Jan 08, 2019

Copy link to clipboard

Copied

I'm currently working on a website and have been using flash files instead of html5. My website contains interactive audiobooks etc. that I have created using Opus Pro. However, when I publish in html5 and copy the code onto my website's pages, a blank screen comes up when I preview or publish it. The html works when I open it outside of muse, but muse doesn't seem to agree with it. Could somebody help me out please? Thanks.

Most Valuable Participant
Correct answer by Ussnorway | Most Valuable Participant

corneliust83113803  wrote

Thanks Ussnorway. I'm going to give this a try and finger's crossed. However I think that I'll run into more problems due to the fact that a lot of my html is more interactive (buttons to play sounds, multiple pages etc.) where this method won't work.

the sound only autoplays because your Opus code tells it to

corneliust83113803  wrote

I assumed that html could just be copied and pasted as I'd done before

you assumed correct however the issue is that Opus is NOT html, its html + bits and those bits get blocked my Muse when you drop them into a html box without adjusting your codes

Muse was made for non-coders to use and people like Nancy or myself can always fine tune because we know how to code... Adobe Animate | Opus is not designed to work with Muse, they are for coders to control what happens inside a Google add, Adobe Edge Animate was made with Muse in mind and will be much better (for a coder) to get animations running inside Muse

corneliust83113803  wrote

I don't really know how to write my own code.

then my recommendation is that you stop trying to use code and use a widget instead... there are lots of sound widgets around, here is a free one to try Nomad Dreamers

better ones cost a bit $ but give you more options... let someone else do the code and you work on the design side of things?

Views

463

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 08, 2019 0
Adobe Community Professional ,
Jan 08, 2019

Copy link to clipboard

Copied

Let me just say that converting Flash to HTML5 is a mixed bag of tricks.   It sometimes works and sometimes doesn't.   Please post a URL to the problem page online so we can check it with our browser's developer tools.

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2019 0
Community Beginner ,
Jan 09, 2019

Copy link to clipboard

Copied

Hi Nancy

I''m not converting from flash to html5, I'm starting from scratch. The problem is not with the actual html file, but rather when I copy the code into Muse. I have embedded code before and it worked fine in muse. However, since using opus pro (which can create html5 publications) it hasn't worked

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

Please post a URL to one of the pages online.

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

Without a link, I can't guess what the conflict might be. 

If as you you say your project works with normal code, then you have another reason to stop using Muse and switch to a code editor like Dreamweaver or Pinegrow. 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Community Beginner ,
Jan 09, 2019

Copy link to clipboard

Copied

Apologies. I'm just uploading the html onto the server. I will send on a link when it's done.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Community Beginner ,
Jan 09, 2019

Copy link to clipboard

Copied

html trial page 

this is the page. The rest of the website is working as you can see by clicking any go the links on the top on the page

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

That page contains many  critical code errors which is why it won't work.  See link below for details.

Showing results for http://leighleat.com/html-trial-page.html - Nu Html Checker

It looks to me as if you copied and pasted an entire HTML document into your Muse page whicch is not the right thing to do.  You must deconstruct that document and strip out the parts that Muse has already generatred for you.

<!DOCTYPE html>

<html>

<head><Title>Untitled1</Title>

<!--THESE CSS STYLES GO INTO A CUSTOM MUSE <HEAD> TAG.-->

<style type="text/css">

body {background:#000, mragin:0}

#__NoHTML5 {background:#ffffff url('NoHTML5FallBack.jpg'); border-color:#333; border-style:double; color:#000020; left:25%; padding:30px; position:fixed; text-align:center; top:25%; visibility:hidden; z-index:1000; }#Miorchat___1280x1024D {height:570px; left:130px; overflow:hidden; position:absolute; top:90px; visibility:inherit; width:770px; }#Page_1D {background-color:#ffffff; height:768px; left:0px; margin-left:auto; margin-right:auto; overflow:hidden; position:absolute; top:0px; visibility:hidden; width:1024px; }#Untitled1 {height:768px; overflow:hidden; position:relative; width:1024px; }

</style>

</head>

<body style="background-color:#000000; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; ">

<!--THIS CODE GOES INTO CUSTOM HTML-->

<div id="__NoHTML5">

<div style="background:#fff; border:double #37729A; font:Arial, Helvetica, sans-serif; ; font-size:12px; margin-..."><span style="font:Arial; font-size:16px; ">This website requires a browser which supports HTML5.<br>Some elements of this site will not work correctly until you upgrade your browser.</span></div><script type="text/javascript">if(window.SVGSVGElement==undefined) document.getElementById("__NoHTML5").style.visibility="visible";</script></div><div id="Untitled1"><script type="text/javascript" src="Opus.js"></script><script type="text/javascript">_oc=new DWObjectCode(0,4,1);var _DWPub = new DWPublication(0,"Untitled1",false,1,false);DWVariables.instance().initPublication(_DWPub,'SCORE',0, 'SCORE_VALUE',0, 'SCORE_VALUE_TOTAL',0, 'SCORE_VALUE_PERCENT',0, 'SCORE_CORRECT',0, 'SCORE_INCORRECT',0, 'SCORE_TOTAL',0, 'SCORE_PERCENT',0, 'SCORE_TOTAL_POSSIBLE',0, 'SCORE_TOTAL_QUESTIONS',0, 'SCORE_CURRENT_POSSIBLE',0, 'Q_SCORE_VALUE',0, 'Q_SCORE_VALUE_TOTAL',0, 'Q_SCORE_VALUE_PERCENT',0, 'Q_SCORE_CORRECT',0, 'Q_SCORE_INCORRECT',0, 'Q_SCORE_TOTAL',0, 'Q_SCORE_TOTAL_POSSIBLE',0, 'Q_SCORE_TOTAL_QUESTIONS',0, 'Q_SCORE_ANSWERED_QUESTIONS',0, 'Q_SCORE_CURRENT_POSSIBLE',0, 'Q_SCORE_VALUE_POSSIBLE',0, 'Q_SCORE_VALUE_TOTAL_REMAINING',0, 'Q_SCORE_OVERALL_PERCENT',0, 'Q_SCORE_COURSE_SUMMARY',"", 'Q_SCORE_PERCENT_POSSIBLE',0, 'Q_SCORE_COURSE_FINISHED',"", 'Q_SCORE_COURSE_PASSED',"", 'Q_COURSE_ADMINISTRATOR',"", 'Q_COURSE_ADMINISTRATOR_EMAIL',"", 'Q_TOPIC_NAME',new Object, 'Q_TOPIC_PASS_VALUE',new Object, 'Q_TOPIC_CRITICAL_PASS',new Object, 'Q_TOPIC_CURRENT_VALUE',new Object, 'Q_TOPIC_CURRENT_PERCENT',new Object, 'Q_TOPIC_CURRENT_POSSIBLE',new Object, 'Q_TOPIC_TOTAL_POSSIBLE',new Object, 'Q_TOPIC_CORRECT',new Object, 'Q_TOPIC_INCORRECT',new Object, 'Q_TOPIC_ANSWERED_QUESTIONS',new Object, 'Q_TOPIC_TOTAL_QUESTIONS',new Object, 'Q_TOPIC_VALUE_TOTAL_REMAINING',new Object, 'Q_TOPIC_OVERALL_PERCENT',new Object, 'Q_TOPIC_PASSED',new Object, 'Q_TOPIC_FINISHED',new Object, 'CHAPTER_PASSWORD',"", 'PUBLICATION_TIME',0, 'SYSTEM_TIME_YEAR',0, 'SYSTEM_TIME_MONTH',0, 'SYSTEM_TIME_DATE',0, 'SYSTEM_TIME_DAY',0, 'SYSTEM_TIME_HOUR',0, 'SYSTEM_TIME_MINUTE',0, 'SYSTEM_TIME_SECOND',0, 'SYSTEM_TIME_12HOUR',0, 'SYSTEM_TIME_AMPM',0, 'SYSTEM_DATE_FULL',"", 'SYSTEM_WIN_DIR',"", 'SYSTEM_WINSYS_DIR',"", 'SYSTEM_DOCUMENTS_DIR',"", 'SYSTEM_PROGRAMS_DIR',"", 'SYSTEM_PROGRAMDATA_DIR',"", 'SYSTEM_USERNAME',"", 'SYSTEM_PUBLICATION_DIR',"", 'SYSTEM_CD_DRIVE',"", 'SYSTEM_TEMP_DIR',"", 'PUBLICATION_TITLE',"", 'PUBLICATION_PAGE_TITLE',"", 'SYSTEM_COLOUR_DEPTH',0, 'SYSTEM_SCREEN_RES_X',0, 'SYSTEM_SCREEN_RES_Y',0, 'SYSTEM_OPERATING_SYS',0, 'SYSTEM_HAS_SOUND',"", 'LOGIN_USER_NAME',"", 'LOGIN_LEVEL_VALUE',"", 'LOGIN_LEVEL_NAME',"", 'LOGIN_FIRSTNAME',"", 'LOGIN_SURNAME',"", 'LOGIN_LEARNER_ID',"", 'LOGIN_TUTOR',"", 'LOGIN_DEPT',"", 'LOGIN_MANAGER',"", 'LOGIN_ORGANIZATION',"", 'LOGIN_USER_EMAIL',"", 'LOGIN_SCORE_EMAIL',"", 'USER_VOL',0, 'LMS_SCORE_RAW',0, 'LMS_SCORE_SCALED',0, 'LMS_COMPLETION_STATUS',0, 'LMS_LEARNER_ID',0, 'LMS_LEARNER_NAME',0, 'LMS_EXIT_MODE',0, 'LMS_MAX_TIME',0, 'LMS_LESSON_LOCATION',0, 'LMS_INITIALIZE_RETURN',0, 'LMS_COMMIT_RETURN',0, 'LMS_FINISH_RETURN',0, 'RADIO_GROUP_1_ID',-1, 'RADIO_GROUP_1_NAME',"", 'RADIO_GROUP_2_ID',-1, 'RADIO_GROUP_2_NAME',"", 'RADIO_GROUP_3_ID',-1, 'RADIO_GROUP_3_NAME',"", 'RADIO_GROUP_4_ID',-1, 'RADIO_GROUP_4_NAME',"");if(true){

var topics = new Array(1);
topics[0] = new DWCBTTopic('Topic 1', 100.000000, true, false);
DWCBTManager.instance().initialise(topics, '', '', '');
}var Chapter_1_ = new DWChapter();Chapter_1_.setObjectCode(new DWObjectCode(0,2,1));_DWPub.addChild(Chapter_1_);Page_1_=new DWPage('Page_1_',_oc,1024,768,1024,768,1024,768,false,0,false);Chapter_1_.addChild(Page_1_);</script><div id="Page_1D"><div id="Miorchat___1280x1024D"><svg width="770px" height="570px" style="position:absolute; "><g transform="translate(385.00,285.00)"><g><g id="Miorchat___1280x1024D_im"><image x="-356" y="-285" width="712" height="570" xlink:href="Miorchat - 1280x1024.jpg"></image></g></g></g></svg></div></div><script type="text/javascript">_c=new DWColour(255,255,255,1.0);_oc1=new DWObjectCode(1,3,1);Page_1_.init('Page_1D',function(){var p = this;p.Miorchat___1280x1024=new DWImage('Miorchat___1280x1024D',_oc1,'Miorchat - 1280x1024',515.0,375.0,770,570);Page_1_.addChildren(p.Miorchat___1280x1024);});Page_1_.setVariables();_DWPub.setCurrentPage(Page_1_);window.onload=_DWPub.start.bind(_DWPub);window.onunload=function(){};

</script>

</div>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 1
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

I forgot to mention one other important thing.  The Opus.js script is missing from your server.  I get a 404 error page.   You will need to manually upload that file to your server and it must be in the same directory as your page. 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 2
Most Valuable Participant ,
Jan 10, 2019

Copy link to clipboard

Copied

are you dropping the entire html code into an insert html box to add it to Muse... if yes then that should be fine

if you cut the muse page back to just this issue and send it to a drop box we can take a better look

fyi the other pages have issues as well

Screenshot (1900).png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 10, 2019 0
Community Beginner ,
Jan 10, 2019

Copy link to clipboard

Copied

Ok thanks. So do I need to upload the opus.js along with fixing every error in the link above?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 10, 2019 0
Community Beginner ,
Jan 10, 2019

Copy link to clipboard

Copied

Hi Ussnorway. Yes I'm using the insert html option in Muse. I have copied html script made with animate into muse before and it works fine. For some reason, this html is not working (I made it using a programme called Opus). What exactly do you want me to send in a drop box?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 10, 2019 0
Most Valuable Participant ,
Jan 10, 2019

Copy link to clipboard

Copied

open your .muse file in Muse

press the file - save as- and save the site as a new file with a different name

on the new .muse file remove anything that isn't part of this problem i.e, I don't want a 30 page mess of code

put that small as possible .muse into a drop box and share it so we can see | test the entire muse code without wasting time guessing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 10, 2019 1
Community Beginner ,
Jan 10, 2019

Copy link to clipboard

Copied

apologies, muse is pretty slow

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 10, 2019 0
Community Beginner ,
Jan 10, 2019

Copy link to clipboard

Copied

Dropbox - Problem folder - muse - Simplify your life

Sorry for the delay and thanks for your patience. I've provided a very simple example. I included the original html as well. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 10, 2019 0
Community Beginner ,
Jan 11, 2019

Copy link to clipboard

Copied

have you had any luck with this?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 11, 2019 0
Adobe Community Professional ,
Jan 11, 2019

Copy link to clipboard

Copied

I gave you my complete answer in reply #7.

What don't you understand?

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 11, 2019 0
LEGEND ,
Jan 11, 2019

Copy link to clipboard

Copied

I think, he is simply awaiting an answer of Ussnorway​ …

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 11, 2019 0
Most Valuable Participant ,
Jan 12, 2019

Copy link to clipboard

Copied

I've been traveling all day and just downloaded your file... will try to post something tomorrow after I've had time to look at it

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 12, 2019 0
Most Valuable Participant ,
Jan 12, 2019

Copy link to clipboard

Copied

I have had a look and the issue is the codes you are trying to use;

Screenshot (1907).png

Screenshot (1909).png

example site: http://ormaline.businesscatalyst.com/nibbittafe/index.html

  • your images aren't showing up because the path is wrong (green arrow) i work around this by placing the jpeg in a standard Muse image frame at the same Height | width as the image
  • you can not use plotting without giving the div a name to do that in Muse you must use a graphic style... just naming a div such and such in a html box is not correct

imo your design doesn't need plotting... it only needs to autoplay the sound when the page is loaded... for that you need the sound, Opus & htm to be in the same relative folder which I did by "add files to upload" ... this put them all in the assets folder

I then used an iframe to load the htm (its simple html) and placed the image on a layer above the iframe to hide it

Screenshot (1910).png

please test this option on your devices and let me know if you still need help

p.s, if you really do want plotting then bootstrap is what I would use but its more complex code so I'm keeping it simple for now

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 12, 2019 2
Community Beginner ,
Jan 13, 2019

Copy link to clipboard

Copied

Thanks Ussnorway. I'm going to give this a try and finger's crossed. However I think that I'll run into more problems due to the fact that a lot of my html is more interactive (buttons to play sounds, multiple pages etc.) where this method won't work. I assumed that html could just be copied and pasted as I'd done before as I don't really know how to write my own code.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2019 0
Community Beginner ,
Jan 13, 2019

Copy link to clipboard

Copied

I don't understand the errors etc that you posted, as I don't know how to write code. Are the lines that you crossed out in red not needed and what should I replace them with?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2019 0
Adobe Community Professional ,
Jan 13, 2019

Copy link to clipboard

Copied

Any text that has a red strikethrough means, take it out of your copy & paste.

<!DOCTYPE html>

<html>

<head><Title>Untitled1</Title>

corneliust83113803  wrote

I don't understand the errors etc that you posted, as I don't know how to write code.

Advanced projects usually require a fundamental knowledge of  code, file paths and HTML document structure   Short of that, you're pounding jigsaw puzzle pieces with a hammer and hoping everything fits together.  If that were not challenging enough,  you're trying to combine code that was generated by 2 completely different apps.  

USSNorway suggests another approach using an iframe linked to the Opus project page.  I think that might work if your Muse Layout can be made to accommodate the iframe.   I'm not a big fan of iframes because they often bring their own sets of problems.   But sometimes an imperfect solution is better than nothing.

So give that a try and see what happens.

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2019 0
Most Valuable Participant ,
Jan 13, 2019

Copy link to clipboard

Copied

corneliust83113803  wrote

Thanks Ussnorway. I'm going to give this a try and finger's crossed. However I think that I'll run into more problems due to the fact that a lot of my html is more interactive (buttons to play sounds, multiple pages etc.) where this method won't work.

the sound only autoplays because your Opus code tells it to

corneliust83113803  wrote

I assumed that html could just be copied and pasted as I'd done before

you assumed correct however the issue is that Opus is NOT html, its html + bits and those bits get blocked my Muse when you drop them into a html box without adjusting your codes

Muse was made for non-coders to use and people like Nancy or myself can always fine tune because we know how to code... Adobe Animate | Opus is not designed to work with Muse, they are for coders to control what happens inside a Google add, Adobe Edge Animate was made with Muse in mind and will be much better (for a coder) to get animations running inside Muse

corneliust83113803  wrote

I don't really know how to write my own code.

then my recommendation is that you stop trying to use code and use a widget instead... there are lots of sound widgets around, here is a free one to try Nomad Dreamers

better ones cost a bit $ but give you more options... let someone else do the code and you work on the design side of things?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2019 2