├── .gitignore
├── README.md
├── LICENSE
├── package.json
├── index.js
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bundle.js
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # webplay
 2 | 
 3 | Browser based video player featuring support for drag and drop of files (and subtitles).
 4 | Try it here:
 5 | 
 6 | https://060f9c8fa729ff66a38c2475cc3a781c92ddaa89.htmlb.in
 7 | 
 8 | ## Development
 9 | 
10 | To clone and run this locally do
11 | 
12 | ```
13 | git clone git://github.com/mafintosh/webplay.git
14 | cd webplay
15 | npm start
16 | ```
17 | 
18 | ## License
19 | 
20 | MIT


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Mathias Buus
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webplay",
 3 |   "version": "1.0.2",
 4 |   "description": "Browser based video player",
 5 |   "dependencies": {
 6 |     "concat-stream": "^1.4.7",
 7 |     "filereader-stream": "^0.2.0",
 8 |     "add-event-listener": "^0.0.1",
 9 |     "drag-and-drop-files": "^0.0.1",
10 |     "srt-to-vtt": "^1.0.1"
11 |   },
12 |   "devDependencies": {
13 |     "browserify": "^8.0.3",
14 |     "html-inline": "^1.1.1",
15 |     "wzrd": "^1.1.0"
16 |   },
17 |   "scripts": {
18 |     "start": "wzrd index.js:bundle.js",
19 |     "build": "browserify index.js > bundle.js",
20 |     "inline": "browserify index.js > bundle.js && html-inline index.html",
21 |     "htmlbin": "browserify index.js > bundle.js && html-inline index.html | curl -sT- https://htmlb.in"
22 |   },
23 |   "repository": {
24 |     "type": "git",
25 |     "url": "https://github.com/mafintosh/webplay"
26 |   },
27 |   "keywords": [
28 |     "html5",
29 |     "video",
30 |     "web",
31 |     "browser"
32 |   ],
33 |   "author": "Mathias Buus (@mafintosh)",
34 |   "license": "MIT",
35 |   "bugs": {
36 |     "url": "https://github.com/mafintosh/webplay/issues"
37 |   },
38 |   "homepage": "https://github.com/mafintosh/webplay"
39 | }
40 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var on = require('add-event-listener')
 2 | var drop = require('drag-and-drop-files')
 3 | var filereader = require('filereader-stream')
 4 | var vtt = require('srt-to-vtt')
 5 | var concat = require('concat-stream')
 6 | var $ = document.querySelector.bind(document)
 7 | 
 8 | var $body = $('body')
 9 | var $menu = $('#menu')
