<!--[                                                                                                                                                                                                                                             
	Welcome,
	
	The Official Public European Netherlands Network - Shortname International - 	OPENN ®©™ 
	and in Dutch (Netherlands) OPENOMROEP or long name: Officiele Publieke Europese Nederlandse Omroep ®©™
	
	If you read this then you are on the Official Video Player source code
	The player 100% hosted on openn.eu so just enjoy the content
	in The high Quality Broadcast in HD UHD 4k 8k 16k Prepared.
	
	Twitter:
	Newsdesk Netherlands: @openomroep 
	Newsdesk World:       @politicsopenn 
	Newsdesk World:       @openn_world 
	Newsdesk Service:     @opennservice
	Newsdesk Music:       @musicopenn
	Newsdesk World:       @openn_eu
		 
	E-Mail: 
	info@openomroep.eu 	info@openn.eu
	
	Video Live video works only with:	
	https://npo.digital/live.html?src= URL OF THE LIVE FEED OR MP4 FL4 M3U8 M3U ETC..	
	https://npo.digital/live2.html?src= URL M3U8	

	The main website can be viewed on:
	https://openomroep.eu
	https://openn.eu	
	https://openn.nl
	https://npo.digital
	
	Facebook:
	on FB /openomroep
	
	Googleplus:
	https://plus.google.com/+opennnl
	
	Google Search:
	openomroep 
	europeseomroep
	EUROPESE OMROEP
	OPENN
		
	This Official Public European News Site is been generate from only official sources.
	From A NewsDesk Around The World - Maxium Power, ALL The News, OPENN For You!
	
	04-05-2018 video scripts updated

	
         _______                   _____                    _____                    _____                    _____          
        /::\    \                 /\    \                  /\    \                  /\    \                  /\    \         
       /::::\    \               /::\    \                /::\    \                /::\____\                /::\____\        
      /::::::\    \             /::::\    \              /::::\    \              /::::|   |               /::::|   |        
     /::::::::\    \           /::::::\    \            /::::::\    \            /:::::|   |              /:::::|   |        
    /:::/~~\:::\    \         /:::/\:::\    \          /:::/\:::\    \          /::::::|   |             /::::::|   |        
   /:::/    \:::\    \       /:::/__\:::\    \        /:::/__\:::\    \        /:::/|::|   |            /:::/|::|   |        
  /:::/    / \:::\    \     /::::\   \:::\    \      /::::\   \:::\    \      /:::/ |::|   |           /:::/ |::|   |        
 /:::/____/   \:::\____\   /::::::\   \:::\    \    /::::::\   \:::\    \    /:::/  |::|   | _____    /:::/  |::|   | _____  
|:::|    |     |:::|    | /:::/\:::\   \:::\____\  /:::/\:::\   \:::\    \  /:::/   |::|   |/\    \  /:::/   |::|   |/\    \ 
|:::|____|     |:::|    |/:::/  \:::\   \:::|    |/:::/__\:::\   \:::\____\/:: /    |::|   /::\____\/:: /    |::|   /::\____\
 \:::\    \   /:::/    / \::/    \:::\  /:::|____|\:::\   \:::\   \::/    /\::/    /|::|  /:::/    /\::/    /|::|  /:::/    /
  \:::\    \ /:::/    /   \/_____/\:::\/:::/    /  \:::\   \:::\   \/____/  \/____/ |::| /:::/    /  \/____/ |::| /:::/    / 
   \:::\    /:::/    /             \::::::/    /    \:::\   \:::\    \              |::|/:::/    /           |::|/:::/    /  
    \:::\__/:::/    /               \::::/    /      \:::\   \:::\____\             |::::::/    /            |::::::/    /   
     \::::::::/    /                 \::/____/        \:::\   \::/    /             |:::::/    /             |:::::/    /    
      \::::::/    /                   ~~               \:::\   \/____/              |::::/    /              |::::/    /     
       \::::/    /                                      \:::\    \                  /:::/    /               /:::/    /      
        \::/____/                                        \:::\____\                /:::/    /               /:::/    /       
         ~~                                               \::/    /                \::/    /                \::/    /        
                                                           \/____/                  \/____/                  \/____/         
	
																												 
																															 ]>
																															 <![endif]-->


