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.
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 created a web application using Java and html5. I have uploaded few videos in tomcat server war folder.Say my war file name is "web". Then my videos are inside /opt/Apache/WebApps/web/videos/sample.mp4".
I am using html5 video tag for playing the videos.Most of the video size is more than 100mb.
My video tag is like
<video src="/videos/sample.mp4"></video>
Whenever I played the video, automatically download inside our temp folder of my c drive. My system RAM size is 128mb. So when I watched two or more videos, suddenly PC gets struck due to less memory.
How to avoid this using jQuery, Java servlet,jsp
Base on my experience, you can't. But try to make it harder to download.
Browsers make grabbing too easy
Because that's what browsers were designed to do: Serve content - which means give the content to the user. To show you how easy it is, here's how I usually grab videos on virtually any video streaming site:
Prepare the network tab of your preferred browser debugger and let the video load. Then look for it in the loaded resources. Videos are usually streamed in .flv or .mp4, and audio in .mp3. When you spot the url, open a new tab/window and open the link there. The browser will then download the file.
Making it harder
Here are methods on making a grabber's life harder. Like I said earlier, these are not fool-proof methods, but can at least ward off skiddies.
Video to Canvas technique
Recently I came across this article from HTML5Doctor while researching motion detection in JS. This involves streaming your video via a , then with some JS, literally copy the video to a . Here's an example where the video is up front, while the canvas at the back get's fed with data from that same video.
Essentially, what you do is:
Predefine on the HTML or dynamically insert a to the DOM. This is the "player" that the user sees.
Dynamically create a video tag via JS, append it to the DOM hidden and give it a url to stream. This will be the video source for the canvas.
Then with JS, you periodically grab data from the you just created and draw it to the . With this step, the video gets fed to the canvas.
That's the very basic of the entire routine. Since your player is now the canvas and the true video hidden, you can try right-clicking all you want and save. Since the canvas acts like an image on the page, you can only save a shot of a frame that was displayed on the canvas. As for controls, JS has an API for controlling so you can create custom buttons and sliders.
However, if they know you are doing this, they will find your hidden video element, and you are screwed. This leads us to the next method that complements this front-end only technique, with aid from the server side.
Temporary resource urls
One thing you can do to prevent this method is to prevent the link from being reusable. Make the link disposable, temporary, one-time use only. Once the player loads using the disposable url, dispose of it. Make it unusable.
Similar to CSRF prevention, when a browser requests a page with your video, have it generate a random token and store it in some storage on the server side for later reference. At the same time, append it to the url of your video, something like this:
//we load some video with id 1234324 from your site using this url
//and the token generated on page load is appended as sid
http://yoursite.com/media.php?video_id=1234324&sid=a0s9d8a98a0d98asd09809wq0e9
Now when your player loads the video, it will use this url that carries the token. Have the server validate the token.
If it's good, stream the video and destroy the token from the server to avoid reuse. This essentially makes the url "one time use only". If an invalid token is used, return the appropriate headers as the response, like a 403 perhaps.
To add a bit more security, impose an expiry of the url by storing it's timestamp along with the token. Then compare the request timestamp with the stored timestamp if it's still within the "use window". Make this "use window" short enough to be used by the player on the page, but not long enough for a skiddie to grab that url and paste it into another tab/window/downloader.
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>
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.
Given an Youtube video id how can I determine from JavaScript whether the video has embedding disabled?
yt:noembed
The tag specifies that a video may not be embedded on other websites. This tag may be included in a request to upload or update a video's metadata. By default, videos can be embedded on other sites unless they are private videos. If a request does not include either the tag or the tag, a video will be embeddable on other websites.
Possibly of Interest:
Dealing with YouTube Videos that You can't Embed
You'd have to use a server-side script for this, and use some AJAX to call it.
FYI you can get GData responses in JSON format, so you could use javascript to check the embed status before you show the embed player.
If you prefer, you can hook into the onError callback in the player, but that's probably not as nice of a user experience as checking first.
If you’d like to only search for videos that are embeddable, add format=5 to your query.