io-st

<div class="container">
    <div class="column add-bottom">
        <div id="mainwrap">
            <div id="nowPlay">
                <span id="npAction">Paused...</span><span id="npTitle"></span>
            </div>
            <div id="audiowrap">
                <div id="audio0">
                    <audio id="audio1" preload controls>Your browser does not support HTML5 Audio! 😢</audio>
                </div>

io-st

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/plyr@3/dist/plyr.css">
<link rel="stylesheet" href="./style.ccs">

<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<script src="https://unpkg.com/plyr@3"></script>
<script src="./plyr-hls.js"></script>

<div class="container">
  <video controls crossorigin playsinline>

io-st

<link href="https://cdn.plyr.io/3.6.9/plyr.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />

<script src="https://cdn.polyfill.io/v3/polyfill.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"></script>
<script src="https://cdn.plyr.io/3.6.9/plyr.js"></script>
<!-- script src="https://cdn.jsdelivr.net/npm/hls.js@1.0.11/dist/hls.min.js"></script -->
<!-- script src="https://vdo.cy/cdnjs/plyr-hls.js"></script -->
<script src="plyr.js"></script>

<div class="container">

io-st

<link href="https://unpkg.com/plyr@3/dist/plyr.css" rel="stylesheet" />
<link href="./style.css" rel="stylesheet" />

<div class="container">
	<video controls crossorigin playsinline poster="https://VDO.cy/Soe0Woo3/paris-mafia-photo-by-XPS-unsplash-720p.jpeg" controls width="640" height="360"></video>
</div>
<!-- Plyr resources and browser polyfills are specified in the pen settings -->
<!-- Hls.js 0.9.x and 0.10.x both have critical bugs affecting this demo. Using fixed git hash to when it was working (0.10.0 pre-release), until https://github.com/video-dev/hls.js/issues/1790 has been resolved -->
<script src="https://cdn.rawgit.com/video-dev/hls.js/18bb552/dist/hls.min.js"></script>

io-st

<div class="container">
	<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
		 <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
			<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
			<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">

			<!-- Caption files -->
			<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
					default>
			<track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">

io-st

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/alt/video-js-cdn.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.0.2/videojs-contrib-hls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="script.js"></script>

<input type="text" id="url" style="width:100%" value="https://p2p.cy/Soe0Woo3/output-360p.m3u8"> <input type="button" id="btn" value="play">
<br><br>

<video id="video" class="video-js vjs-default-skin" preload="none" crossorigin="true" controls width="auto" height="320" controls>

io-st

<h1>👋 Hallo Welt!</h1>