Fullscreen Web-App Media Player

 

To run Wimpy as a web-app so it displays fullscreen and automatically adjusts to a device's screen size to fill the entire browser window, the setup is as follows:

1. Define CSS rules so that
    - The HTML and BODY are set to 100%, with no margin or padding.
    - A rule for the player instance DIV set to 100%
2. Set up the HTML meta tags so the page is viewed as a web-app.
3. Set the "responsive" player option on the player.
4. Add a script to prevent the page from "bouncing"

The wimpy download package contains an example HTML file with all this stuff already set up.

Example

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Wimpy Player - Fullscreen Web App</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">


<!-- The following META tags are used to inform mobile-device browsers to present this page in full-screen mode.-->
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Wimpy Player" />


<style type="text/css" media="screen">
	/* Make page fill device window */
    html, body {
        width : 100%;
        height : 100%;
        margin:0;
        padding:0;
        overflow:hidden;
        background-color:#484848;
    }
	/* For the Player Instance DIV */
    .full {
        left:0px;
        top:0px;
        width : 100%;
        height : 100%;
    }
</style>


<!-- Prevent entire page from "bouncing" -->
<script>document.addEventListener('touchmove',function(event){event.preventDefault();},false);</script>


<!-- Wimpy Engine -->
<!-- NOTE: Change WIMPY_INSTALLATION_FOLDER to target the wimpy.js file correctly. -->
<script src="wimpy.js"></script>



</head>
<body>

<!-- Set the DIV's class to "full" and set the "responsive" option 
so the player automatically adjusts to fit snuggly within the view. 
The responsive option also causes the player to adjust itself when 
the orientation changes (e.g. from landscape to portrate) -->

<!-- NOTE: Change data-media to target media files or a playlist. -->
<div class="full" data-wimpyPlayer data-responsive data-media="song1.mp3|song2.mp3|song3.mp3"></div>


</body>
</html>

 

See Also

- Player Sizing