Spaces:

tonyassi
/

video-mobile-fullscreen

Running

App Files Files Community

video-mobile-fullscreen / index3.html

tonyassi

Rename index.html to index3.html

bcccbd8 verified over 1 year ago

raw

history blame contribute delete

2.34 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dropdown Video Selector</title>
	</head>
	<body>
	<label for="videoSelect">Choose a video:</label>
	<select id="videoSelect" onchange="changeVideo()">
	<option value="">--Select a video--</option>
	<option value="https://huggingface.co/spaces/tonyassi/g/resolve/main/lucy/video1.mov">Video 1</option>
	<option value="https://huggingface.co/spaces/tonyassi/g/resolve/main/lucy/video2.mov">Video 2</option>
	</select>

	<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 changeVideo() {
	const videoSelect = document.getElementById('videoSelect');
	const videoContainer = document.getElementById('videoContainer');
	const videoPlayer = document.getElementById('videoPlayer');
	const videoSource = document.getElementById('videoSource');

	const selectedValue = videoSelect.value;
	if (selectedValue) {
	videoSource.src = selectedValue;
	videoPlayer.load();
	videoPlayer.play();
	videoContainer.style.display = 'block'; // Show the video container
	} else {
	videoContainer.style.display = 'none'; // Hide the video container if no video is selected
	}
	}

	// 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>