HeNy Bn-Hamed HeNy007

HLS Streaming with settings Quality and Captions - plyr io

Yout can settings Quality of video and select Subtitle in your video in the Http Live Streaming (HLS) watermark by Insnesia.com

awesome responsive slider

A nice and simple CSS3 only button, built using box-shadow, text-shadow and gradients.

In the css i've broken it down so you can easily see how its built.

	<!--
	Who doesn't love Netflix?
	With this code you can utilize JW player and wrap my Netflix like skin around it including multi-audio multi-subtitle options.
	This wrapper for JW Player works with the free (open source) and payed (licensed) version.

	This is part of my project that archives all my tv shows and movies, the software will be released when it's stable.
	This code is not final and is subjected to change and may break at any time.

	Fixes and improvements are welcome.
	Questions may be asked at [email protected] or @Stoney_Eagle

	<div id="previewPlayer"></div>
	<div id="slider"></div>
	<p>After changing start and stop times on the slider, reload <button onclick="javascript:location.reload()">↻</button> the page to see those start and stop times reflected in each of the five spots in the playlist.</p>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	<script src="https://app.extremereach.com/Content/js/jwplayer-7.12.8/jwplayer.js"></script>
	<script> jwplayer.key = "+dQxixMPdR7e+iUQLHVm0Q2p9oVpzNhmbHu++8aB+YhHEkhW"; </script>

	<div class="container">

	<div id="player">
	<div class="js-player" data-type="vimeo" data-video-id=""></div>
	</div>


	<!-- <ul id="playlist"></ul> -->
	</div>
	<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>

	<div class="container">

	<div id="player">
	<div class="js-player" data-type="youtube" data-video-id="" data-ytpls="PL533213361AEB44D3"></div>
	<!-- <div class="plyr-playlist-wrapper"><ul class="plyr-playlist"></ul></div> RDxdYFuCp3m9k-->
	</div>


	<!-- <ul id="playlist"></ul> -->
	</div>

	<div class="horizontal-friends-list">
	<figure>
	<picture>
	<img src="https://randomuser.me/api/portraits/women/2.jpg">
	</picture>
	<figcaption>stolinksi</figcaption>
	</figure>
	<figure>
	<picture>
	<img src="https://randomuser.me/api/portraits/women/3.jpg">

	<div class="container">
	<div class="yourstory">
	<img src="https://i.hizliresim.com/H5uEWE.jpg" alt="" draggable="false">
	</div>

	<div class="story">
	<img src="https://images.unsplash.com/photo-1612226466724-0ec9b5179a75?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="" draggable="false">
	</div>

	<div class="story">

	<!-- For the Codepen Challenge of January 2019 -->
	<div class="o-wrapper">
	<header class="c-header">
	<h2>Instagram Stories</h2>
	<div class="c-drag">
	You're not swiping!
	</div>
	</header>

	<div class="c-slider">