mediasource local video segment by js - javascript

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.

Related

I want to a create an audio visualizer for youtube videos, but cross-origin requests won't allow access to embedded iframe

My objective is to create an audio visualizer that responds to the playback of a Youtube video. Unfortunately, YouTube uses an iframe, which seems to mean that accessing the media stream is impossible due to cross-origin requests (at least, I haven't been able to get it to work).
Is there a front-end solution? Is there any way to hook into the browser audio, or accomplish this in some other way without accessing the iframe's inner DOM elements?
What about using a library to download the video/audio and store it in local browser cache? Is it possible to sync with the embedded playback by getting a timestamp from Youtube's api and read a local copy for the audio processing? I've been trying all day to select the video element and create an audio context, but I don't know if there are any options to explore.
There is a similar question about 7 years ago: Is there anyway to visualize youtube audio from an iframe using the web audio api?
But the only solution required using something called "youtube-audio-stream" which is some kind of local app to stream youtube audio. At least, I haven't been able to get it to work with codepen, jsfiddle or codesandbox. I'd like it to be used alongside or transparently with the embedded youtube player and I'm not exactly sure if that is the direction I should be looking.
Maybe start with here:
Detect if audio is playing in browser Javascript
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
I am not sure if that would be the solution to your requirement, but worth a try.

Is it possible to create use the WebAudio API to analyze sound playing in the browser without an MP3 file?

I want to use the Web Audio API AnalyserNode without access to an MP3 source file. I'd like to just analyze the sound playing from the browser. Is that possible?

Dynamic streaming of a video on a website

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

Stream part of the video to the client

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).

generating audio waveform from youtube video

does anyone know if is it possible to render an audio waveform from a video playing in a youtube player using Javascript?
Thank you!
On the client side, it's not possible to isolate the audio from the video data.
You would need to get the raw audio data to be able to then process it with the WebAudio API (e.g. display it).
There are some server-side solutions (extracting audio from video, sending it back etc.), but that's not legal, as it's written in the TOS of youtube:
(https://developers.google.com/youtube/terms?hl=fr)
You are not allowed to:
separate, isolate, or modify the audio or video components of any YouTube >audiovisual content made available through the YouTube API;
promote separately the audio or video components of any YouTube audiovisual >content made available through the YouTube API;
See this questions for more details:
Is there a Youtube API that gives only audio?

Categories