|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Copyright 2013 Mozilla Foundation |
|
4 |
|
5 Licensed under the Apache License, Version 2.0 (the "License"); |
|
6 you may not use this file except in compliance with the License. |
|
7 You may obtain a copy of the License at |
|
8 |
|
9 http://www.apache.org/licenses/LICENSE-2.0 |
|
10 |
|
11 Unless required by applicable law or agreed to in writing, software |
|
12 distributed under the License is distributed on an "AS IS" BASIS, |
|
13 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
14 See the License for the specific language governing permissions and |
|
15 limitations under the License. |
|
16 --> |
|
17 <html> |
|
18 <head> |
|
19 <meta charset="utf-8"> |
|
20 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|
21 <base href=""/> |
|
22 |
|
23 <script src="../lib/DataView.js/DataView.js"></script> |
|
24 |
|
25 <!-- Load SWF Dependencies --> |
|
26 <script src="../flash/util.js"></script> |
|
27 <script src="../swf/inflate.js"></script> |
|
28 <script src="../swf/stream.js"></script> |
|
29 |
|
30 <style> |
|
31 body { |
|
32 margin: 0; |
|
33 overflow: hidden; |
|
34 background-color: rgba(128, 128, 128, 0.5); |
|
35 font-family: sans-serif; |
|
36 } |
|
37 #screen { |
|
38 position: fixed; |
|
39 top: 0; left: 0; right: 0; bottom: 0; |
|
40 } |
|
41 #container { |
|
42 position: fixed; |
|
43 top: 50%; left: 0; right: 0; bottom: 50%; |
|
44 } |
|
45 #content { |
|
46 margin-top: -64px; |
|
47 text-align: center; |
|
48 } |
|
49 #playbutton { |
|
50 background-color: transparent; |
|
51 background-image: url(chrome://global/skin/media/videoClickToPlayButton.svg); |
|
52 border: none 0px; |
|
53 width: 64px; |
|
54 height: 64px; |
|
55 display: block; |
|
56 margin-left: auto; |
|
57 margin-right: auto; |
|
58 cursor: pointer; |
|
59 margin-bottom: 10px; |
|
60 } |
|
61 #playbutton > span { |
|
62 overflow: hidden; |
|
63 width: 0px; height: 0px; |
|
64 display: inline-block; |
|
65 } |
|
66 |
|
67 @media screen and (max-width: 160px) , screen and (max-height: 160px) { |
|
68 #playbutton { |
|
69 display: none; |
|
70 } |
|
71 #content { |
|
72 margin-top: -6px; |
|
73 } |
|
74 } |
|
75 |
|
76 #screen { |
|
77 transition: opacity 0.5s linear; |
|
78 -webkit-transition: opacity 0.5s linear; |
|
79 opacity: 0.1; |
|
80 } |
|
81 |
|
82 #screen:hover { |
|
83 opacity: 1.0; |
|
84 } |
|
85 |
|
86 .shumwayButton { |
|
87 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) ); |
|
88 background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% ); |
|
89 background-color:#f9f9f9; |
|
90 -moz-border-radius:4px; |
|
91 -webkit-border-radius:4px; |
|
92 border-radius:4px; |
|
93 border:1px solid #a0a0a0; |
|
94 display:inline-block; |
|
95 color:#666666; |
|
96 font-family:arial; |
|
97 font-size:11px; |
|
98 font-weight:bold; |
|
99 padding:6px 11px; |
|
100 text-decoration:none; |
|
101 text-shadow:1px 1px 0px #ffffff; |
|
102 width: 70px; |
|
103 cursor: pointer; |
|
104 } |
|
105 .shumwayButton:hover { |
|
106 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) ); |
|
107 background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% ); |
|
108 background-color:#e9e9e9; |
|
109 } |
|
110 .shumwayButton:active { |
|
111 position:relative; |
|
112 top:1px; |
|
113 } |
|
114 </style> |
|
115 </head> |
|
116 |
|
117 <body> |
|
118 <div id='screen'> |
|
119 <div id='container'> |
|
120 <div id='content'> |
|
121 <button id='playbutton'><span>Play</span></button> |
|
122 <div id='toolbar'> |
|
123 <a class="shumwayButton" id="fullmode">Shumway</a> |
|
124 <a class="shumwayButton" id="fallback">Flash</a> |
|
125 </div> |
|
126 </div> |
|
127 </div> |
|
128 </div> |
|
129 </body> |
|
130 </html> |