10 | var $hidden = $('#hidden-file')
11 | var $file = $('#file')
12 | var $url = $('#url')
13 | var $video = $('video')
14 | 
15 | var play = function(url) {
16 |   $menu.style.display = 'none'
17 |   $body.style.backgroundColor = '#000'
18 | 
19 |   var $src = document.createElement('source')
20 |   $src.setAttribute('src', url)
21 |   $src.setAttribute('type', 'video/mp4')
22 | 
23 |   $video.style.display = 'block'
24 |   $video.appendChild($src)
25 |   $video.play()  
26 | }
27 | 
28 | var onsubs = function(buf) {
29 |   if ($('track')) $video.removeChild($('track'))
30 | 
31 |   var $track = document.createElement('track')
32 |   $track.setAttribute('default', 'default')
33 |   $track.setAttribute('src', 'data:text/vtt;base64,'+buf.toString('base64'))
34 |   $track.setAttribute('label', 'Subtitles')
35 |   $track.setAttribute('kind', 'subtitles')
36 |   $video.appendChild($track)
37 | }
38 | 
39 | var onfile = function(file) {
40 |   if (/\.srt$/i.test(file.name)) return filereader(file).pipe(vtt()).pipe(concat(onsubs))
41 | 
42 |   if ($('source')) $video.removeChild($('source'))
43 |   if ($('track')) $video.removeChild($('track'))
44 | 
45 |   play(URL.createObjectURL(file))
46 | }
47 | 
48 | drop($body, function(files) {
49 |   onfile(files[0])
50 | })
51 | 
52 | on($hidden, 'change', function() {
53 |   onfile($hidden.files[0])
54 | })
55 | 
56 | on($url, 'keydown', function(e) {
57 |   if (e.keyCode === 13) play($url.value.trim())
58 | })
59 | 
60 | on($file, 'click', function() {
61 |   $hidden.click()
62 | })
63 | 
64 | if (location.hash.split('#').pop()) play(location.hash.split('#').pop())


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>webplay</title>
  5 |   <style>
  6 |     html, body {
  7 |       font-family: Helvetica;
  8 |       margin: 0;
  9 |       padding: 0;
 10 |     }
 11 | 
 12 |     body {
 13 |       position: fixed;
 14 |       top: 0;
 15 |       left: 0;
 16 |       background-color: #eee;
 17 |       width: 100%;
 18 |       height: 100%;      
 19 |     }
 20 | 
 21 |     #menu {
 22 |       width: 715px;
 23 |       margin: auto;
 24 |       margin-top: 200px;
 25 |       font-size: 30px;
 26 |     }
 27 | 
 28 |     #file {
 29 |       width: 140px;
 30 |       text-align: center;
 31 |       background-color: #2196f3;
 32 |       color: #fff;
 33 |       float: left;
 34 |       padding: 20px 30px;
 35 |       border-radius: 3px;
 36 |       box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px 0px;
 37 |       transition: box-shadow cubic-bezier(0.35, 0, 0.25, 1), cubic-bezier(0.35, 0, 0.25, 1), cubic-bezier(0.35, 0, 0.25, 1) 0.5s;
 38 |     }
 39 | 
 40 |     #file:hover {
 41 |       box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 8px 0px;
 42 |       transform: matrix(1, 0, 0, 1, 0, -1);
 43 |     }
 44 | 
 45 |     #file, #or, #url {
 46 |       line-height: 40px;      
 47 |     }
 48 | 
 49 |     ::-webkit-input-placeholder { /* WebKit browsers */
 50 |         color:    #2196f3;
 51 |     }
 52 |     :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 53 |        color:    #2196f3;
 54 |        opacity:  1;
 55 |     }
 56 |     ::-moz-placeholder { /* Mozilla Firefox 19+ */
 57 |        color:    #2196f3;
 58 |        opacity:  1;
 59 |     }
 60 |     :-ms-input-placeholder { /* Internet Explorer 10+ */
 61 |        color:    #2196f3;
 62 |     }
 63 | 
 64 |     #file, #or {
 65 |       user-select: none;
 66 |       -webkit-user-select: none;
 67 |       cursor: default;
 68 |     }
 69 | 
 70 |     #or {
 71 |       width: 25px;
 72 |       float: left;
 73 |       margin: 0 10px;
 74 |       padding: 19px;
 75 |       color: #333;
 76 |     }
 77 | 
 78 |     #url {
 79 |       width: 425px;
 80 |       font-size: 30px;
 81 |       border-radius: 3px;
 82 |       outline: 0;
 83 |       padding: 20px;
 84 |       border: none;
 85 |       color: #2196f3;
 86 |     }
 87 | 
 88 |     #hidden-file {
 89 |       display: none;
 90 |     }
 91 | 
 92 |     video {
 93 |       display: none;
 94 |       position: fixed;
 95 |       top: 0;
 96 |       left: 0;
 97 |       width: 100%;
 98 |       height: 100%;
 99 |     }
100 |   </style>
101 | </head>
102 | <body>
103 |   <div id="menu">
104 |     <div id="file">select file</div><div id="or">or</div><input id="url" type="text" autocorrect="off" autocapitalize="off" placeholder="paste a url and press enter" autofocus>
105 |   </div>
106 |   <div id="video">
107 |     <video controls crossorigin="anonymous"></video>
108 |   </div>
109 |   <input id="hidden-file" type="file">
110 |   <script src="bundle.js"></script>
111 | </body>
112 | </html>
113 | 


--------------------------------------------------------------------------------