<!DOCTYPE html>
<html>

  <head>

    <meta charset="utf-8"/>

    <title>EUROPESE OMROEP LIVE</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

       	<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
	<link rel="stylesheet" href="styleHLS.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

  </head>

  <body>
	<video class="afterglow" id="video" class="videoCentered" class="video-js" autoplay="autoplay" preload="auto" data-skin="dark" width="1280" height="720" data-autoresize="fit" data-volume="1.0" data-quality="hd" crossorigin="anonymous" /></video>
   <BR> <div class="main-container">
      <div id="controls">

        <div id="customButtons"></div>

        <select id="streamSelect" class="innerControls">
          <option value="" selected>*** SELECT A TV CHANNEL (click here) ***</option>
        </select>
<BR>
        <input id="streamURL" class="innerControls" type=text value=""/>

        <label class="innerControls">
          Enable streaming:
          <input id="enableStreaming" type=checkbox checked/>
        </label>

        <label class="innerControls">
          Auto-recover media-errors:
          <input id="autoRecoverError" type=checkbox checked/>
        </label>

        <label class="innerControls">
          Enable worker for transmuxing:
          <input id="enableWorker" type=checkbox checked/>
        </label>

        <label class="innerControls">
          Dump transmuxed fMP4 data:
          <input id="dumpfMP4" type=checkbox unchecked/>
        </label>

        <label class="innerControls">
          Widevine DRM license-server URL:
          <input id="widevineLicenseUrl" style="width: 50%"/>
        </label>

        <label class="innerControls">
          Level-cap'ing (max limit):
          <input id="levelCapping" style="width: 8em" type=number/>
        </label>

        <label class="innerControls">
          Default audio-codec:
          <input style="width: 8em" id="defaultAudioCodec"/>
        </label>

        <label class="innerControls">
          Metrics history (max limit, -1 is unlimited):
          <input id="limitMetrics" style="width: 8em" type=number/>
        </label>

        <label class="innerControls">
          Player size:
          <select id="videoSize" style="float:right;">
            <option value="240">Tiny (240p)</option>
            <option value="384">Small (384p)</option>
            <option value="480">Medium (480p)</option>
            <option value="720" selected>Large (720p)</option>
            <option value="1080">Huge (1080p)</option>
          </select>
        </label>

        <label class="innerControls">
          Current video-resolution:
          <span id="currentResolution">/</span>
        </label>

        <label class="innerControls">
          Permalink:&nbsp;
          <span id="StreamPermalink" style="width: 50%"></span>
        </label>

      </div>
<style>
video2  {
height:100%;
width:100%;
}
@font-face {
  font-family: 'Alien-Encounters';
  src: url('Alien-Encounters.eot'); /* IE9 Compat Modes */
  src: url('Alien-Encounters.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Alien-Encounters#Alien-Encounters') format('svg'); /* Legacy iOS */
       color: white;
color: white; 
color: white; text-shadow: black 0.1em 0.1em 0.2em;font-size: 15px;
}
video::-webkit-media-controls-panel {
    background-color: #161618;
}

video::-webkit-media-controls-volume-slider-container {
	background-color: cyan;
}

video::-webkit-media-controls-volume-slider {
	background-color: #1FB2B0;
}

