Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  
​
  <!-- head section -->
<!-- skin -->
<link rel="stylesheet" href="https://releases.flowplayer.org/7.2.6/skin/skin.css">
<!-- hls.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.10.1/hls.light.min.js"></script>
<!-- flowplayer -->
<script src="https://releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>
​
<!-- body section -->
<div id="player"></div>
  
  <div data-live="true" data-ratio="0" data-share="false" class="flowplayer">
 
   <video data-title="Live stream">
<source type="application/x-mpegurl"
        src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8">
   </video>
 
</div>
​
​
</body>
</html>
 
.flowplayer {
  background-color: #00abcd;
   width:300px;
  height:170px;
}
.flowplayer .fp-color-play {
  fill: #eee;
}
​
a { display:none; }
​
.fp-engine { 
  width:100%; 
  height:auto; }
​
​
​
div.fp-waiting {
  display:none;
}
​
.main { 
position:relative;
}
​
#livevideo { 
  background:black;
  width:100%; 
  height:200px;
}
​
#epg {
  position:absolute;
  top:0px;
  background:blue;
  width:100%; 
  height:200px;
}  
​
#livebox { 
  position:absolute;
  right:0px;
width:100px;
height:50px;
background:white;
}
​
​
 
      flowplayer('#player', {
            live: true,  // set if it's a live stream          
            ratio: 9/16, // set the aspect ratio of the stream
            clip: {
                sources: [
                    // path to the HLS m3u8
                    { type: "application/x-mpegurl", src: "https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"},
        
                ]
            }
        });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers