faizan1947 · May 9, 2021 00:33
diff --git a/HTML Streaming Player b/HTML Streaming Player
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script type='text/javascript' src="https://cdn.jsdelivr.net/npm/afterglowplayer@1/dist/afterglow.min.js"></script>
 </head>

 <style>
    .wrap {
        margin-top: 150px;
        perspective: 1000px;
        perspective-origin: 50% 50%;

        /* Background stripes animation */
        animation: bganim 3s linear 2s infinite;
    }

    @keyframes bganim {
        from {
            background-position: 0px;
        }

        to {
            background-position: 80px;
        }
    }

    .cube {
        margin: 2px;
        position: relative;

        height: 50px;
        width: 50px;
        transform-style: preserve-3d;
    }

    .cube div {
        position: absolute;
        padding: 0px;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        opacity: 50;

        transition: transform 0.2s ease-in;
    }

    .front {
        transform: translateZ(-70px);
        background-color: #12524B
    }

    .back {
        transform: translateZ(-100px) rotateY(180deg);
        background-color: #12524B
    }

    .right {
        transform: rotateY(-270deg) translateX(100px);
        transform-origin: top right;
        background-color: #83C6F3
    }

    .left {
        transform: rotateY(270deg) translateX(-100px);
        transform-origin: center left;
        background-color: #83C6F3
    }

    .top {
        transform: rotateX(-270deg) translateY(-100px);
        transform-origin: top center;
        background-color: #FC0;
    }

    .bottom {
        transform: rotateX(270deg) translateY(100px);
        transform-origin: bottom center;
        background-color: #FC0;
    }

    @keyframes rotate {
        from {
            transform: rotateX(0deg) rotateY(0deg);
        }

        to {
            transform: rotateX(360deg) rotateY(360deg);
        }
    }

    .cube {
        animation: rotate 10s infinite linear;
    }
 </style>



 <style>
    html,
    body {
        padding: 0;
        margin: 0;
        position: relative;
    }
 </style>

 <style>
    .button {
        background-color: #ffffff;
        border: none;
        width: 99%;
        color: rgb(241, 1, 1);
        font-weight: bold;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: -moz-inline-grid;
        font-size: 18px;
        margin: 4px 2px;
        -webkit-transition-duration: 0s;
        /* Safari */
        transition-duration: 0s;
        cursor: pointer;
    }
 </style>


 <style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: black;
    }
 </style>

 </head>

 <body>
    <h1 style="text-align: center;  padding-top: 60%; "></h1>

    <div class="row">
        <div class="col-xs-6">
            <div style="position: fixed; top: 0px; width: 100%">
                <video controls
                    poster="https://colgatedigitalarts.files.wordpress.com/2010/02/static21.gif"
                    id='videoplayer' class='afterglow' title='Video 01' width='16' height='9' data-autoresize="fit"
                    controls></video>


            </div>
            <div class="col-xs-6">
                <p style:="text-align: center;"><a class="btn btn-default"
                        onClick="afterglow.getPlayer('videoplayer').pause().currentTime(0).src('https://32x2cn7zz29m47vnqt4z-kyz6hw.p5cdn.com/abr_PSLME/zxcv/PSLME/zxcv_720p/chunks.m3u8').play();"><button
                            class="button ">PTV Sports(720p)</button></a></p>

                <p style:="text-align: center;"><a class="btn btn-default"
                        onClick="afterglow.getPlayer('videoplayer').pause().currentTime(0).src('https://32x2cn7zz29m47vnqt4z-kyz6hw.p5cdn.com/abr_PSLME/zxcv/PSLME/zxcv_480p/chunks.m3u8').play();"><button
                            class="button ">PTV Sports(480p)</button></a></p>

                <p style:="text-align: center;"><a class="btn btn-default"
                        onClick="afterglow.getPlayer('videoplayer').pause().currentTime(0).src('https://32x2cn7zz29m47vnqt4z-kyz6hw.p5cdn.com/abr_PSLME/zxcv/PSLME/zxcv_360p/chunks.m3u8').play();"><button
                            class="button ">PTV Sports(360p)</button></a></p>

                

                

            </div>
        </div>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script type='text/javascript' src="https://cdn.jsdelivr.net/npm/afterglowplayer@1/dist/afterglow.min.js"></script>
	</head>

	<style>
	.wrap {
	margin-top: 150px;
	perspective: 1000px;
	perspective-origin: 50% 50%;

	/* Background stripes animation */
	animation: bganim 3s linear 2s infinite;
	}

	@keyframes bganim {
	from {
	background-position: 0px;
	}

	to {
	background-position: 80px;
	}
	}

	.cube {
	margin: 2px;
	position: relative;

	height: 50px;
	width: 50px;
	transform-style: preserve-3d;
	}

	.cube div {
	position: absolute;
	padding: 0px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	opacity: 50;

	transition: transform 0.2s ease-in;
	}

	.front {
	transform: translateZ(-70px);
	background-color: #12524B
	}

	.back {
	transform: translateZ(-100px) rotateY(180deg);
	background-color: #12524B
	}

	.right {
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
	background-color: #83C6F3
	}

	.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
	background-color: #83C6F3
	}

	.top {
	transform: rotateX(-270deg) translateY(-100px);
	transform-origin: top center;
	background-color: #FC0;
	}

	.bottom {
	transform: rotateX(270deg) translateY(100px);
	transform-origin: bottom center;
	background-color: #FC0;
	}

	@keyframes rotate {
	from {
	transform: rotateX(0deg) rotateY(0deg);
	}

	to {
	transform: rotateX(360deg) rotateY(360deg);
	}
	}

	.cube {
	animation: rotate 10s infinite linear;
	}
	</style>



	<style>
	html,
	body {
	padding: 0;
	margin: 0;
	position: relative;
	}
	</style>

	<style>
	.button {
	background-color: #ffffff;
	border: none;
	width: 99%;
	color: rgb(241, 1, 1);
	font-weight: bold;
	padding: 16px 32px;
	text-align: center;
	text-decoration: none;
	display: -moz-inline-grid;
	font-size: 18px;
	margin: 4px 2px;
	-webkit-transition-duration: 0s;
	/* Safari */
	transition-duration: 0s;
	cursor: pointer;
	}
	</style>


	<style>
	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: black;
	}
	</style>

	</head>

	<body>
	<h1 style="text-align: center; padding-top: 60%; "></h1>

	<div class="row">
	<div class="col-xs-6">
	<div style="position: fixed; top: 0px; width: 100%">
	<video controls
	poster="https://colgatedigitalarts.files.wordpress.com/2010/02/static21.gif"
	id='videoplayer' class='afterglow' title='Video 01' width='16' height='9' data-autoresize="fit"
	controls></video>


	</div>
	<div class="col-xs-6">
	<p style:="text-align: center;"><a class="btn btn-default"
	onClick="afterglow.getPlayer('videoplayer').pause().currentTime(0).src('https://32x2cn7zz29m47vnqt4z-kyz6hw.p5cdn.com/abr_PSLME/zxcv/PSLME/zxcv_720p/chunks.m3u8').play();"><button
	class="button ">PTV Sports(720p)</button></a></p>

	<p style:="text-align: center;"><a class="btn btn-default"
	onClick="afterglow.getPlayer('videoplayer').pause().currentTime(0).src('https://32x2cn7zz29m47vnqt4z-kyz6hw.p5cdn.com/abr_PSLME/zxcv/PSLME/zxcv_480p/chunks.m3u8').play();"><button
	class="button ">PTV Sports(480p)</button></a></p>

	<p style:="text-align: center;"><a class="btn btn-default"
	onClick="afterglow.getPlayer('videoplayer').pause().currentTime(0).src('https://32x2cn7zz29m47vnqt4z-kyz6hw.p5cdn.com/abr_PSLME/zxcv/PSLME/zxcv_360p/chunks.m3u8').play();"><button
	class="button ">PTV Sports(360p)</button></a></p>





	</div>
	</div>
	</body>

	</html>