ott_player/index.html at main · artbindu/ott_player · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8" />
   <title>Media Player</title>
   <link href="style/media.css" rel="stylesheet" type="text/css" />
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>

<body>
   <header class="page-header">
      <div class="page-header-content">
         <section class="header-left">
            <a href="https://github.com/artbindu">
               <img src="favicon.ico" alt="Logo" class="header-logo">
            </a>
            <div>
               <h1 class="site-title">OTT Player</h1>
            <p class="site-subtitle">Your Custom Media Experience</p>
            </div>
         </section>
         <section class="header-right">
            <div class="header-inline">
               <div class="file-inputs" id="navButtonsRow" style="display:none;">
                  <button class="control-btn" onclick="playPreviousMedia()" title="Previous Media"><i class="fa fa-chevron-left"></i> Prev</button>
                  <button class="control-btn" onclick="playNextMedia()" title="Next Media">Next <i class="fa fa-chevron-right"></i></button>
               </div>
               <div class="file-inputs" id="inputModeDropdownRow">
                  <select id="inputModeDropdown" class="control-btn" onchange="toggleInputModeDropdown()">
                     <option value="file" selected>Choose File</option>
                     <option value="url">Add Web URL</option>
                     <option value="directory">Choose Directory</option>
                  </select>
               </div>
            </div>
            <div class="file-inputs" id="fileInputRow">
               <input type="file" id="fName">
               <button class="primary-btn" onclick="chooseLocalFile()">Play</button>
            </div>
            <div class="file-inputs" id="urlInputRow" style="display:none;">
               <input type="text" id="headerVideoUrlInput" placeholder="Paste Video URL ..."
               value="https://artbindu.github.io/ott_player/data/sample.mp4">
               <button class="primary-btn" onclick="playFromHeaderUrl()">Play</button>
            </div>
            <div class="file-inputs" id="directoryInputRow" style="display:none;">
               <button class="primary-btn" onclick="document.getElementById('directoryInput').click()">Choose Directory</button>
               <span id="directoryName">No Directory</span>
               <input type="file" webkitdirectory id="directoryInput" onchange="loadDirectoryFiles()" style="display:none;">
               <select id="mediaDropdown" class="control-btn" onchange="playSelectedMedia()" hidden></select>
            </div>
         </section>
      </div>
   </header>
   <section class="content player-card">
      <div class="video-wrapper">
         <video class="media-video-player" id="media-video-player">
            <source src="data/movie.mp4" type="video/mp4">
         </video>
      </div>
      <!-- show media handler -->
      <div class="media-media-controls player-controls" id="media-media-controls">
         <div class="drag-handle" id="dragHandle" title="Drag to move controls">&#x2630;</div>
         <div id="media-seekBar-btns" class="seekbar-row">
            <span id="startPos">--:--:--</span>
            <input id="player-seekbar" type="range" min="0" max="100" step="1" value="0" />
            <span id="endPos">--:--:--</span>
         </div>
         <div id="media-ctrl-buttons" class="button-row">
            <button id="reset" class="control-btn" title="Reset"><i class="fa fa-stop-circle"></i></button>
            <select id="playbackRate" class="control-btn" title="Playback Speed">
               <option value="0.25">0.25</option>
               <option value="0.5">0.50</option>
               <option value="0.75">0.75</option>
               <option value="1" selected>Auto</option>
               <option value="1.1">1.10</option>
               <option value="1.25">1.25</option>
               <option value="1.5">1.50</option>
               <option value="1.75">1.75</option>
               <option value="2">2.00</option>
            </select>
            <button id="backword" class="control-btn" title="Skip Forward">
               <i class="fa fa-backward"></i>
            </button>
            <button id="playPause" class="control-btn" title="Play/Pause">
               <i class="fa fa-play"></i>/<i class="fa fa-pause"></i>
            </button>
            <button id="forward" class="control-btn" title="Skip Rewind">
               <i class="fa fa-forward"></i>
            </button>
            <button id="fullScreen" class="control-btn" title="Full Screen">
               <i class="fa fa-expand"></i>
            </button>
            <button id="pipMode" class="control-btn" title="Picture in Picture">
               <i class="fa fa-window-restore" style="transform: rotate(180deg);"></i>
            </button>
            <button id="screenRotation" class="control-btn" title="Rotate Screen">
               <i class="fa fa-undo"></i>
            </button>
            <button id="theaterMode" class="control-btn" title="Theater Mode">
               <i class="fas fa-theater-masks"></i>
            </button>
            <input id="volumeBar" class="control-btn" type="range" min="0" max="1" step="0.01" value="1" title="Volume" style="width:80px;">
            <button id="volume" class="control-btn" title="Mute/Unmute">
               <i class="fa fa-volume-up"></i>
            </button>
            <span id="volumeValue" class="control-btn" hidden>00</span>
            <select id="videoMode" class="control-btn" title="Video Mode">
               <option value="normal">Normal</option>
               <option value="bw">Grayscale</option>
               <option value="sepia">Sepia</option>
               <option value="glow">Warm Glow</option>
               <option value="cinema">Cinema</option>
               <option value="vivid">Vivid</option>
               <option value="night">Night</option>
               <option value="heat">Intense Heat</option>
               <option value="invert">Invert</option>
               <option value="blur">Blur</option>
               <option value="autocolorchange">Auto Change</option>
            </select>
         </div>
         <div id="media-trim-feature" class="button-row">
            <input id="trimStartInput" class="control-btn" type="text" placeholder="00:00:00" title="Trim Start">
            <button id="setTrimStart" class="control-btn" title="Set as Current Time"><i class="far fa-hand-point-left"></i> Start</button>
            <button id="setTrimEnd" class="control-btn" title="Set as Current Time">End <i class="far fa-hand-point-right"></i></button>
            <input id="trimEndInput" class="control-btn" type="text" placeholder="00:00:00" title="Trim End">
            <button id="playTrimmed" class="control-btn" title="Play Trimmed Segment" disabled>Video Clip</button>
            <div class="auto-loop-group">
               <input type="checkbox" id="enableAutoLoop" class="control-btn" title="Enable Auto Loop" disabled>
               <button id="repeatTrim" class="control-btn" title="Enable Auto Loop" disabled>Repeat</button>
            </div>
         </div>
      </div>
   </section>
   <!-- <script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.12.15/dist/umd/ffmpeg.min.js"></script> -->
   <script src="script/media.js"></script>
</body>

</html>