hawksley / eleVR-Web-Player

A Web Player for 360 Video on the Oculus
Mozilla Public License 2.0
682 stars 195 forks source link

add ability to load external video URLs (via querystring, hash, postMessage) #20

Closed cvan closed 9 years ago

cvan commented 9 years ago

The code for handling the qs/hash/postMessage params is a bit verbose, but it handles the many possible cases well.

Let me know your thoughts. Thanks!


Sample usage

Query-string key-value params: http://localhost:8080/?autoplay=1&video=http://cdn2.vrideo.com/prod_videos/v1/lSPg9ka_1080p_full.webm

Hash key-value params: http://localhost:8080/#video=http://cdn2.vrideo.com/prod_videos/v1/W7JUlEW_480p_full.mp4

Query-string JSON params: [http://localhost:8080/?{"video": "http://cdn2.vrideo.com/prod_videos/v1/3aM7Xd6_1080p_full.webm", "autoplay": "true", "projection": "mono"}](http://localhost:8080/?{"video": "http://cdn2.vrideo.com/prod_videos/v1/3aM7Xd6_1080p_full.webm", "autoplay": "true", "projection": "mono"})

Hash JSON params: [http://localhost:8080/#{"autoplay": true, "video": "http://crossorigin.me/http://mobile.360heros.com/producers/4630608605686575/5579686187673361/video/video_7776b10db31f349ede5d253b7744e110.mp4"}](http://localhost:8080/#{"autoplay": true, "video": "http://crossorigin.me/http://mobile.360heros.com/producers/4630608605686575/5579686187673361/video/video_7776b10db31f349ede5d253b7744e110.mp4"})

postMessage to the page from the JS console:

window.postMessage({video: 'http://cdn2.vrideo.com/prod_videos/v1/mYNVcD6_480p_full.mp4', autoplay: true, loop: true}, '*')

postMessage from an iframe:

data:text/html,<iframe id='i' src='http://localhost:8080' style='border: 0; position: absolute; left: 0; top: 0; height: 100%; width: 100%' allowfullscreen></iframe><script>setTimeout(function () { i.contentWindow.postMessage({video: 'http://cdn2.vrideo.com/prod_videos/v1/mYNVcD6_480p_full.mp4', autoplay: true, loop: true}, '*'); }, 300);</script>
hawksley commented 9 years ago

Can you add a section to the readme for this set of features? This is a great feature, but I'm not sure that anyone would ever find it if they didn't read this pull request. :)

hawksley commented 9 years ago

ps. I've only ever written code to do a similar thing for a project once, and I don't know that I can claim to have been any less verbose, so I'm not necessarily the best code reviewer for this

hawksley commented 9 years ago

Also, the videos in your sample usage section are adorable.

hawksley commented 9 years ago

Anyhow, this LGTM, except for the comment about adding some documentation.

hawksley commented 9 years ago

Merging, will add "sample usage" from this pull request to the main readme for documentation for now.

cvan commented 9 years ago

thanks very much for reviewing and merging. was afk for a few days, so thanks for also adding the sample usage to the README. :)