Add files via upload

prchapagain · Jun 26, 2024 · 2152446 · 2152446
1 parent a1820eb
commit 2152446
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Player</title>
+    <link href="style.css" rel="stylesheet">
+    <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet">
+</head>
+<body>
+    <!-- Your HTML content -->
+    <div class="wrapper">
+        <div class="play-wrapper">
+            <center><img id="playing" class="cover" src="img/onair.jpg" alt="Currently Playing"></center>
+            <video id="tv-player" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
+                <source src="https://ktvhdsg.ekantipur.com:8443/high_quality_85840165/hd/playlist.m3u8" type="application/x-mpegURL">
+            </video>
+        </div>
+        <div class="channel-list-wrapper">
+            <ul class="channel-list" id="channel-list">
+                <li data-src="https://ktvhdsg.ekantipur.com:8443/high_quality_85840165/hd/playlist.m3u8" class="selected-channel">Nepali TV Channel</li>
+                <li data-src="https://example.com/channel1.m3u8">Channel 1</li>
+                <li data-src="https://example.com/channel2.m3u8">Channel 2</li>
+                <li data-src="https://example.com/channel3.m3u8">Channel 3</li>
+            </ul>
+        </div>
+    </div>
+    <script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js.js b/script.js.js
@@ -0,0 +1,28 @@
+document.addEventListener('DOMContentLoaded', function() {
+    var player = videojs('tv-player');
+
+    player.on('play', function() {
+        document.getElementById('playing').style.border = '0.1em solid lime';
+    });
+
+    player.on('pause', function() {
+        document.getElementById('playing').style.border = 'none';
+    });
+
+    document.getElementById('channel-list').addEventListener('click', function(event) {
+        var target = event.target;
+        if (target.tagName.toLowerCase() === 'li') {
+            var src = target.getAttribute('data-src');
+            player.src({ src: src, type: 'application/x-mpegURL' });
+            player.play();
+
+            // Remove 'selected-channel' class from all li elements
+            document.querySelectorAll('.channel-list li').forEach(function(li) {
+                li.classList.remove('selected-channel');
+            });
+
+            // Add 'selected-channel' class to the clicked li element
+            target.classList.add('selected-channel');
+        }
+    });
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,62 @@
+/* Reset default styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f2f2f2;
+    padding: 20px;
+}
+
+.wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.play-wrapper {
+    flex: 1;
+    max-width: 70%;
+}
+
+.play-wrapper img.cover {
+    max-width: 100%;
+    height: auto;
+    border: 1px solid #ccc;
+    margin-bottom: 10px;
+}
+
+.channel-list-wrapper {
+    flex: 1;
+    max-width: 30%;
+}
+
+.channel-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.channel-list li {
+    padding: 10px;
+    cursor: pointer;
+    background-color: #f0f0f0;
+    margin-bottom: 5px;
+    text-align: center;
+    border: 1px solid transparent;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.channel-list li:hover {
+    background-color: #ccc;
+}
+
+.channel-list .selected-channel {
+    background-color: #e0f7fa;
+    border-color: #00acc1;
+}