I'd like to publish a video on my website. I use javascript and SWFObject to allow to watch it directly on the website. The format of the video is mp4 and it's quite a big file - let's say about 300MB. Thus, it takes a while until it loads in the player. I'd like the visitors to start watching the video while it's not fully downloaded. In other word, I'd like to stream in the way e.g. Youtube does.
The small example I uploaded there:
http://geoportaltoskania.t15.org/Film360.html
Here you can find all files and codes that are used for this:
http://geoportaltoskania.t15.org
Thanks, Krzychu
You can use the following options:
1) MPEG-Dash - https://msopentech.com/blog/2014/01/03/streaming_video_player/
2) VideoJS - https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md
MPEG-DASH or HLS is a good solution for your problem. You can take your file and transcode it to HLS and MPEG-DASH using e.g. http://www.bitcodin.com, put it on your webserver and playback it with e.g. http://www.dash-player.com
Related
I want to play local video by web browser with js. Normally, it would be solved with html5 video tag. but the video was too big, ram couldn't contain it. So I decided to streaming local video file on browser not through server. I search it and I found that mediasource API able to do that, but I failed play my video. I search again more then I found video segments(initialization segments and media segments) form needed. but I couldn't find the way how to make it.
how can make video segments by js?
Is there any kind of api support to make it?
please not just about mp4box. mp4box is just for mp4 type. I want play every type of video that supported in video tag.
I have a website that I put my videos/audios on it.
I use HTML5 and tag to show videos.
But videos/audios can be downloaded if client opens view source page and then copy the file address.
How can I disable downloading these files, I just want client to see videos/hear audios in the web page.
Many online video/audio services like Youtube disabled downloading videos by this way. How they did that? What is a working way to disable, or at least make this progress much harder?
Youtube encodes their video into the MPEG-DASH format, which plays back through byte streams via the browser's implementation of the Media Source Extensions API. See See more on Wikipedia.
You can do the same by encoding your video into MPEG-DASH files, then playing it back in your code through a library like dash.js. Watch how the dash.js player works live by checking out the DASH Reference Client.
I've encoded MPEG-DASH video using Sorenson Squeeze, but there are other encoders you could use.
And just to clarify... this will make downloading more difficult... but will NOT provide a real DRM solution. For that you need to check out EME.
MPEG-DASH seems like a nice solution but is definitely not perfect. There are many ways to bypass this and still being able to download the video. On the other hand putting a lot of effort in protection might not be worth it since people can always make screen recordings etc.
But if you still want to go for a more secure option you can try using
Encrypted Media Extensions i.e. with Amazon s3 cloud.
Given a windows server backend, is there a way to implement a pure javascript/html5 client that would be able to play only a designated part of the video file (e.g. from 10th second to 15th on a 2 hour video)?
From what I know, standard html5 video tag will download an entire file which is not suitable for my situation.
Streaming solutions on the server would probably be an answer, but are there any that would work with pure javascript/html client? Thanks.
To do this you should encode your video into one of the segmented/fragmented format like MPEG-DASH or Apple HLS. The result will be a playlist file and 1 or more media files containing 2 to 10 second fragments of your (long) video file. For DASH you will normally have 1 fragmented MP4 file containing 2 second fragments of video, the playlist file will tell your player which parts of the file to download corresponding to the time you wish to play. For this to work your web server needs to support HTTP RANGE headers (which most do).
For HLS you will normally end up with multiple 10 second files. The playlist file will tell the player which file to download for the time to play.
Here's how to build a HTML5 player to play DASH streams:
http://blogs.msdn.com/b/interoperability/archive/2014/01/03/mpeg-dash-tutorial-embedding-an-adaptive-streaming-video-within-your-html5-application.aspx
http://www-itec.uni-klu.ac.at/dash/?page_id=746
Besides complex methods like HLS or MPEG-DASH you can consider using pseudo-streaming, or progressive download. Its seeking capability supported by a number of media servers will allow you to watch the MP4 video from any moment. Using Javascript you should be able to actually setup play and stop when you need (but that's up you to deal with different browsers handling playback in HTML5 video container).
I am using porpcorn JS for adding annotations on video, I have created overlay on video and all annotations are rendered on video. Is there any way so that I can export video with embedded html content inside an .mp4-file. So I can play that video in any native player like VLC?
You're best of handling it all on the server side and simply playing the rendered video on the client. If the code on the client side is sufficiently complex you can consider the two following options:
Easiest option: Client frame rendering, server video rendering
You can quite easily grab each frame from the video, draw it onto a canvas and next draw the annotations to the same canvas as well (using either custom code or a library like html2canvas). Next the easiest thing to do would be to send all the frames one by one to the server and use a simple ffmpeg command (something like ffmpeg -i img%03d.png -c:v libx264 -pix_fmt yuv420p out.mp4) to generate the mp4 which you would then send back to the client.
Best, but hard option: Client frame rendering, client video rendering
'Of course' actually rendering the video on the client side is not impossible. Do note however that the only library I am aware of does not render .mp4 files, but .webm files. Whether that's a problem is up to you. Either way, the library that is capable of doing this is called whammy.js. Once again you would actually need to draw all the frames and annotations to a canvas which you then encoder.add to the Whammy video object. The API is pretty simple and to the point, however do note that I have no idea about how cross platform its support is.
Short answer: no
Long answer:
The MP4 container can hold XMP metadata so in theory someone could write an exporter but you would still need a player capable of using the XMP metadata and as far as I know VLC doesn't support it.
What is the best way given the YouTube url to send the audio to a list view like (http://opentape.fm/mixtape/). I would have to it streaming from the YouTube player, rather than downloading and uploading the actual file to the server. Any help would be awesome, thanks!
The big problem you have here is that YouTube does not take mp3 files directly, a video must be created from the mp3 file.
Dynamically creating a video within the browser without any server-side assistance would be near impossible, it is hard enough to get data access to the mp3s (or any image source for the video stream) and writing a codec in JavaScript is not going to be fun.
You could probably do it server-side in a streaming fashion if you can find/write software that can chunk the mp3 audio appropriately and just shove a flat image in to a simple video stream on each key frame, multiplexing as you go.
Should you be able to do all that, the API details for uploading detail the process. You can do this without any metadata at all, simplifying the process somewhat for streaming.
But generally, the answer is no - not easy to do this client-side. You could make an AJAX service out of the server-side idea that takes a URL as a parameter, but that's about the limit.