1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 var hidden, visibilityChane, videoElement; 9 if(typeof document.hidden !== "undefined") { 10 hidden = "hidden"; 11 visibilityChane = "visibilitychange"; 12 } else if(typeof document.mozHidden !== "undefined") { 13 hidden = "mozHidden"; 14 visibilityChane = "mozvisibilitychane"; 15 } else if(typeof document.msHidden !== "undefined") { 16 hidden = "msHidden"; 17 visibilityChane = "msvisibilitychane"; 18 } else if(typeof document.webkitHidden !== "undefined") { 19 hidden = "webkitHidden"; 20 visibilityChane = "webkitvisibilitychane"; 21 } 22 document.addEventListener(visibilityChane, handleVisibilityChange, false); 23 24 function window_onload() { 25 videoElement = document.getElementById("videoElement"); 26 videoElement.addEventListener("ended", videoEnded, false); 27 videoElement.addEventListener("play", videoPlay, false); 28 videoElement.addEventListener("pause", videoPause, false); 29 } 30 //如果页面变为不可见状态,则暂停视频播放 31 //如果页面变为可见状态,则继续视频播放 32 function handleVisibilityChange() { 33 if(document[hidden]) { 34 videoElement.pause(); 35 } else { 36 videoElement.play(); 37 } 38 } 39 40 function play() { 41 //播放视频 42 videoElement.play(); 43 } 44 45 function pause() { 46 //暂停播放 47 videoElement.pause(); 48 } 49 50 function PlayOrPause() { 51 if(videoElement.paused) { 52 videoElement.play(); 53 } else { 54 videoElement.pause(); 55 } 56 } 57 58 function videoEnded(ev) { 59 videoElement.currentTime = 0; 60 this.pause(); 61 } 62 63 function videoPlay(ev) { 64 var btnPlay = document.getElementById("btnPlay"); 65 btnPlay.innerHTML = "暂停"; 66 } 67 68 function videoPause(ev) { 69 var btnPlay = document.getElementById("btnPlay"); 70 btnPlay.innerHTML = "播放"; 71 } 72 </script> 73 </head> 74 75 <body onload="window_onload()"> 76 <video width="" controls="controls" src="1.TypeScript 函数-函数类型.mp4" id="videoElement" height=""> 77 78 </video> 79 <button id="btnPlay" onclick="PlayOrPause()">播放</button> 80 </body> 81 82 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 html:-moz-full-screen { 9 background: red; 10 } 11 12 html:-webkit-full-screen { 13 background: red; 14 } 15 16 html:fullscreen { 17 background: red; 18 } 19 </style> 20 21 </head> 22 23 <body> 24 <input type="button" name="" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen()" /> 25 <div style=" 100%;" id="fullscreenState"></div> 26 <script type="text/javascript"> 27 var docElm = document.documentElement; 28 var fullscreenState = document.getElementById("fullscreenState"); 29 var btnFullScreen = document.getElementById("btnFullScreen"); 30 fullscreenState.style.height = docElm.clientHeight + "px"; 31 document.addEventListener("fullscreenchange", function() { 32 fullscreenState.innerHTML = (document.fullScreen) ? "全屏显示" : "非全屏显示"; 33 btnFullScreen.value = (document.fullScreen) ? "页面非全屏显示" : "页面全屏显示"; 34 }, false); 35 document.addEventListener("mozfullscreenchange", function() { 36 fullscreenState.innerHTML = (document.mozFullScreen) ? "全屏显示" : "非全屏显示"; 37 btnFullScreen.value = (document.mozFullScreen()) ? "页面非全屏显示" : "页面全屏显示"; 38 }, false); 39 document.addEventListener("webkitfullscreenchange", function() { 40 fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "全屏显示" : "非全屏显示"; 41 btnFullScreen.value = (document.webkitIsFullScreen) ? "页面非全屏显示" : "页面全屏显示"; 42 }, false); 43 44 function toggleFullScreen() { 45 if(btnFullScreen.value == "页面全屏显示") { 46 if(docElm.requestFullscreen) { 47 docElm.requestFullscreen(); 48 } else if(docElm.mozRequestFullScreen) { 49 docElm.mozRequestFullScreen(); 50 } else if(docElm.webkitRequestFullScreen) { 51 docElm.webkitRequestFullScreen(); 52 } 53 } else { 54 if(document.exitFullscreen) { 55 document.exitFullscreen(); 56 } else if(document.mozCancelFullScreen) { 57 document.mozCancelFullScreen(); 58 } else if(document.webkitCancelFullScreen) { 59 document.webkitCancelFullScreen(); 60 } 61 } 62 63 } 64 </script> 65 </body> 66 67 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 8 </head> 9 10 <body> 11 <button onclick="lockPointer()">锁定鼠标指针</button> 12 <div id="pointer-lock-element"></div> 13 14 <script type="text/javascript"> 15 var pointerLockElement; 16 var result = document.getElementById("result"); 17 document.addEventListener("mousemove", function(e) { 18 var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0; 19 var movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0; 20 console.log("movementX=" + movementX + ",movementY=" + movementY) 21 }, false); 22 23 function fullscreenChange() { 24 if(document.webkitFullscreenElement === pointerLockElement || document.mozFullscreenElement === pointerLockElement) { 25 //元素已处于全屏状态,现在我们可以请求锁定鼠标指针 26 pointerLockElement.requestPointerLock = pointerLockElement.requestPointerLock || pointerLockElement, mozRequestPointerLock || pointerLockElement.webkitRequestPointerLock; 27 pointerLockElement.requestPointerLock(); 28 } 29 } 30 document.addEventListener("fullscreenchange",fullscreenChange,false);document.addEventListener("fullscreenchange",fullscreenChange,false); 31 document.addEventListener("mozfullscreenchange",fullscreenChange,false);document.addEventListener("mozFullscreenchange",fullscreenChange,false); 32 document.addEventListener("webkitfullscreenchange",fullscreenChange,false);document.addEventListener("webkitFullscreenchange",fullscreenChange,false); 33 34 function pointerLockChange(){ 35 if(document.mozPointerLockElement===pointerLockElement || document.webkitPointerLockElement===pointerLockElement){ 36 console.log("成功锁定鼠标指针"); 37 }else{ 38 console.log("锁定鼠标指针已被停止锁定"); 39 } 40 } 41 document.addEventListener("pointerlockchange",pointerLockChange,false); 42 document.addEventListener("mozpointerlockchange",pointerLockChange,false); 43 document.addEventListener("webkitpointerlockchange",pointerLockChange,false); 44 function pointerLockError(){ 45 console.log("鼠标指针定时出现错误"); 46 } 47 document.addEventListener("pointerlockerror",pointerLockError,false); 48 document.addEventListener("mozpointerlockerror",pointerLockError,false); 49 document.addEventListener("webkitpointerlockerror",pointerLockError,false); 50 51 function lockPointer(){ 52 pointerLockElement=document.getElementById("pointer-lock-element"); 53 //将id为pointer-lock-element的元素设为全屏状态 54 //到目前为止,在针对某个元素锁定鼠标指针之前首先要将元素设为全屏状态 55 //未来可能会取消该限定 56 pointerLockElement.requestFullscreen=pointerLockElement.requestFullscreen|| pointerLockElement.mozRequestFullscreen||pointerLockElement.mozRequestFullscreen||pointerLockElement.webkitRequestFullscreen; 57 pointerLockElement.requestFullscreen(); 58 } 59 </script> 60 </body> 61 62 </html>