Git Product home page Git Product logo

mediaplayer's Introduction

Free Open Source No-Download HTML5 Media Player for Video, Music, Audio, Android, iPhone, AVI, FLAC, FLV, GIF, M4A, MKV, MOV, MP3, MP4, MPG, OGG, SWF, VOB, WAV, WEBM, WMV

I truly believe this media player can become BIGGER than VLC Media Player.

Why? Because this is the first fully browser-based app that can play every single video type out there. Just like VLC...but in the browser.

The other two popular ones, VLC Media Player and Windows Media Player, require downloads. And then there are bunch of Javascript Media Players for MP4 but that's basically it. For FLV files, the best library "flv.js" is not fully functional. It fails on half the FLV files I tested it on.

Here's a link to a functioning demo of Media Player playing various videos.

Here's our email if you wanna reach out: [email protected]

Here's our twitter if you wanna follow us for updates and articles about media player: Media Player Twitter.

Wanna help out? Couple big TODO items still left

This project has the potential to be BIGGER than VLC Media Player. But VLC Media Player has a ton of features. I need your help to build out this open source project. Help contribute code!

  • Separate out media player into a standalone app that can be embedded into a Vue or React app. It's relatively simple but I wanted to gauge reaction to this project before I do this time consuming task.

  • Use a modern looking UI like video.js This is a relatively simple task and is probably the precursor to the next task that is much more difficult.

  • Implement seeking to any point in the file instead of only streaming from start. This is a difficult task requiring two things: 1) a good UI to capture seeking information from a click, and 2) break up a single FFMPEG command into multiple chunks.

  • Recycle FFMPEG instances more efficiently. Right now, to allow the user to play multiple files in the same browser instance, this app creates another FFMPEG instance, because there is no way to kill or pause the previous FFMPEG instance that is transcoding the whole file.

  • Investigate how to make FFMPEG encoding faster WebAssembly does not allow access to special CPU hardware instructions that could've significantly speed up the transcoding process. As a result, while FFMPEG on the desktop is usually very quick, FFMPEG in WebAssembly sometimes struggles to keep up.

How to test

To run the test server on localhost: nohup ./tools/server.sh &. This is important to allow download of the wasm file as Content-Type application/wasm

Another cool project using FFMPEG: Free Online File Converter

This file converter leverages the power of running FFMPEG in the browser by shifting file conversion workload from the server to the browser. These incumbent services like Zamzar will soon be made obsolete by in-browser FFMPEG converting files. The legacy services can't compete because they are limited. They only allow a limited number of conversions in a 24 hour time period, and they also limit the size of file that you can upload. If you want anything beyond that, you need to pay $9/month, which is crazy expensive. Some people are on such a tight budget, they don't have $9 to spare like that.

The unique advantage that file conversion services like FileConverter.digital have over downloading FFMPEG is that there are actually some people in the world that can't do that...because the only thing they have is a phone, not a desktop computer. In many areas of the world, people get a phone before they get a computer. For these people, these powerful in-browser apps are a godsend. It allows them to perform file conversion services that would've been much more difficult before since they only have something like an Android phone.

Perhaps the biggest drawback of the FileConverter.digital service is the large file size download of around 8 MB. At that size, it's not practical to download the app over mobile data in many parts of the world. It would be both too expensive as well as too slow. On the other hand, the user does not have to upload his file to a server and then download that file again. If the user's file size is larger than 4MB, then in terms of bandwidth cost, this FileConverter.digital app is actually a win for them.

mediaplayer's People

Contributors

bestmediaplayer avatar josephrocca avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

mediaplayer's Issues

Error in ffmpeg-core.js

Chrome 87 - Windows

The "Downloading app (8 MB)..." label is loading for ever, and I got this error in console:

image

Progressive web app

If you can make this a progressive webapp using ReactJS or another library that supports it you can have all the benefits you've listed in your page and also let people use it offline from their desktops or mobile devices.

Potential Upgrades

Hey I stumbled upon your solution after having the idea myself and thought about looking at existing implementations. I was thinking of a few different approaches though for performance. My first question is why use ffmpeg? ffmpeg doesn't work unless SharedArrayBuffer is supported by the browser and as it stands right now most browsers on mobile don't support SharedArrayBuffer. Also if you decouple your solution from ffmpeg you could make optimisations not previously available. For example you say you aren't given access to special CPU instructions from wasm. Why not make a custom web player instead of the standard video tag, i.e. why not decode the video and rasterise the images to a plane using something like webGPU or webGL. This way you could use the GPU for optimisations instead of relying on the CPU. I'm not very familiar with traditional software development but I've been trying to expand my horizons so please excuse me for my ignorance. I'd love to chat about this more and hopefully contribute.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.