Spaces:

tonyassi
/

video-mobile-fullscreen

Running

App Files Files Community

video-mobile-fullscreen / index.html

tonyassi

Update index.html

571af37 verified 7 months ago

raw

history blame contribute delete

2.61 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Icon Button Video Selector</title>
	<style>
	.icon-container {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	}
	.icon-button {
	cursor: pointer;
	border: none;
	background: none;
	padding: 10px;
	}
	.icon-button img {
	width: 50px; /* Adjust the size as needed */
	height: auto;
	}
	</style>
	</head>
	<body>
	<div class="icon-container">
	<button class="icon-button" onclick="showVideo('https://huggingface.co/spaces/tonyassi/g/resolve/main/lucy/video1.mov')">
	<img src="https://huggingface.co/spaces/tonyassi/g/resolve/main/icon/fish.png" alt="Fish Icon">
	</button>
	<button class="icon-button" onclick="showVideo('https://huggingface.co/spaces/tonyassi/g/resolve/main/lucy/video2.mov')">
	<img src="https://huggingface.co/spaces/tonyassi/g/resolve/main/icon/david.png" alt="David Icon">
	</button>
	</div>

	<div id="videoContainer" style="margin-top: 20px; display: none;">
	<video id="videoPlayer" width="600" controls loop>
	<source id="videoSource" src="" type="video/mp4">
	Your browser does not support the video tag.
	</video>
	</div>

	<script>
	function showVideo(videoUrl) {
	const videoContainer = document.getElementById('videoContainer');
	const videoPlayer = document.getElementById('videoPlayer');
	const videoSource = document.getElementById('videoSource');

	videoSource.src = videoUrl;
	videoPlayer.load();
	videoPlayer.play();
	//videoContainer.style.display = 'block'; // Show the video container
	}

	// Add event listeners for focus and blur to detect fullscreen exit
	const videoPlayer = document.getElementById('videoPlayer');
	videoPlayer.addEventListener('webkitendfullscreen', hideVideoOnExit); // Specific to iOS Safari
	videoPlayer.addEventListener('pause', hideVideoOnExit); // Additional fallback for mobile
	videoPlayer.addEventListener('ended', hideVideoOnExit); // Hide when video ends (optional)

	function hideVideoOnExit() {
	const videoContainer = document.getElementById('videoContainer');
	videoContainer.style.display = 'none'; // Hide the video container
	}
	</script>
	</body>
	</html>