video::-webkit-media-controls-timeline {
	background-color: #1FB2B0;
}
*{margin:0px;
padding:0px;
margin-bottom:auto;
box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
font-family: 'Alien-Encounters', Fallback, Alien-Encounters;               
color: white; text-shadow: black 0.1em 0.1em 0.2em;font-size: 15px;
}
option{margin:0px;
padding:0px;
margin-bottom:auto;
background-color: #ceefe3;
box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
font-family: 'Alien-Encounters', Fallback, Alien-Encounters;               
color: white; text-shadow: black 0.1em 0.1em 0.2em;font-size: 15px;
}
value{margin:0px;
padding:0px;
margin-bottom:auto;
background-color: #ceefe3;
box-shadow: 0 38px 30px -18px rgba(0, 0, 0, 0.5);
font-family: 'Alien-Encounters', Fallback, Alien-Encounters;               
color: white; text-shadow: black 0.1em 0.1em 0.2em;font-size: 15px;
}
</style>
      <br>

      <canvas id="bufferedCanvas" height="15" class="videoCentered" onclick="onClickBufferedRange(event);"></canvas>

      <br><br>

      <label class="center">Status:</label>
      <pre id="statusOut" class="center" style="white-space: pre-wrap;"></pre>

      <label class="center">Error:</label>
      <pre id="errorOut" class="center" style="white-space: pre-wrap;"></pre>
      
      <div class="center" style="text-align: center;" id="toggleButtons">
        <button type="button" class="btn btn-sm" onclick="toggleTab('playbackControlTab');">Playback</button>
        <button type="button" class="btn btn-sm" onclick="toggleTab('qualityLevelControlTab');">Quality-levels</button>
        <button type="button" class="btn btn-sm" onclick="toggleTab('audioTrackControlTab');">Audio-tracks</button>
        <button type="button" class="btn btn-sm" onclick="toggleTab('statsDisplayTab');">Buffer &amp; Statistics</button>
        <button type="button" class="btn btn-sm" onclick="toggleTab('metricsDisplayTab'); showMetrics();">Real-time metrics</button>
      </div>

      <div class="center" id='playbackControlTab'>
        <h4>Playback</h4>
        <center>
            <p>
              <button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].play()">Play</button>
              <button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].pause()">Pause</button>
            </p>

            <p>
              <button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].currentTime-=10">- 10 s</button>
              <button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].currentTime+=10">+ 10 s</button>
            </p>

            <p>
              <button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].currentTime=$('#seek_pos').val()">Seek to </button>
              <input type="text" id='seek_pos' size="8" onkeydown="if(window.event.keyCode=='13'){$('#video')[0].currentTime=$('#seek_pos').val();}">
            </p>

            <p>
              <button type="button" class="btn btn-xs btn-warning" onclick="hls.attachMedia($('#video')[0])">Attach media</button>
              <button type="button" class="btn btn-xs btn-warning" onclick="hls.detachMedia()">Detach media</button>
            </p>

            <p>
              <button type="button" class="btn btn-xs btn-warning" onclick="hls.startLoad()">Start loading</button>
              <button type="button" class="btn btn-xs btn-warning" onclick="hls.stopLoad()">Stop loading</button>
            </p>

            <p>
              <button type="button" class="btn btn-xs btn-warning" onclick="hls.recoverMediaError()">Recover media-error</button>
            </p>

            <p>
              <button type="button" class="btn btn-xs btn-warning" onclick="createfMP4('audio');">Create audio-fmp4</button>
              <button type="button" class="btn btn-xs btn-warning" onclick="createfMP4('video')">Create video-fmp4</button>
            </p>
        </center>

      </div>

      <div class="center" id='qualityLevelControlTab'>
        <h4>Quality-levels</h4>
        <center>
            <table>
                <tr>
                  <td>
                    <p>Currently played level:</p>
                  </td>
                  <td>
                    <div id="currentLevelControl" style="display: inline;"></div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <p>Next level loaded:</p>
                  </td>
                  <td>
                    <div id="nextLevelControl" style="display: inline;"></div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <p>Currently loaded level:</p>
                  </td>
                  <td>
                    <div id="loadLevelControl" style="display: inline;"></div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <p>Cap-limit level (maximum):</p>
                  </td>
                  <td>
                    <div id="levelCappingControl" style="display: inline;"></div>
                  </td>
                </tr>
              </table>
        </center>
      </div>

      <div class="center" id='audioTrackControlTab'>
        <h4>Audio-tracks</h4>
        <table>
          <tr>
            <td>Current audio-track:</td>
            <td width=10px>None selected</td>
            <td> <div id="audioTrackControl" style="display: inline;"></div> </td>
          </tr>
        </table>
      </div>

      <div class="center" id='metricsDisplayTab'>
        <h4>Real-time metrics</h4>
        <div id="metricsButton">
          <button type="button" class="btn btn-xs btn-info" onclick="$('#metricsButtonWindow').toggle();$('#metricsButtonFixed').toggle();windowSliding=!windowSliding; refreshCanvas()">toggle sliding/fixed window</button><br>
          <div id="metricsButtonWindow">
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeSetSliding(0)">window ALL</button>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeSetSliding(2000)">2s</button>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeSetSliding(5000)">5s</button>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeSetSliding(10000)">10s</button>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeSetSliding(20000)">20s</button>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeSetSliding(30000)">30s</button>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeSetSliding(60000)">60s</button>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeSetSliding(120000)">120s</button><br>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeZoomIn()">Window Zoom In</button>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeZoomOut()">Window Zoom Out</button><br>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeSlideLeft()"> <<< Window Slide </button>
            <button type="button" class="btn btn-xs btn-info" onclick="timeRangeSlideRight()">Window Slide >>> </button><br>
          </div>
          <div id="metricsButtonFixed">
            <button type="button" class="btn btn-xs btn-info" onclick="windowStart=$('#windowStart').val()">fixed window start(ms)</button>
            <input type="text" id='windowStart' defaultValue="0" size="8" onkeydown="if(window.event.keyCode=='13'){windowStart=$('#windowStart').val();}">
            <button type="button" class="btn btn-xs btn-info" onclick="windowEnd=$('#windowEnd').val()">fixed window end(ms)</button>
            <input type="text" id='windowEnd' defaultValue="10000" size="8" onkeydown="if(window.event.keyCode=='13'){windowEnd=$('#windowEnd').val();}"><br>
          </div>
          <button type="button" class="btn btn-xs btn-success" onclick="goToMetrics()" style="font-size:18px">metrics link</button>
          <button type="button" class="btn btn-xs btn-success" onclick="goToMetricsPermaLink()" style="font-size:18px">metrics permalink</button>
          <button type="button" class="btn btn-xs btn-success" onclick="copyMetricsToClipBoard()" style="font-size:18px">copy metrics to clipboard</button>
          <canvas id="bufferTimerange_c" width="640" height="100" style="border:1px solid #000000" onmousedown="timeRangeCanvasonMouseDown(event)" onmousemove="timeRangeCanvasonMouseMove(event)" onmouseup="timeRangeCanvasonMouseUp(event)" onmouseout="timeRangeCanvasonMouseOut(event);"></canvas>
          <canvas id="bitrateTimerange_c" width="640" height="100" style="border:1px solid #000000;"></canvas>
          <canvas id="bufferWindow_c" width="640" height="100" style="border:1px solid #000000" onmousemove="windowCanvasonMouseMove(event);"></canvas>
          <canvas id="videoEvent_c" width="640" height="15" style="border:1px solid #000000;"></canvas>
          <canvas id="loadEvent_c" width="640" height="15" style="border:1px solid #000000;"></canvas><br>
        </div>
      </div>

      <div class="center" id='statsDisplayTab'>
        <h4>Buffer &amp; Statistics</h4>
        <label>Buffer state:</label>
        <pre id="bufferedOut"></pre>
        <label>General stats:</label>
        <pre id='statisticsOut'></pre>
      </div>

    </div>

    <footer>
      <br><br><br><br><br><br>
    </footer>

    <!-- Demo page required libs -->
    <script src="canvas.js"></script>
    <script src="metrics.js"></script>
    <script src="jsonpack.js"></script>

    <!-- Compiled lib dist -->
    <script src="../dist/hls.js"></script>
    <!-- Compiled demo main -->
    <script src="../dist/hls-demo2.js"></script>
	<script type="text/javascript" src="//npo.digital/afterglow.min.js"></script>
	<script type="text/javascript">
	</script>
		
		<!-- Setup EVP -->
	
	<style>video {
   object-fit: cover;
	width: 100%    !important;
  height: auto   !important;
}
</style>
  </body>
</html>