CODEWITHSUNDEEP
javascripthtmlvideo
SCORPION
SCORPION

Reputation: 11

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>

Upvotes: 1

Views: 1175

Answers (3)

karanusret
karanusret

Reputation: 15

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>

Upvotes: 0

kiranvj
kiranvj

Reputation: 34147

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>

Upvotes: 0

Roohi Zuwairiyah
Roohi Zuwairiyah

Reputation: 363

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>

Upvotes: 1

Related Questions