23 Replies Latest reply on Jan 13, 2019 5:12 PM by Ussnorway

    html5 embedding problem

    corneliust83113803 Level 1

      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.

        • 1. Re: html5 embedding problem
          Nancy OShea Adobe Community Professional & MVP

          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.

          • 2. Re: html5 embedding problem
            corneliust83113803 Level 1

            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

            • 3. Re: html5 embedding problem
              Nancy OShea Adobe Community Professional & MVP

              Please post a URL to one of the pages online.

              • 4. Re: html5 embedding problem
                Nancy OShea Adobe Community Professional & MVP

                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. 

                • 5. Re: html5 embedding problem
                  corneliust83113803 Level 1

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

                  • 6. Re: html5 embedding problem
                    corneliust83113803 Level 1

                    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

                    • 7. Re: html5 embedding problem
                      Nancy OShea Adobe Community Professional & MVP

                      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-left:5px; margin-top:5px; padding:10px; text-align:center; width:90%; "><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_.se tVariables();_DWPub.setCurrentPage(Page_1_);window.onload=_DWPub.start.bind(_DWPub);window .onunload=function(){};

                      </script>

                      </div>

                      </body>

                      </html>

                      • 8. Re: html5 embedding problem
                        Nancy OShea Adobe Community Professional & MVP

                        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. 

                        1 person found this helpful
                        • 9. Re: html5 embedding problem
                          Ussnorway Adobe Community Professional

                          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

                          • 10. Re: html5 embedding problem
                            corneliust83113803 Level 1

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

                            • 11. Re: html5 embedding problem
                              corneliust83113803 Level 1

                              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?

                              • 12. Re: html5 embedding problem
                                Ussnorway Adobe Community Professional

                                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

                                • 13. Re: html5 embedding problem
                                  corneliust83113803 Level 1

                                  apologies, muse is pretty slow

                                  • 14. Re: html5 embedding problem
                                    corneliust83113803 Level 1

                                    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. 

                                    • 15. Re: html5 embedding problem
                                      corneliust83113803 Level 1

                                      have you had any luck with this?

                                      • 16. Re: html5 embedding problem
                                        Nancy OShea Adobe Community Professional & MVP

                                        I gave you my complete answer in reply #7.

                                        What don't you understand?

                                        • 17. Re: html5 embedding problem
                                          Günter Heißenbüttel Adobe Community Professional

                                          I think, he is simply awaiting an answer of Ussnorway

                                          • 18. Re: html5 embedding problem
                                            Ussnorway Adobe Community Professional

                                            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

                                            • 19. Re: html5 embedding problem
                                              Ussnorway Adobe Community Professional

                                              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

                                              1 person found this helpful
                                              • 20. Re: html5 embedding problem
                                                corneliust83113803 Level 1

                                                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.

                                                • 21. Re: html5 embedding problem
                                                  corneliust83113803 Level 1

                                                  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?

                                                  • 22. Re: html5 embedding problem
                                                    Nancy OShea Adobe Community Professional & MVP

                                                    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.

                                                    • 23. Re: html5 embedding problem
                                                      Ussnorway Adobe Community Professional

                                                      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?