How can I play a video from splash screen in main page?












1














I have two html files, one is Splash screen and another is main.



The splash have a Go! button so clicking will redirect user to main.



How can I play a video in main, once I click on Go! button?
For some reason I cant use autoplay in the main.



Here is the Splash Screen code :






function myFunction() {
window.open("themes/default/main.html");
}

body {
text-align: center;
}

<div class="popup" onclick="myFunction()" >
<button>Go!</button>
</div>





And a simple code for main.html:



<video muted loop id="myVideo">
<source src="xmb.mp4" type="video/mp4">
</video>









share|improve this question





























    1














    I have two html files, one is Splash screen and another is main.



    The splash have a Go! button so clicking will redirect user to main.



    How can I play a video in main, once I click on Go! button?
    For some reason I cant use autoplay in the main.



    Here is the Splash Screen code :






    function myFunction() {
    window.open("themes/default/main.html");
    }

    body {
    text-align: center;
    }

    <div class="popup" onclick="myFunction()" >
    <button>Go!</button>
    </div>





    And a simple code for main.html:



    <video muted loop id="myVideo">
    <source src="xmb.mp4" type="video/mp4">
    </video>









    share|improve this question



























      1












      1








      1







      I have two html files, one is Splash screen and another is main.



      The splash have a Go! button so clicking will redirect user to main.



      How can I play a video in main, once I click on Go! button?
      For some reason I cant use autoplay in the main.



      Here is the Splash Screen code :






      function myFunction() {
      window.open("themes/default/main.html");
      }

      body {
      text-align: center;
      }

      <div class="popup" onclick="myFunction()" >
      <button>Go!</button>
      </div>





      And a simple code for main.html:



      <video muted loop id="myVideo">
      <source src="xmb.mp4" type="video/mp4">
      </video>









      share|improve this question















      I have two html files, one is Splash screen and another is main.



      The splash have a Go! button so clicking will redirect user to main.



      How can I play a video in main, once I click on Go! button?
      For some reason I cant use autoplay in the main.



      Here is the Splash Screen code :






      function myFunction() {
      window.open("themes/default/main.html");
      }

      body {
      text-align: center;
      }

      <div class="popup" onclick="myFunction()" >
      <button>Go!</button>
      </div>





      And a simple code for main.html:



      <video muted loop id="myVideo">
      <source src="xmb.mp4" type="video/mp4">
      </video>





      function myFunction() {
      window.open("themes/default/main.html");
      }

      body {
      text-align: center;
      }

      <div class="popup" onclick="myFunction()" >
      <button>Go!</button>
      </div>





      function myFunction() {
      window.open("themes/default/main.html");
      }

      body {
      text-align: center;
      }

      <div class="popup" onclick="myFunction()" >
      <button>Go!</button>
      </div>






      javascript html video






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 12 at 5:39









      Foo

      1




      1










      asked Nov 12 at 5:32









      SCORPION

      62




      62
























          3 Answers
          3






          active

          oldest

          votes


















          1














          Try adding the words 'controls autoplay' in the video tag as given below.



          <video muted loop id="myVideo" controls autoplay>
          <source src="xmb.mp4" type="video/mp4">
          </video>





          share|improve this answer





























            0















            For some reason I cant use autoplay in the main.




            You could use this code in main.html before body tag



            <script>
            document.getElementById('myVideo').play();
            </script>


            or



            <script>
            document.getElementById('myVideo').setAttribute("autoplay", "true");
            </script>


            Another method



            Play video only if you are opening from splash. Pass a parameter in url and check of that in main.html.



            function myFunction() {
            window.open("themes/default/main.html?play=1");
            }


            In main.html



            <script>
            function getUrlParameter(name) {
            name = name.replace(/[/, '\[').replace(/[]]/, '\]');
            var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
            };

            if (getUrlParameter('play' == '1') {
            document.getElementById('myVideo').play();
            })
            </script>





            share|improve this answer































              0














              Change in your splash screen code function to



              function myFunction() {
              window.open("themes/default/main.html?s=autoplay");
              }


              and add your main.html to



              <script>
              var status = window.location.search.substring(3);
              if (status == 'autoplay')
              {
              var vid = document.getElementById('myVideo');
              vid.play();
              }
              </script>





              share|improve this answer





















                Your Answer






                StackExchange.ifUsing("editor", function () {
                StackExchange.using("externalEditor", function () {
                StackExchange.using("snippets", function () {
                StackExchange.snippets.init();
                });
                });
                }, "code-snippets");

                StackExchange.ready(function() {
                var channelOptions = {
                tags: "".split(" "),
                id: "1"
                };
                initTagRenderer("".split(" "), "".split(" "), channelOptions);

                StackExchange.using("externalEditor", function() {
                // Have to fire editor after snippets, if snippets enabled
                if (StackExchange.settings.snippets.snippetsEnabled) {
                StackExchange.using("snippets", function() {
                createEditor();
                });
                }
                else {
                createEditor();
                }
                });

                function createEditor() {
                StackExchange.prepareEditor({
                heartbeatType: 'answer',
                autoActivateHeartbeat: false,
                convertImagesToLinks: true,
                noModals: true,
                showLowRepImageUploadWarning: true,
                reputationToPostImages: 10,
                bindNavPrevention: true,
                postfix: "",
                imageUploader: {
                brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                allowUrls: true
                },
                onDemand: true,
                discardSelector: ".discard-answer"
                ,immediatelyShowMarkdownHelp:true
                });


                }
                });














                draft saved

                draft discarded


















                StackExchange.ready(
                function () {
                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256397%2fhow-can-i-play-a-video-from-splash-screen-in-main-page%23new-answer', 'question_page');
                }
                );

                Post as a guest















                Required, but never shown

























                3 Answers
                3






                active

                oldest

                votes








                3 Answers
                3






                active

                oldest

                votes









                active

                oldest

                votes






                active

                oldest

                votes









                1














                Try adding the words 'controls autoplay' in the video tag as given below.



                <video muted loop id="myVideo" controls autoplay>
                <source src="xmb.mp4" type="video/mp4">
                </video>





                share|improve this answer


























                  1














                  Try adding the words 'controls autoplay' in the video tag as given below.



                  <video muted loop id="myVideo" controls autoplay>
                  <source src="xmb.mp4" type="video/mp4">
                  </video>





                  share|improve this answer
























                    1












                    1








                    1






                    Try adding the words 'controls autoplay' in the video tag as given below.



                    <video muted loop id="myVideo" controls autoplay>
                    <source src="xmb.mp4" type="video/mp4">
                    </video>





                    share|improve this answer












                    Try adding the words 'controls autoplay' in the video tag as given below.



                    <video muted loop id="myVideo" controls autoplay>
                    <source src="xmb.mp4" type="video/mp4">
                    </video>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 12 at 5:46









                    Roohi Zuwairiyah

                    10811




                    10811

























                        0















                        For some reason I cant use autoplay in the main.




                        You could use this code in main.html before body tag



                        <script>
                        document.getElementById('myVideo').play();
                        </script>


                        or



                        <script>
                        document.getElementById('myVideo').setAttribute("autoplay", "true");
                        </script>


                        Another method



                        Play video only if you are opening from splash. Pass a parameter in url and check of that in main.html.



                        function myFunction() {
                        window.open("themes/default/main.html?play=1");
                        }


                        In main.html



                        <script>
                        function getUrlParameter(name) {
                        name = name.replace(/[/, '\[').replace(/[]]/, '\]');
                        var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
                        var results = regex.exec(location.search);
                        return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
                        };

                        if (getUrlParameter('play' == '1') {
                        document.getElementById('myVideo').play();
                        })
                        </script>





                        share|improve this answer




























                          0















                          For some reason I cant use autoplay in the main.




                          You could use this code in main.html before body tag



                          <script>
                          document.getElementById('myVideo').play();
                          </script>


                          or



                          <script>
                          document.getElementById('myVideo').setAttribute("autoplay", "true");
                          </script>


                          Another method



                          Play video only if you are opening from splash. Pass a parameter in url and check of that in main.html.



                          function myFunction() {
                          window.open("themes/default/main.html?play=1");
                          }


                          In main.html



                          <script>
                          function getUrlParameter(name) {
                          name = name.replace(/[/, '\[').replace(/[]]/, '\]');
                          var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
                          var results = regex.exec(location.search);
                          return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
                          };

                          if (getUrlParameter('play' == '1') {
                          document.getElementById('myVideo').play();
                          })
                          </script>





                          share|improve this answer


























                            0












                            0








                            0







                            For some reason I cant use autoplay in the main.




                            You could use this code in main.html before body tag



                            <script>
                            document.getElementById('myVideo').play();
                            </script>


                            or



                            <script>
                            document.getElementById('myVideo').setAttribute("autoplay", "true");
                            </script>


                            Another method



                            Play video only if you are opening from splash. Pass a parameter in url and check of that in main.html.



                            function myFunction() {
                            window.open("themes/default/main.html?play=1");
                            }


                            In main.html



                            <script>
                            function getUrlParameter(name) {
                            name = name.replace(/[/, '\[').replace(/[]]/, '\]');
                            var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
                            var results = regex.exec(location.search);
                            return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
                            };

                            if (getUrlParameter('play' == '1') {
                            document.getElementById('myVideo').play();
                            })
                            </script>





                            share|improve this answer















                            For some reason I cant use autoplay in the main.




                            You could use this code in main.html before body tag



                            <script>
                            document.getElementById('myVideo').play();
                            </script>


                            or



                            <script>
                            document.getElementById('myVideo').setAttribute("autoplay", "true");
                            </script>


                            Another method



                            Play video only if you are opening from splash. Pass a parameter in url and check of that in main.html.



                            function myFunction() {
                            window.open("themes/default/main.html?play=1");
                            }


                            In main.html



                            <script>
                            function getUrlParameter(name) {
                            name = name.replace(/[/, '\[').replace(/[]]/, '\]');
                            var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
                            var results = regex.exec(location.search);
                            return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
                            };

                            if (getUrlParameter('play' == '1') {
                            document.getElementById('myVideo').play();
                            })
                            </script>






                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited Nov 12 at 5:59

























                            answered Nov 12 at 5:52









                            kiranvj

                            12.2k23350




                            12.2k23350























                                0














                                Change in your splash screen code function to



                                function myFunction() {
                                window.open("themes/default/main.html?s=autoplay");
                                }


                                and add your main.html to



                                <script>
                                var status = window.location.search.substring(3);
                                if (status == 'autoplay')
                                {
                                var vid = document.getElementById('myVideo');
                                vid.play();
                                }
                                </script>





                                share|improve this answer


























                                  0














                                  Change in your splash screen code function to



                                  function myFunction() {
                                  window.open("themes/default/main.html?s=autoplay");
                                  }


                                  and add your main.html to



                                  <script>
                                  var status = window.location.search.substring(3);
                                  if (status == 'autoplay')
                                  {
                                  var vid = document.getElementById('myVideo');
                                  vid.play();
                                  }
                                  </script>





                                  share|improve this answer
























                                    0












                                    0








                                    0






                                    Change in your splash screen code function to



                                    function myFunction() {
                                    window.open("themes/default/main.html?s=autoplay");
                                    }


                                    and add your main.html to



                                    <script>
                                    var status = window.location.search.substring(3);
                                    if (status == 'autoplay')
                                    {
                                    var vid = document.getElementById('myVideo');
                                    vid.play();
                                    }
                                    </script>





                                    share|improve this answer












                                    Change in your splash screen code function to



                                    function myFunction() {
                                    window.open("themes/default/main.html?s=autoplay");
                                    }


                                    and add your main.html to



                                    <script>
                                    var status = window.location.search.substring(3);
                                    if (status == 'autoplay')
                                    {
                                    var vid = document.getElementById('myVideo');
                                    vid.play();
                                    }
                                    </script>






                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered Nov 12 at 6:22









                                    karanusret

                                    134




                                    134






























                                        draft saved

                                        draft discarded




















































                                        Thanks for contributing an answer to Stack Overflow!


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid



                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.


                                        To learn more, see our tips on writing great answers.





                                        Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                        Please pay close attention to the following guidance:


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid



                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.


                                        To learn more, see our tips on writing great answers.




                                        draft saved


                                        draft discarded














                                        StackExchange.ready(
                                        function () {
                                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256397%2fhow-can-i-play-a-video-from-splash-screen-in-main-page%23new-answer', 'question_page');
                                        }
                                        );

                                        Post as a guest















                                        Required, but never shown





















































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown

































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown







                                        Popular posts from this blog

                                        Florida Star v. B. J. F.

                                        Error while running script in elastic search , gateway timeout

                                        Adding quotations to stringified JSON object values