How to get media url from JW Player? - javascript

I need to know how i can access the direct media url from a file played in the JW Player by doing this with a chrome extension. That means I've got a website playing a video and I want to get the url of the video and use it in my script inside the extension.

You can't easily access the innards of the Flash object, but you can watch network connections made by the tab.
You can use chrome.webRequest to watch for requests filtered by URL patterns and tab ID. If the videos are served from a small collection of domains/paths, that should be enough to intercept the URL.

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.

how to embed videos from JW Player to another site?

I have this news:
http://www.lanacion.com.ar/1923707-google-presento-su-guia-de-los-juegos-olimpicos-rio-2016
In the body, it has 2 videos embed with JW Player. It hasn't the video's url, only the video id. Is there any way to get the video url or embed the player?
If you see more slowly, in the page source there isn't any JS code related to the player either, even the url's JS library, only the CSS stylesheet..
I was trying to import JS library but i can't because i don't know the player ID..
In the docs, all the examples explain how to embed a video, but in my case i don't have the video url and it's just i looking for.
If you want to find the URL that is being played, watch the requests that are happening in the browser's Network monitor (part of developer tools). That will show you a URL.
It may not be much use though if the content is protected - they may do something like put a timestamp/IP hash on the URL or adopt some other scheme to avoid you linking directly to in.
In this case, for the first video, I was able to see the URL for the stream http://content.jwplatform.com/manifests/oYFEN0e0.m3u8, and link to it in HTML (only tested in Safari, which I know handles HLS files):
<video controls autoplay src="http://content.jwplatform.com/manifests/oYFEN0e0.m3u8"></video>

prevent html5 video from being downloaded through inspect element

We have a module in our project where there is an option of uploading mp4 videos , we are using html5 video tag player for playing the videos.
Problem we are facing is the privacy of the videos.At the time its very easy for the user to download our file either through right click save as video or by taking the url from the src of the video tag by inspect element.
To do so I have studied a lot, and got the idea about the blob url through youtube videos which are not accesible through anyway.
I tried to study about the blob-url, created one for my video url but still they are accessible and can be easily downloaded. Like youtube blob-url its not working.
I also studied this ques question first answer, through which i got the idea about youtube mechanism of buffering video and how the blob url shown in inspect element for youtube is a spoof.
Most importantly I want to know how can we spoof our website url so that no one can download it through inspect element. Is it possible for us to do so and how? Any link related to this please share with me.I have tried to study a lot but still missing something.
What mechanism actually youtube follow for creating blob url and to save its videos?
As your video has to arrive at the users device there is effectively no way you can stop a user intercepting and storing the file if they want to.
The typical solution to this problem is to encrypt the file and only share the key to the encrypted video with the people you want to view it. A 'bad' user can still download the video file but will not be able to play it back without the correct key.
How you get the key to the users can be very simple (you tell them it directly via some separate communication channel, like email) or more sophisticated using some sort of DRM approach.
DRM is controversial (see Firefox discussion at link below) but it is being baked into the standards with HTML5 EME (Encrypted Meida Extensions) so is becoming more mainstream. EME essentially allow a browser request a trusted (by the video producer) element in the browser/device to decode and play an encrypted video. See a good overview of EME at the second link below.
https://blog.mozilla.org/blog/2015/05/12/update-on-digital-rights-management-and-firefox/
http://www.html5rocks.com/en/tutorials/eme/basics/

Play YouTube video without invoking player that takes over the screen in phonegap android?

I'm creating an application in phonegap on android 2.3.5.
I have a YouTube video in my app which I want to display in a similar way it displays on a browser (namely inside the browser window), however clicking the video image invoke an external video player that takes over the screen.
Is there a way to play the video inside a window in my app without it taking over the screen (the same way it displays on a web browser)?
Thank you.
To install the plugin, move www/video.js to your project's www folder and include a reference to it in your html file after phonegap.{ver}.js.
Create a directory within your project called "src/com/phonegap/plugins/video" and copy "src/com/phonegap/plugins/video/VideoPlayer.java" into it.
In your res/xml/plugins.xml file add the following line:
Once installed you will be able to play a video by calling:
window.plugins.videoPlayer.play(url);
The url parameter can be one of three types:
The file:// protocol to play something native to the device such as:
window.plugins.videoPlayer.play("file:///sdcard/MyMovie.mp4");
The http:// protocol to play something on the internet such as:
window.plugins.videoPlayer.play("http://path.to.my/file.mp4");
The http:// protocol pointing to a video on YouTube such as:
window.plugins.videoPlayer.play("http://www.youtube.com/watch?v=E0UV5i5jY50");
As long as your url has "youtube.com" and contains the video ID (i.e. the v parameter) the VideoPlayer should be able to start the YouTube app on your phone to play the video without any additional user interaction. However, if the phone does not have the YouTube app you are out of luck. In the future I may add a check for this that will ask the user to install the YouTube app first.
Sadly at this point in time the VideoPlayer does not support playing videos from your android asset directory. That is an enhancement for a later date.
So, there you go a pretty simple and easy to use plugin which can get you unstuck if you really need to play a video in your Android PhoneGap application.

Third-Party Video Integration into Web App

I need to integrate a third-party video API solution into my web application that I'm building using JavaScript in the front-end and Java in the back-end. Using the API, I will need the following:
Upload videos to third-party service
Right after the video is uploaded, the API should callback my app and pass the video ID or URL (important!)
Display the videos using the provided URL
I have tried the YouTube API, but it seems that videos are uploaded to a single playlist per app and then the app can query all videos submitted to its playlist. The API doesn't provide my app with the video URL right after an upload and therefore it is not possible for me to determine which local user uploaded which YouTube video.
Is there a third-party video service provider that provides for all of the above-stated requirements?
(Vimeo, Metacafe, Dailymotion, Break.com, Flickr Video?)
YouTube don't provides an upload callback, but you can use polling to verify if the state of the video uploaded is no longer 'processing'
https://developers.google.com/youtube/2.0/developers_guide_protocol_checking_video_status
To identify the local user maybe you can use "developer tags":
https://developers.google.com/youtube/2.0/developers_guide_protocol_uploading_videos
When you upload a video, you can associate that video with one of YouTube's video categories. You can also associate the video with additional keywords, or developer tags, that you use to identify the video. By using developer tags, you can identify all of the videos uploaded through your website or even through specific areas of your website. YouTube will not display developer tags to YouTube users; however, you can retrieve or update videos that match a specific developer tag.
And then, you can retrieve the video id, and the video url, using search by developer tags

Categories