Is it possible to, using javascript, either create video data on the fly, or more likely download pieces of video data from various sources and feed them to a flash player instance.
Even better, is it possible to feed a html5 video stream from locally executed javascript?
Short answer: no.
Long answer:
To pass the data directly from JavaScript into Flash, such as by ExternalInterface, you would need to serialize the video data as a byte stream. This means JS must be able to access video frame data, convert it to a String, and send it to Flash.
Serializing video data in the browser with JS would take some pretty fancy footwork; given the way HTML5 video works, I don't think any mainstream web browser supports this.
As a suggestion - you can use JS to feed URLs of video files to Flash where Flash can open the connection and access the data itself. In general Flash is vastly better at manipulating media data like videos and images. If you're already planning to using Flash you're better off cutting JS out of that process anyway.
Related
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.
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.
I want to extract audio from a video file using javascript, is it possible to make a mp3 file or any format so that i can play it in an audio tag in html5 ? if yes how? OR what API should I use ?
JavaScript is a script running at the client-end for handling user interactions usually. Long computations cause the browser to halt the script anyway and can turn the page unresponsive. Besides, it is not suitable for video encoding/decoding.
You should use a Java applet for video processing/audio extraction. That way, processing is still offloaded to the client. Processing on the server is expensive in terms of memory and processor cycles. Not Recommended.
Sooo, this is NOT an optimal solution. It is sort of terrible actually since you will forcing users to download a video without seeing it. What you could do is play the file as HTML5 video and just hide the video display then show controls as if it were just audio. This is sort of like playing a video, but just not watching the video while listening to the audio.
Checkout jPlayer: http://jplayer.org/
It will let you play an MP4 basically on any browser by telling it to use flash then falling back to HTML5 when you need it to. Then you can just style things how you want using CSS/HTML/Images.
You might want to try a small test first to see if the display:none; css style will also prevent the video's audio from playing. If that is the case you could also use height:0;;
Once again, this is sub-optimal since you are taking up the user's bandwidth. There are other solutions out there that could potentially strip out just the audio for you in a streaming environment.
I am using audio element to stream an ogg source from an icecast server. Does the audio element extract icy metadata and is there a way to access it through javascript?
Basically, I want to show "currently playing" information of a radio station I am streaming. What are my options?
Thanks!
No, your HTML5 elements are only aware of the stream data, and aren't even making the appropriate request to fetch the metadata.
See these posts:
Developing the client for the icecast server
Pulling Track Info From an Audio Stream Using PHP
http://www.smackfu.com/stuff/programming/shoutcast.html
Now, this isn't impossible by any means. You just have to do it server-side. (See that second link in particular.)
I should also point out that on a full-blown SHOUTcast Server (haven't tested with Icecast, but its worth a try) generates "7.html" which contains data on the number of listeners, max listeners, peak listeners, stereo/mono, bitrate, and current track name as comma-separated values. Like this:
2,1,33,625,2,128,J Mascis - Not Enough
If you can fetch http://yourstreamingserver:port/7.html, then you can get this data very easily.
In case of an Ogg container stream (So both Vorbis and Opus), at least Firefox supports javascript access to the metadata. This is currently only "vendor specific" Javascript API: audio.mozGetMetadata();
On the other hand if you go with Icecast 2.4.1 you can access metadata independently through a JSON API. Lack of synchronization as pointed out in other comments applies. It's usually "close enough" though.
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.