public/dropshell-templates
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video autoplay behavior for WebRTC and HLS players
All checks were successful
Test and Publish Templates / test-and-publish (push) Successful in 31s
Details

Browse Source
This commit is contained in:
Your Name
2025-09-02 09:38:08 +12:00
parent 0d8a252e01
commit 46ca6c9255
2 changed files with 43 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
squashkiwi-streaming/config/web/index.html
View File

@@ -140,7 +140,7 @@
<div class="video-section">
<div class="video-container">
<video id="video" controls autoplay muted></video>
<video id="video" controls autoplay muted playsinline></video>
</div>
<div class="video-controls">
<div class="status-badge offline" id="status">

43
squashkiwi-streaming/config/web/webrtc.html
View File

@@ -39,6 +39,23 @@
height: 0;
background: black;
}
.play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 20px 40px;
border-radius: 10px;
cursor: pointer;
font-size: 1.2rem;
z-index: 10;
display: none;
}
.play-overlay:hover {
background: rgba(0, 0, 0, 0.9);
}
video {
position: absolute;
top: 0;
@@ -115,7 +132,8 @@
<div class="video-section">
<div class="video-container">
<video id="video" controls autoplay muted></video>
<video id="video" controls autoplay muted playsinline></video>
<div id="playOverlay" class="play-overlay">▶️ Click to Play</div>
</div>
<div class="video-controls">
<div class="status-badge offline" id="status">
@@ -160,6 +178,29 @@
pc.ontrack = (event) => {
console.log('Got track:', event.track.kind);
video.srcObject = event.streams[0];
const playOverlay = document.getElementById('playOverlay');
// Ensure autoplay works
video.play().then(() => {
console.log('Video playback started automatically');
playOverlay.style.display = 'none';
}).catch(e => {
console.log('Autoplay was blocked, user interaction may be required:', e);
// Show play overlay
playOverlay.style.display = 'block';
// Add click handlers to both overlay and video
const startPlayback = () => {
video.play().then(() => {
playOverlay.style.display = 'none';
});
video.onclick = null;
playOverlay.onclick = null;
};
video.onclick = startPlayback;
playOverlay.onclick = startPlayback;
});
updateStatus(true);
};