简体   繁体   中英

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

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>

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>

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>

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM