Question
Answer and Explanation
To make a web page that plays video in full screen, you can leverage HTML5's video element combined with JavaScript to handle the full-screen functionality. Here’s how you can accomplish this:
1. HTML Setup:
- Start with the basic HTML structure, including a <video> element and a button to trigger full-screen mode. Ensure that the video has its `controls` attribute enabled so users can see play/pause etc. without JavaScript manipulation. Set a custom class (e.g., "fullscreen-video") to make it easier to target it with JavaScript later.
Here's how to implement it:
<video id="myVideo" class="fullscreen-video" controls>
<source src="your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="fullscreenButton">Fullscreen</button>
- Replace your-video.mp4 with the path to your actual video file.
2. JavaScript Implementation:
- You will use JavaScript to handle the full-screen toggle. The basic idea is to add a "click" event listener on your fullscreen button. Inside the listener, we'll check if the video is currently in full-screen mode, if so, exit it, otherwise, request to go to full-screen mode using the browser's specific methods.
- Here’s the necessary JavaScript code:
document.addEventListener("DOMContentLoaded", function() {
const video = document.getElementById("myVideo");
const fullscreenButton = document.getElementById("fullscreenButton");
fullscreenButton.addEventListener("click", function() {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
}
});
});
3. Browser Compatibility:
- The code accounts for browser-specific prefixes for the fullscreen API. This ensures wider compatibility across different browsers.
4. Enhancements:
- Add error handling in case the full-screen API is not available.
- You can also use CSS to style the video and the button as needed.
By implementing this approach, your video will smoothly transition into full-screen mode when users click the button, providing an immersive viewing experience.