|
|
<!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'; |
|
|
} else { |
|
|
videoContainer.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const videoPlayer = document.getElementById('videoPlayer'); |
|
|
videoPlayer.addEventListener('webkitendfullscreen', hideVideoOnExit); |
|
|
videoPlayer.addEventListener('pause', hideVideoOnExit); |
|
|
videoPlayer.addEventListener('ended', hideVideoOnExit); |
|
|
|
|
|
function hideVideoOnExit() { |
|
|
const videoContainer = document.getElementById('videoContainer'); |
|
|
videoContainer.style.display = 'none'; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
