![](https://steemitimages.com/0x0/https://ipfs.io/ipfs/QmTgtbb4LckHaXh1YhpNcBu48cFY8zgT1Lh49q7q7ksf3M/raster-generated/ipfs-logo-text-512-ice.png) >[source](https://ipfs.io/ipfs/QmTgtbb4LckHaXh1YhpNcBu48cFY8zgT1Lh49q7q7ksf3M) #### Repository https://github.com/ipfs/ipfs #### What Will I Learn? - You will learn how to upload a video to IPFS - You will learn how to stream a video from IPFS - You will learn how to build a NodeJS app to stream videos via IPFS #### Requirements - [IPFS](https://ipfs.io/docs/install/) - [NodeJS](https://nodejs.org/en/) - Simple Javascript Knowlegde #### Difficulty - Intermediate/Advanced #### Uploading Videos to IPFS In the [previous tutorial ](https://utopian.io/utopian-io/@hsynterkr/ipfs-tutorial-2-build-a-nodejs-app-for-ipfs) I showed how to upload images or videos to IPFS. You can upload it by following the tutorial. To upload a file to your IPFS server, you must make an HTTP POST request to the server. a key whose value is a video file in the body of request must be defined. ![image.png](https://gateway.ipfs.io/ipfs/QmdGGDMQApkB22vGx6Yyug9Dfj113wJrQQ2Ku3qLX41sNx) Now I will upload **Utopian.io - How to Contribute** video to my IPFS server with Postman. ![image.png](https://gateway.ipfs.io/ipfs/QmPEZZSp6euSczdRmKFcwwFk525ZGJ8WC3eBKMaQKNaD1H) >Successfully uploaded! ```` https://steemia.net/ipfs/QmPfeq2wm79gS5Ho4Jyasu5TLSoSewfs41kxLpGKiSRr6w ```` #### Streaming Videos from IPFS When you send an HTTP POST request, it will return the HASH of the file. When you send an HTTP POST request, it will return the HASH of the file. With this Hash you can access video via IPFS Gateway. ```` https://gateway.ipfs.io/ipfs/HASH ```` ![image.png](https://gateway.ipfs.io/ipfs/Qmbtj3PmWaerphaSbM9pEPc8QXEA7UZCucSkC7jZaQaTj5) #### Streaming Videos from IPFS with **video.js** Library You can create an interactive video player with the video.js library to play the videos. [Video.js](http://docs.videojs.com) is an extendable library around the native video element. ![image.png](https://gateway.ipfs.io/ipfs/Qmf7vn4hTQoFh4hjvMTP7idmyP9S5bXx35ZejJRhd9i6TM) - How does it look now? ![image.png](https://gateway.ipfs.io/ipfs/QmQUHJX9XXqyJPLQqateph7yjDYGy31hvjNb6KmfYcoXR8) ##### Build a NodeJS app to View Videos Let's start by creating an application with NodeJS starter pack. Once you have created a NodeJS app, you will create two html pages for homepage and video review page. On the Index page, the user will enter the video hash and the video will be opened in a new page with the VideoJS player. >index.js ![image.png](https://steemia.net/ipfs/QmReCPw9s2UWt9pgFcoec7HCQnpVgudG2ZmX9qz6V83SLt) >index.html ![image.png](https://gateway.ipfs.io/ipfs/QmfNMrZGMEAFx45pSj68D4TbVCruDWPjroLNYzYZ3wKCFi) >video.html to render videos ![image.png](https://gateway.ipfs.io/ipfs/QmeRWUyeBoQnFmofALENpVGRmY5iwa9XZBPQWvmWmhCfnE) ##### Synopsis When you open to Home, an input will ask for Video hash. When you submit a video hash, you will access the video via the ipfs gateway, and video.js will be triggered to play the video. I also deployed this nodejs application so you can easily test it. I uploaded Utopian Contribution Tutorial video to IPFS. You can use it to test video-ipfs app. ```` QmPfeq2wm79gS5Ho4Jyasu5TLSoSewfs41kxLpGKiSRr6w ```` >https://ipfs-tutorial.herokuapp.com <hr> ![gif](https://media.giphy.com/media/8w3m1SrRRXZJ9iHVHS/giphy.gif) #### Curriculum - [[IPFS Tutorial #3] - Using the IPFS Command Line Interface](https://utopian.io/utopian-io//@hsynterkr/ipfs-tutorial-3-using-the-ipfs-command-line-interface) - [[IPFS Tutorial #2] - Build a NodeJS app for IPFS](https://utopian.io/utopian-io/@hsynterkr/ipfs-tutorial-2-build-a-nodejs-app-for-ipfs) - [[IPFS Tutorial #1] - Host Your Images Online Forever with IPFS](https://utopian.io/utopian-io/@hsynterkr/host-your-images-online-forever-with-ipfs) #### Proof of Work Done https://github.com/hsynterkr/video-ipfs
post_id | 48,732,545 |
---|---|
author | hsynterkr |
permlink | ipfs-tutorial-4-upload-and-stream-videos-via-ipfs |
category | utopian-io |
json_metadata | "{"links": ["https://ipfs.io/ipfs/QmTgtbb4LckHaXh1YhpNcBu48cFY8zgT1Lh49q7q7ksf3M", "https://github.com/ipfs/ipfs", "https://ipfs.io/docs/install/", "https://nodejs.org/en/", "https://utopian.io/utopian-io/@hsynterkr/ipfs-tutorial-2-build-a-nodejs-app-for-ipfs", "http://docs.videojs.com", "https://ipfs-tutorial.herokuapp.com", "https://utopian.io/utopian-io//@hsynterkr/ipfs-tutorial-3-using-the-ipfs-command-line-interface", "https://utopian.io/utopian-io/@hsynterkr/host-your-images-online-forever-with-ipfs", "https://github.com/hsynterkr/video-ipfs"], "community": "busy", "tags": ["utopian-io", "tutorials", "ipfs", "steemia", "busy"], "app": "steemit/0.1", "image": ["https://steemitimages.com/0x0/https://ipfs.io/ipfs/QmTgtbb4LckHaXh1YhpNcBu48cFY8zgT1Lh49q7q7ksf3M/raster-generated/ipfs-logo-text-512-ice.png"], "format": "markdown"}" |
created | 2018-05-15 22:25:27 |
last_update | 2018-05-15 23:14:39 |
depth | 0 |
children | 8 |
net_rshares | 15,571,381,026,278 |
last_payout | 2018-05-22 22:25:27 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 57.616 SBD |
curator_payout_value | 18.775 SBD |
pending_payout_value | 0.000 SBD |
promoted | 0.000 SBD |
body_length | 3,957 |
author_reputation | 12,653,836,604,140 |
root_title | "[IPFS Tutorial #4] - Upload and Stream Videos via IPFS" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 SBD |
percent_steem_dollars | 10,000 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
busy.org | 0 | 37,944,251,413 | 0.59% | ||
danielfinn | 0 | 401,142,464 | 100% | ||
osm0sis | 0 | 6,042,574,441 | 12% | ||
bayeco06 | 0 | 8,375,538,162 | 100% | ||
podanrj | 0 | 10,175,045,746 | 100% | ||
utopian-io | 0 | 15,386,493,265,897 | 10.5% | ||
azwarrangkuti | 0 | 68,362,858,442 | 100% | ||
zapncrap | 0 | 8,430,049,851 | 30% | ||
ewq | 0 | 745,289,769 | 3% | ||
curx | 0 | 9,279,624,411 | 30% | ||
josephace135 | 0 | 9,401,808,148 | 100% | ||
jaysermendez | 0 | 3,099,567,910 | 100% | ||
johnnyyy | 0 | 611,498,492 | 100% | ||
properfraction | 0 | 584,344,258 | 100% | ||
steemia-io | 0 | 15,096,526,291 | 45% | ||
qurator-tier-0 | 0 | 5,236,838,192 | 2% | ||
twodragon | 0 | 0 | 100% | ||
yuspek | 0 | 523,713,802 | 100% | ||
steem0r | 0 | 577,088,589 | 100% |
Thank you for your contribution. - The tutorial is all badly formatted, I don´t understand anything! - Please follow the template of the tutorial category <a href="https://github.com/utopian-io/editor-templates/blob/master/tutorials">Link</a> ---- Need help? Write a ticket on https://support.utopian.io/. Chat with us on [Discord](https://discord.gg/uTyJkNm). [[utopian-moderator]](https://join.utopian.io/)
post_id | 48,734,450 |
---|---|
author | portugalcoin |
permlink | re-hsynterkr-ipfs-tutorial-4-upload-and-stream-videos-via-ipfs-20180515t224513269z |
category | utopian-io |
json_metadata | "{"links": ["https://github.com/utopian-io/editor-templates/blob/master/tutorials", "https://support.utopian.io/", "https://discord.gg/uTyJkNm", "https://join.utopian.io/"], "app": "steemit/0.1", "tags": ["utopian-io"]}" |
created | 2018-05-15 22:45:12 |
last_update | 2018-05-15 22:45:12 |
depth | 1 |
children | 1 |
net_rshares | 0 |
last_payout | 2018-05-22 22:45:12 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 SBD |
curator_payout_value | 0.000 SBD |
pending_payout_value | 0.000 SBD |
promoted | 0.000 SBD |
body_length | 413 |
author_reputation | 214,343,891,436,406 |
root_title | "[IPFS Tutorial #4] - Upload and Stream Videos via IPFS" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 SBD |
percent_steem_dollars | 10,000 |
Seems like an error in Steemit, check here: https://busy.org/@hsynterkr/ipfs-tutorial-4-upload-and-stream-videos-via-ipfs
post_id | 48,735,723 |
---|---|
author | jaysermendez |
permlink | re-portugalcoin-re-hsynterkr-ipfs-tutorial-4-upload-and-stream-videos-via-ipfs-20180515t225905882z |
category | utopian-io |
json_metadata | "{"links": ["https://busy.org/@hsynterkr/ipfs-tutorial-4-upload-and-stream-videos-via-ipfs"], "app": "steemit/0.1", "tags": ["utopian-io"]}" |
created | 2018-05-15 22:59:06 |
last_update | 2018-05-15 22:59:06 |
depth | 2 |
children | 0 |
net_rshares | 0 |
last_payout | 2018-05-22 22:59:06 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 SBD |
curator_payout_value | 0.000 SBD |
pending_payout_value | 0.000 SBD |
promoted | 0.000 SBD |
body_length | 122 |
author_reputation | 20,786,328,085,148 |
root_title | "[IPFS Tutorial #4] - Upload and Stream Videos via IPFS" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 SBD |
percent_steem_dollars | 10,000 |
Ughhh, I see your posted it from Busy, why did the format appear like this?
post_id | 48,735,235 |
---|---|
author | jaysermendez |
permlink | re-hsynterkr-ipfs-tutorial-4-upload-and-stream-videos-via-ipfs-20180515t225334451z |
category | utopian-io |
json_metadata | "{"app": "steemit/0.1", "tags": ["utopian-io"]}" |
created | 2018-05-15 22:53:33 |
last_update | 2018-05-15 22:53:33 |
depth | 1 |
children | 0 |
net_rshares | 0 |
last_payout | 2018-05-22 22:53:33 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 SBD |
curator_payout_value | 0.000 SBD |
pending_payout_value | 0.000 SBD |
promoted | 0.000 SBD |
body_length | 75 |
author_reputation | 20,786,328,085,148 |
root_title | "[IPFS Tutorial #4] - Upload and Stream Videos via IPFS" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 SBD |
percent_steem_dollars | 10,000 |
<div class="pull-left"><img src="![Qsmall.png](https://steemitimages.com/DQmcWoZUnPrRW1UdZeVPWhHpnXfkgWAdFHGxMrSgZoxSZw8/Qsmall.png)" /></div> <center>You just received a Tier 0 upvote! Looking for bigger rewards? Click [here](https://steemit.com/qurator/@qurator/qurator-tier-changes) and learn how to get them or visit us on [Discord](https://discord.gg/nhQehdv)</center>
post_id | 48,743,227 |
---|---|
author | qurator-tier-0 |
permlink | re-ipfs-tutorial-4-upload-and-stream-videos-via-ipfs-20180516t001832 |
category | utopian-io |
json_metadata | {} |
created | 2018-05-16 00:18:33 |
last_update | 2018-05-16 00:18:33 |
depth | 1 |
children | 0 |
net_rshares | 0 |
last_payout | 2018-05-23 00:18:33 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 SBD |
curator_payout_value | 0.000 SBD |
pending_payout_value | 0.000 SBD |
promoted | 0.000 SBD |
body_length | 377 |
author_reputation | 59,338,058,627 |
root_title | "[IPFS Tutorial #4] - Upload and Stream Videos via IPFS" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 SBD |
percent_steem_dollars | 10,000 |
Thank you for your contribution. As this issue was beyond your control, we have reviewed your post again. Overall I like the work you did. Suggestions for your future work: - always include the code also in 'code' format within the post, and not just screenshots of the code. - provide more detailed explanations about the code, as well as enough comments. Your contribution has been evaluated according to [Utopian rules and guidelines](https://utopian.io/rules), as well as a predefined set of questions pertaining to the category. To view those questions and the relevant answers related to your post,[Click here](https://review.utopian.io/result/8/31211323) ---- Need help? Write a ticket on https://support.utopian.io/. Chat with us on [Discord](https://discord.gg/uTyJkNm). [[utopian-moderator]](https://join.utopian.io/)
post_id | 48,822,893 |
---|---|
author | mcfarhat |
permlink | re-hsynterkr-ipfs-tutorial-4-upload-and-stream-videos-via-ipfs-20180516t122331075z |
category | utopian-io |
json_metadata | "{"app": "steemit/0.1", "links": ["https://utopian.io/rules", "https://review.utopian.io/result/8/31211323", "https://support.utopian.io/", "https://discord.gg/uTyJkNm", "https://join.utopian.io/"], "tags": ["utopian-io"]}" |
created | 2018-05-16 12:23:45 |
last_update | 2018-05-16 12:23:45 |
depth | 1 |
children | 1 |
net_rshares | 0 |
last_payout | 2018-05-23 12:23:45 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 SBD |
curator_payout_value | 0.000 SBD |
pending_payout_value | 0.000 SBD |
promoted | 0.000 SBD |
body_length | 833 |
author_reputation | 104,178,422,702,645 |
root_title | "[IPFS Tutorial #4] - Upload and Stream Videos via IPFS" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 SBD |
percent_steem_dollars | 10,000 |
Sure, I will consider 🙂👍
post_id | 48,840,380 |
---|---|
author | hsynterkr |
permlink | re-mcfarhat-re-hsynterkr-ipfs-tutorial-4-upload-and-stream-videos-via-ipfs-20180516t143544785z |
category | utopian-io |
json_metadata | "{"community": "busy", "app": "busy/2.4.0", "tags": ["utopian-io"]}" |
created | 2018-05-16 14:35:45 |
last_update | 2018-05-16 14:35:45 |
depth | 2 |
children | 0 |
net_rshares | 0 |
last_payout | 2018-05-23 14:35:45 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 SBD |
curator_payout_value | 0.000 SBD |
pending_payout_value | 0.000 SBD |
promoted | 0.000 SBD |
body_length | 24 |
author_reputation | 12,653,836,604,140 |
root_title | "[IPFS Tutorial #4] - Upload and Stream Videos via IPFS" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 SBD |
percent_steem_dollars | 10,000 |
Hey @hsynterkr **Thanks for contributing on Utopian**. We’re already looking forward to your next contribution! **Contributing on Utopian** Learn how to contribute on <a href='https://join.utopian.io'>our website</a> or by watching <a href='https://www.youtube.com/watch?v=8S1AtrzYY1Q'>this tutorial</a> on Youtube. **Want to chat? Join us on Discord https://discord.gg/h52nFrV.** <a href='https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
post_id | 48,823,709 |
---|---|
author | utopian-io |
permlink | re-ipfs-tutorial-4-upload-and-stream-videos-via-ipfs-20180516t123007z |
category | utopian-io |
json_metadata | "{"app": "beem/0.19.29"}" |
created | 2018-05-16 12:30:09 |
last_update | 2018-05-16 12:30:09 |
depth | 1 |
children | 0 |
net_rshares | 0 |
last_payout | 2018-05-23 12:30:09 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 SBD |
curator_payout_value | 0.000 SBD |
pending_payout_value | 0.000 SBD |
promoted | 0.000 SBD |
body_length | 506 |
author_reputation | 152,913,012,544,965 |
root_title | "[IPFS Tutorial #4] - Upload and Stream Videos via IPFS" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 SBD |
percent_steem_dollars | 10,000 |
No such app ... on your heroku link
post_id | 79,653,793 |
---|---|
author | vaerospace |
permlink | px9b6y |
category | utopian-io |
json_metadata | {"tags":["utopian-io"],"app":"steemit\/0.1"} |
created | 2019-09-03 13:09:00 |
last_update | 2019-09-03 13:09:00 |
depth | 1 |
children | 0 |
net_rshares | 0 |
last_payout | 2019-09-10 13:09:00 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 SBD |
curator_payout_value | 0.000 SBD |
pending_payout_value | 0.000 SBD |
promoted | 0.000 SBD |
body_length | 35 |
author_reputation | 1,408,928,288,165 |
root_title | "[IPFS Tutorial #4] - Upload and Stream Videos via IPFS" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 SBD |
percent_steem_dollars | 10,000 |