HTML5权威指南 17.其他API

 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>