I’ve succeed in playing video from IPFS using only JS-IPFS node and HTML video element with MSE (Media Source Extensions API, used in MPEG-DASH for example). Here is the demo. All of the code (about 60 lines) is included in the web page body. Video starts playing after 20 seconds of loading.
The demo is very limited for now. It requires the file to be fully loaded, so the file size is very limited. To improve it I want to synchronize two asynchronous APIs: loading file chunks from IPFS and sending video data to HTML MediaSource object.
Unfortunately, I’m not very familiar with JavaScript. Please help me to finish the code.
You can give HLS (HTTP Live Streaming) or MPEG-DASH a look, esp HLS which is easier to implement. They are specifications on how you can stream video in pieces.
HLS and MPEG-DASH require to split video files into pieces. It is not very compatible with the IPFS philosophy. The change of industry formats will lead to the need for re-encoding. While IPFS is good for immutable data which user can easily save by pinning. Instead of this I want to encode videos in few files with different resolutions which will stay in IPFS almost forever.
Hello. I’ve improved the demo a bit. Now there is no need to wait while the video is fully loaded. However, I still can’t understand how to move file loading from the callback. Please help me.