update
This commit is contained in:
parent
0c8265a9ab
commit
7cff60be2f
|
|
@ -112,6 +112,31 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hls-player-wrapper {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #121212;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hls-video {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 70vh;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #000;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hls-video:focus-visible {
|
||||||
|
outline: 2px solid #1e88e5;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.card-right {
|
.card-right {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
@ -355,12 +380,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card wide">
|
<div class="card wide">
|
||||||
<div class="player-wrapper">
|
<div class="hls-player-wrapper">
|
||||||
<video
|
<video
|
||||||
id="m3u8Player"
|
class="hls-video"
|
||||||
controls
|
controls
|
||||||
playsinline>
|
autoplay
|
||||||
Your browser does not support HTML5 video.
|
playsinline
|
||||||
|
src="http://127.0.0.1/shree/bhattji.m3u8">
|
||||||
|
Your browser does not support HTML5 HLS playback.
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue