Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en" style="height: 100%">
​
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>X Button Test</title>
</head>
​
<body style="height: 100%">
    <div id="app" style="height: 100%">
        <video id="vidya"></video>
    </div>
    <script>
        var requestFullScreen = (element) => {
            // Supports most browsers and their versions.
            var requestMethod =
                element.requestFullScreen ||
                element.webkitRequestFullScreen ||
                element.mozRequestFullScreen ||
                element.msRequestFullScreen;
​
            if (requestMethod) { // Native full screen.
                requestMethod.call(element);
            }
        }
        function lockPointer() {
            var videoElement = document.querySelector("#vidya")
            videoElement.requestPointerLock =
                videoElement.requestPointerLock ||
                videoElement.mozRequestPointerLock;
            videoElement.requestPointerLock()
            //videoElement.removeEventListener("mousemove", this.relativeMove)
            //videoElement.addEventListener("mousemove", this.relativeMove)
        }
        document.addEventListener("keydown", (e) => {
            if (e.which == 69) {
                requestFullScreen(document.querySelector("#vidya"))
            }
            if (e.which == 70) {
                lockPointer()
            }
        })
        document.addEventListener("mouseup", (e) => {
            e.preventDefault()
            e.defaultPrevented = true
            e.stopPropagation()
        })
        document.addEventListener("mousedown", (e) => {
            console.log("Mouse button press from document.")
            e.preventDefault()
            e.defaultPrevented = true
            e.stopPropagation()
        })
        document.querySelector("#vidya").addEventListener("mousedown", (e) => {
            console.log("Mouse button press from video element.")
            e.preventDefault()
            e.defaultPrevented = true
        })
    </script>
</body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers