Is it possible to determine how much of a Flash video has elapsed from Javascript code? This would be for videos that I have not created and have no control over, e.g. from Youtube, Vimeo, etc.
I don't need to control the video in any way, just need to see how far it has played and, if possible, total running time.
It is possible. But it will be dependent in part on which player you are using. If you are using an embeddable video player, instead of a custom player, the player will need to have a javascript method available to give this information.
In the case of YouTube, an API exists:
http://code.google.com/apis/youtube/js_api_reference.html
But if you build your own player, that loads in another player, for example the chromeless YouTube player for Actionscript 3 - you can monitor the playback with the part of teh application you build, and make it avaiable via the ExternalInterface in actionscript.
The Actionscript ExternalInterface class is the preferred way to handle communication between flash objects and javascript.
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/external/ExternalInterface.html
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.
Youtube iframe API doesn't allow player.setPlaybackRate() to be set higher than 2 is there any other way to speed it up more than 2x?
Yes, you can try this script https://greasyfork.org/it/scripts/421610-youtube-speed-up/code
It overwrites _yt_player.xx.yy.zz.kk.getAvailablePlaybackRates() to return an array [0.25 ... 4].
The supported playback speeds are listed by player.getAvailablePlaybackRates() on the Youtube iframe API.
Youtube itself defines what playback speeds it supports. You'll want to implement your own video player (i.e. download the video from YouTube server-side and serve it to your client via a different video player) if you want to change this further.
I need to embed videos into my web application and have the following requirements:
The videos need to be automatically transcoded into different
resolutions
Playbackspeed needs to be selectable
Needs to work on mobile
I need to modify the player
The videos need to be uploadable by non software developers => user interface for video upload and management
The problem with embedding a video from a platform is that you usually have to use an iframe to do this. However if the iframe is from another domain, I don't have access to its content and therefor can't modify the player, because I can't access the video element residing in the iframe.
The modifications I need to make are the following:
Put markers at specific cuepoints in the timeline
Pause the video at the cuepoints
Display some additional information below the video when the cuepoint is reached
The only possible solution, that I found so far, is hosting a platform myself on a subdomain of my web applications domain and adjust the code of that platform to set the document.domain property to the domain of my web application. That way I would be able to access the video tag that is inside the iframe provided by the platform. The things that I don't like about that solution is that I would prefer not to host the platform myself and it would also be nice if I wouldn't need to modify the platform.
You can use video tag provided by HTML5.
<video>
<src = "your src here">
</video>
firstly create video according to all the resolutions and store it
then change the src for different types of resolutions using javascript web API
var videoplayer = document.getElementsByTagName("video")[0];
videoplayer.src = "new src here according to the resolution"
playback speed can also be changed using the same way
videoplayer.playbackRate = "value according to the user"
Here is an example for looking on modifying the videoplayer.
You can detect the speed of the user using javascript and render the source of video accordingly.
If you dont want to download anything to check the network speed then have a look at how to implement adaptive starting experience of video using service-worker.
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 have a site that is streaming live videos, and I want to offer a one minute free preview to users before they pay for a stream. I am using JW Player - I was thinking of triggering a timer when the play button is clicked, and then removing a div containing the player once the timer is finished. I am already using jQuery on this page.
What methods can I take to secure this? Is there another way to do this - I am using a CDN so server-side is somewhat limited.
It's not possible to build a secure 60-seconds-only preview of the full video that way; the only way to be sure that no one could exploit the javascript code and see the entire video is to create a separate video file of 60 seconds only and to play that one instead of the real full video.
This is so because the javascript code is run on the client and it would be pretty easy to disable, edit it or, even simpler, to spot the URL of the full version of the video in the code.
Moreover it's better to protect the download of the full video file checking that every HTTP request made to download it corresponds to a user who has paid for it.
Unless you're using proper streaming (eg RTMP), the whole file will be accessible for direct download by users with access to this pseudo-preview. To properly limit access, you'll want to either implement streaming and limit the free stream server side, or use a one minute file and a protected full video.
To solve this I used JW Player's events to fire a setTimeout call for 60 seconds later. I then hid the player and popped up a modal jQuery UI dialog over the screen. It's not particularly secure but is sufficient for my needs.