Embed Video in HTML5 page with JW Player
By Andrea Marchetti
@marchetti_design
Often when you want to insert a video in a web page, you do that using service like youtube and vimeo. It may happen that you want host the video on your server, in that case there may be problems on different Browsers and Mobile devices.
JW Player
To solve this problem we use JW Player, one of the best video player on the web. To download the player you have to register your email on the site:
http://www.jwplayer.com/download/
After that you can download the javascript file of the player.
Insert the file in your html page.
<script src="http://jwpsrv.com/library/MIOFILE.js"></script>
HTML
Html code needed:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><title>Video Html 5 Browser</title>
<!– JW Player Script –>
<script src="http://jwpsrv.com/library/FfMxTl3oEeSEiiIACxmInQ.js"></script>
</head>
<body><div id="mediaplayer"></div>
</body>
</html>
Javascript
Initialize the player. Below the div mediaplayer we add the code to define the path of the video and other options.
<script>
jwplayer("mediaplayer").setup({
file: "timelaps.mp4",
width: "100%",
height: "100%",
stretching: "bestfit",});
</script>
The video must be a .mp4 with maximum with of 1000px.
Responsive
To make the video player responsive we have to set height:100%, width: 100% and stretching: bestfit (in the intialization script).
CSS
Add the follow style in the header to make the player width as the window width.
<style>html,body { height:100%; width:100%; padding:0; margin:0; }
#mediaplayer{height:100%;width:100%; padding:0; margin:0;}</style>
Whit this code we make the player Responsive on every device. This solution is tested on Firefox, Chrome, Safari an IE8, iPhone and iPad.
Demo and Dwonload are available below, Stay Tuned!
Potrebbero interessarti:
i want to use jw player video in slider plz give me demo
Thank you very much