├── LICENSE ├── README.md ├── css └── common.css ├── drop.mp4 ├── img ├── icon │ ├── favicon.ico │ └── moziplayer.png └── moziplayer.png ├── index.html └── js ├── aa-canvas.js ├── aa-player.js ├── aa-renderer.js ├── lib ├── jquery-2.1.1.min.js └── require.min.js ├── main.js └── video-source.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 setchi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # moziplayer [](http://mit-license.org) 2 | 3 | ドラッグ&ドロップされた動画ファイルや、インカメラの映像をテキストアートで再生します。[English](https://translate.google.com/translate?sl=ja&tl=en&u=https://github.com/setchi/moziplayer) (by Google Translate) 4 | 5 |  6 | 7 | [https://setchi.jp/moziplayer/](https://setchi.jp/moziplayer/) 8 | 9 | ## できること 10 | - インカメラの映像をAA再生(アクセス時に許可した場合) 11 | - ドラッグ&ドロップされた動画ファイルをAA再生(HTMLVideoElementで扱える形式のみ) 12 | - AAの解像度を変更(一番右のつまみで変更できます) 13 | - 再生位置調整(動画ファイルのみ) 14 | - 音量調整(動画ファイルのみ) 15 | 16 | ## 動作環境 17 | 最新版のGoogleChromeで動作を確認しています。 18 | 19 | ## LICENSE 20 | MIT 21 | -------------------------------------------------------------------------------- /css/common.css: -------------------------------------------------------------------------------- 1 | html * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | position: absolute; 8 | width: 100%; 9 | height: 100%; 10 | background-color: #f5f5f5; 11 | } 12 | 13 | #wrapper { 14 | position: absolute; 15 | top: 0px; 16 | left: 50%; 17 | height: 100%; 18 | } 19 | 20 | #header { 21 | font-size: 17px; 22 | font-weight: bold; 23 | } 24 | 25 | #canvas { 26 | position: absolute; 27 | font-size: 17px; 28 | font-family: Courier, monospace; 29 | white-space: pre; 30 | /* 1440 */ 31 | width: 1600px; 32 | /* 885 */ 33 | height: 1000px; 34 | /* -720 */ 35 | left: -800px; 36 | letter-spacing: 0em; 37 | line-height: 1em; 38 | -webkit-transform: scale(0, 0); 39 | transform: scale(0, 0); 40 | } 41 | 42 | video, canvas { 43 | display: none; 44 | } 45 | 46 | #controller { 47 | position: absolute; 48 | z-index: 50px; 49 | background-color: rgba(0, 0, 0, 0.6); 50 | height: 40px; 51 | border-radius: 6px; 52 | width: 900px; 53 | left: -450px; 54 | bottom: 0px; 55 | transition: all 0.4s cubic-bezier(0, 1, 0.5, 1) 0; 56 | -moz-transition: all 0.4s cubic-bezier(0, 1, 0.5, 1) 0; 57 | } 58 | 59 | .transparency { 60 | opacity: 0; 61 | } 62 | 63 | .icon, #controller input { 64 | cursor: pointer; 65 | } 66 | 67 | .icon-pause { 68 | -webkit-transform: scale(0.675, 0.675); 69 | transform: scale(0.675, 0.675); 70 | height: 40px; 71 | width: 40px; 72 | display: block; 73 | position: relative; 74 | } 75 | 76 | .icon-pause:before, .icon-pause:after { 77 | content: ''; 78 | height: 20px; 79 | width: 4px; 80 | display: block; 81 | background: #f5f5f5; 82 | position: absolute; 83 | top: 10px; 84 | left: 14px; 85 | } 86 | 87 | .icon-pause:after { 88 | left: 22px; 89 | } 90 | 91 | .icon-play { 92 | -webkit-transform: scale(0.6, 0.6); 93 | transform: scale(0.6, 0.6); 94 | height: 40px; 95 | width: 40px; 96 | display: block; 97 | position: relative; 98 | } 99 | 100 | .icon-play:before { 101 | content: ''; 102 | height: 0; 103 | width: 0; 104 | display: block; 105 | border: 10px transparent solid; 106 | border-right-width: 0; 107 | border-left-color: #f5f5f5; 108 | position: absolute; 109 | top: 10px; 110 | left: 16px; 111 | } 112 | 113 | #playButton { 114 | display: inline-block; 115 | width: 20px; 116 | color: #999; 117 | font-size: 20px; 118 | top: -15px; 119 | margin-right: 10px; 120 | } 121 | 122 | #currentPosition { 123 | position: relative; 124 | width: 500px; 125 | top: -16px; 126 | } 127 | 128 | #currentPosition { 129 | -webkit-appearance: none; 130 | border-radius: 5px; 131 | background-color: #999; 132 | height: 10px; 133 | vertical-align: middle; 134 | width: 500px; 135 | } 136 | 137 | #currentPosition::-moz-range-track { 138 | -moz-appearance: none; 139 | border-radius: 5px; 140 | background-color: #999; 141 | height: 10px; 142 | } 143 | 144 | #currentPosition::-webkit-slider-thumb { 145 | -webkit-appearance: none !important; 146 | border-radius: 20px; 147 | background-color: #FFF; 148 | border: 1px solid #999; 149 | height: 20px; 150 | width: 30px; 151 | } 152 | 153 | #currentPosition::-moz-range-thumb { 154 | -moz-appearance: none; 155 | border-radius: 20px; 156 | background-color: #FFF; 157 | border: 1px solid #999; 158 | height: 20px; 159 | width: 30px; 160 | } 161 | 162 | /**/ 163 | #resolution, #volume { 164 | position: relative; 165 | top: -8px; 166 | } 167 | 168 | #resolution { 169 | width: 100px; 170 | } 171 | 172 | .icon-sound-on1, .icon-sound-on2 { 173 | height: 40px; 174 | width: 40px; 175 | display: inline-block; 176 | position: relative; 177 | -webkit-transform: scale(0.675, 0.675); 178 | transform: scale(0.675, 0.675); 179 | } 180 | 181 | .icon-sound-on1 { 182 | position: relative; 183 | } 184 | 185 | .icon-sound-on1:before { 186 | content: ''; 187 | height: 16px; 188 | width: 12px; 189 | display: inline-block; 190 | background: #f5f5f5; 191 | position: absolute; 192 | top: 12px; 193 | left: 0px; 194 | } 195 | 196 | .icon-sound-on1:after { 197 | content: ''; 198 | height: 16px; 199 | width: 0; 200 | display: inline-block; 201 | border: 10px transparent solid; 202 | border-left-width: 0; 203 | border-right-color: #f5f5f5; 204 | position: absolute; 205 | top: 2px; 206 | left: 12px; 207 | } 208 | 209 | .icon-sound-on2 { 210 | position: absolute; 211 | top: 0; 212 | left: 0; 213 | } 214 | 215 | .icon-sound-on2:before { 216 | content: ''; 217 | height: 40px; 218 | width: 40px; 219 | display: inline-block; 220 | border: 4px solid transparent; 221 | border-right: 4px solid #f5f5f5; 222 | border-radius: 40px; 223 | -webkit-border-radius: 40px; 224 | -moz-border-radius: 40px; 225 | position: absolute; 226 | top: -4px; 227 | left: -6px; 228 | } 229 | 230 | .icon-sound-on2:after { 231 | content: ''; 232 | height: 30px; 233 | width: 30px; 234 | display: inline-block; 235 | border: 4px solid transparent; 236 | border-right: 4px solid #f5f5f5; 237 | border-radius: 20px; 238 | -webkit-border-radius: 20px; 239 | -moz-border-radius: 20px; 240 | position: absolute; 241 | top: 2px; 242 | } 243 | 244 | .icon-fullscreen { 245 | height: 40px; 246 | width: 40px; 247 | display: inline-block; 248 | position: relative; 249 | -webkit-transform: scale(0.675, 0.675); 250 | transform: scale(0.675, 0.675); 251 | } 252 | 253 | .icon-fullscreen:before, .icon-fullscreen:after { 254 | content: ''; 255 | display: inline-block; 256 | position: absolute; 257 | } 258 | 259 | .icon-fullscreen:before { 260 | height: 12px; 261 | width: 20px; 262 | top: 12px; 263 | left: 10px; 264 | background: #f5f5f5; 265 | } 266 | 267 | .icon-fullscreen:after { 268 | height: 10px; 269 | width: 18px; 270 | top: 16px; 271 | left: 6px; 272 | border-left: 2px #f5f5f5 solid; 273 | border-bottom: 2px #f5f5f5 solid; 274 | } 275 | -------------------------------------------------------------------------------- /drop.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/setchi/moziplayer/6194bfd0a016e6d5e5b4ea3a19eb92f3139e7c05/drop.mp4 -------------------------------------------------------------------------------- /img/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/setchi/moziplayer/6194bfd0a016e6d5e5b4ea3a19eb92f3139e7c05/img/icon/favicon.ico -------------------------------------------------------------------------------- /img/icon/moziplayer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/setchi/moziplayer/6194bfd0a016e6d5e5b4ea3a19eb92f3139e7c05/img/icon/moziplayer.png -------------------------------------------------------------------------------- /img/moziplayer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/setchi/moziplayer/6194bfd0a016e6d5e5b4ea3a19eb92f3139e7c05/img/moziplayer.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |