javascript - How to play a video from splash screen in main page?

Javascript - How to play a video from splash screen in main page?

To play a video from a splash screen and then transition to the main page in a web application, you can use HTML5 video elements along with JavaScript to control the flow. Here's a step-by-step approach to achieve this:

Step-by-Step Approach

  1. Create a Splash Screen with Video

    Start by creating a splash screen in your HTML, which will contain the video element. You can set up a basic structure like this:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Splash Screen</title> <style> body, html { margin: 0; height: 100%; } .splash-screen { display: flex; justify-content: center; align-items: center; height: 100%; background-color: black; color: white; font-family: Arial, sans-serif; } .splash-video { width: 100%; height: 100%; } </style> </head> <body> <div class="splash-screen"> <video class="splash-video" autoplay muted> <source src="path_to_your_video.mp4" type="video/mp4"> <!-- Add other video sources for different formats if needed --> Your browser does not support the video tag. </video> </div> <script> // JavaScript to control video playback and transition to main page const videoElement = document.querySelector('.splash-video'); // Add event listener to go to main page when video ends videoElement.addEventListener('ended', function() { // Redirect to main page or hide splash screen and show main content window.location.href = 'main_page.html'; // Replace with your main page URL }); </script> </body> </html>

  2. Style and Script Explanation:

    • HTML Structure: The video element inside the .splash-screen div plays the video (autoplay starts playing the video automatically and muted ensures it plays without sound).
    • Event Listener: The ended event listener on the video element triggers when the video finishes playing. When this happens, you can redirect to the main page using window.location.href.

  3. Main Page:

    Once the video ends, the script redirects the user to the main page (main_page.html in this example). Ensure your main page (main_page.html) contains the necessary content and scripts for your application.

Notes:

  • Video Formats: Provide video sources (<source> elements) for different formats (e.g., MP4, WebM) to ensure compatibility across different browsers.
  • Accessibility: Include fallback content within the video element (e.g., text or images) for browsers that do not support video playback.
  • Responsive Design: Ensure your CSS styling (splash-screen and splash-video) is responsive to handle different screen sizes and devices.

By following these steps, you can create a splash screen with a video that automatically transitions to your main page once the video playback completes. Adjust the video path, styling, and redirection URL (window.location.href) to fit your application's requirements.

Examples

  1. Query: How to display a video as a splash screen and transition to the main page in JavaScript?

    • Description: This query seeks a method to show a video as a splash screen and then navigate to the main page once the video finishes.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Splash Screen with Video</title> <style> #video-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 9999; } #main-page { display: none; } </style> </head> <body> <div id="video-container"> <video id="splash-video" width="100%" height="100%" autoplay muted onended="showMainPage()"> <source src="splash-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div id="main-page"> <!-- Content of your main page --> <h1>Welcome to the Main Page</h1> </div> <script> function showMainPage() { document.getElementById('video-container').style.display = 'none'; document.getElementById('main-page').style.display = 'block'; } </script> </body> </html>
      This HTML and JavaScript code displays a video (splash-video.mp4) fullscreen as a splash screen. When the video ends (onended event), it triggers the showMainPage() function to hide the video container and display the main page content.

  2. Query: How to autoplay a video on a splash screen and transition to the main page in JavaScript?

    • Description: This query focuses on automatically playing a video on a splash screen and then smoothly transitioning to the main page afterward.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Splash Screen with Autoplay Video</title> <style> #video-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 9999; } #main-page { display: none; } </style> </head> <body> <div id="video-container"> <video id="splash-video" width="100%" height="100%" autoplay muted> <source src="splash-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div id="main-page"> <!-- Content of your main page --> <h1>Welcome to the Main Page</h1> </div> <script> document.getElementById('splash-video').addEventListener('ended', function() { document.getElementById('video-container').style.display = 'none'; document.getElementById('main-page').style.display = 'block'; }); </script> </body> </html>
      This code uses the autoplay attribute on the <video> tag to automatically play the video (splash-video.mp4). When the video ends (ended event), it hides the video container and displays the main page content.

  3. Query: JavaScript code to implement a splash screen with a video background and transition to the main page.

    • Description: This query looks for JavaScript code to set up a splash screen with a video background and smoothly transition to the main page.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Splash Screen with Video Background</title> <style> #splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #000; z-index: 9999; } #splash-video { width: 100%; height: 100%; object-fit: cover; } #main-page { display: none; } </style> </head> <body> <div id="splash-screen"> <video id="splash-video" autoplay muted onended="showMainPage()"> <source src="splash-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div id="main-page"> <!-- Content of your main page --> <h1>Welcome to the Main Page</h1> </div> <script> function showMainPage() { document.getElementById('splash-screen').style.display = 'none'; document.getElementById('main-page').style.display = 'block'; } </script> </body> </html>
      This HTML/CSS/JavaScript code sets up a full-screen splash screen with a video background (splash-video.mp4). When the video ends (onended event), it hides the splash screen and displays the main page content.

  4. Query: How to implement a JavaScript splash screen with a video and transition to the main content?

    • Description: This query seeks an implementation example of a splash screen with a video background that transitions smoothly to the main content.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Splash Screen with Video Transition</title> <style> #splash-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 9999; } #main-content { display: none; } </style> </head> <body> <div id="splash-container"> <video id="splash-video" width="100%" height="100%" autoplay muted onended="showMainContent()"> <source src="splash-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div id="main-content"> <!-- Main page content --> <h1>Welcome to the Main Content</h1> </div> <script> function showMainContent() { document.getElementById('splash-container').style.display = 'none'; document.getElementById('main-content').style.display = 'block'; } </script> </body> </html>
      This code sets up a splash screen with a video (splash-video.mp4) that automatically plays (autoplay) muted (muted). When the video ends (onended event), it hides the splash screen and displays the main content.

  5. Query: JavaScript code for a splash screen with a video background and transitioning to the main page.

    • Description: This query looks for JavaScript code examples to create a splash screen with a video background and then transition to the main page.
    • Code:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Splash Screen with Video Background</title> <style> #splash-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 9999; } #main-content { display: none; } </style> </head> <body> <div id="splash-container"> <video id="splash-video" width="100%" height="100%" autoplay muted onended="showMainContent()"> <source src="splash-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div id="main-content"> <!-- Main page content --> <h1>Welcome to the Main Content</h1> </div> <script> function showMainContent() { document.getElementById('splash-container').style.display = 'none'; document.getElementById('main-content').style.display = 'block'; } </script> </body> </html>
      This HTML/CSS/JavaScript sets up a full-screen splash screen with a video background (splash-video.mp4). After the video ends (onended event), it hides the splash screen and displays the main content.

More Tags

proto archive has-many-through launchctl command-prompt virtualscroll dispatch-async camunda cucumber-junit webpack-dev-server

More Programming Questions

More Various Measurements Units Calculators

More Biochemistry Calculators

More Chemical thermodynamics Calculators

More Investment Calculators