When clicked play button automatically play the video in fullscreen mode
There's not a single attribute for this, but you can solve this with JavaScript:
document.getElementById("videoplayer").addEventListener("playing", event => {
const player = document.getElementById("videoplayer");
if (player.requestFullscreen)
player.requestFullscreen();
else if (player.webkitRequestFullscreen)
player.webkitRequestFullscreen();
else if (player.msRequestFullScreen)
player.msRequestFullScreen();
})
<video id="videoplayer" src="https://www.w3schools.com/tags/movie.mp4" controls></video>
Automatic fullscreen html5 video playback?
This should work:
create an empty html page with 1 video tag with autoplay attribute
then with JavaScript create an array of all the paths to the videos that you want to play
attach a function to the 'ended' event of the video tag
inside the function generate a random index
Math.floor(Math.random() * clipPaths.length);
with the generated index get a random path from the array
set the path as the 'src' attribute of the video tag
You just need to put all the paths in the clipPaths array...
<!DOCTYPE html>
<html>
<head>
<style>
video#myVideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<video id="myVideo" controls autoplay>
</video>
<script>
clipPaths = [
'https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv',
'http://techslides.com/demos/sample-videos/small.mp4',
'http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4'
];
var myVideo = document.getElementById('myVideo');
myVideo.addEventListener('ended',myHandler,false);
function myHandler(e) {
var randClip = clipPaths[Math.floor(Math.random() * clipPaths.length)];
myVideo.setAttribute('src',randClip);
}
var randClip = clipPaths[Math.floor(Math.random() * clipPaths.length)];
myVideo.setAttribute('src',randClip);
</script>
</body>
</html>
link to working example link
Is there a way to make HTML5 video fullscreen?
2020 answer
HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen API defines an API for elements to display themselves fullscreen.
This can be applied to any element, including videos.
Browser support is good, but Internet Explorer and Safari need prefixed versions.
An external demo is provided as Stack Snippet sandboxing rules break it.
<div id="one">
One
</div>
<div id="two">
Two
</div>
<button>one</button>
<button>two</button>
div {
width: 200px;
height: 200px;
}
#one { background: yellow; }
#two { background: pink; }
addEventListener("click", event => {
const btn = event.target;
if (btn.tagName.toLowerCase() !== "button") return;
const id = btn.textContent;
const div = document.getElementById(id);
if (div.requestFullscreen)
div.requestFullscreen();
else if (div.webkitRequestFullscreen)
div.webkitRequestFullscreen();
else if (div.msRequestFullScreen)
div.msRequestFullScreen();
});
2012 answer
HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen specification supplies the requestFullScreen
method which allows arbitrary elements (including <video>
elements) to be made fullscreen.
It has experimental support in a number of browsers.
2009 answer
Note: this has since been removed from the specification.
From the HTML5 spec (at the time of writing: June '09):
User agents should not provide a
public API to cause videos to be shown
full-screen. A script, combined with a
carefully crafted video file, could
trick the user into thinking a
system-modal dialog had been shown,
and prompt the user for a password.
There is also the danger of "mere"
annoyance, with pages launching
full-screen videos when links are
clicked or pages navigated. Instead,
user-agent specific interface features
may be provided to easily allow the
user to obtain a full-screen playback
mode.
Browsers may provide a user interface, but shouldn't provide a programmable one.
Related Topics
How to Reference an Asset in a Library Project
How to Set Text to View from Drawer Header Layout in Navigation Drawer Without Inflating View
How to Set Soap Header Using Ksoap2 - Android
How to Disable Facebook Single Sign on for Android - Facebook-Android-Sdk
Javafxports How to Call Android Native Media Player
How to Create an Avd for Android 4.0
Singleton with Parameter in Kotlin
How to Finish Current Activity in Android
Problem Inflating Custom View for Alertdialog in Dialogfragment
Android Studio: Duplicate Files Copied in APK Meta-Inf/Dependencies When Compile
Adding Your Own SQLite Database to an Android Application
Error:Connectionresult{Statuscode=Internal_Error, Resolution=Null}
How to Keep a Countdowntimer Running Even If the App Is Closed