How to secure the html5 audio link from download - ios

I have a wordpress website in which I want to embed the audio player for .mp3 files. But the user should not get the server url of the music file.
Currently I have used [audio src=""]. But through this user get the url though page source. So is there any way or any plugin through which I can hide it in the page source.
Also I cannot use the flash player as it has to be run on iphone/ipad too.
Looking forward for the replies

The problem with HTML5 audio and video is, that it directly links to the file.
This is also the reason sites like Netflix don't use it.
Only Microsoft Silverlight can protect your content from rippers properly.
BUT - you could use the dirty solution: Make an <iframe> and embed another html file that only contains your audio source and replace the body container with <body oncontextmenu="return false">
This will disable your users to open the context menu over your audio file and thus they will not be able to find the location of the file, however "html-pros" will just use f12 to open it.
If you only do it on this very limited part of the page, most people won't be able to get around this though. ;)

Related

How to download an mp4 video from a blob url or m3u8? [duplicate]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Closed 3 years ago.
The community reviewed whether to reopen this question 6 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I want to download a video whose URL is not a simple MP4 file, but rather a blob type for example:
<video id="playerVideo" width="450px" autoplay="autoplay" height="338px"
style="height:100%;width:100%;" class="mejs-rai-e"
src="blob:http://www.example.com/d70a74e1-0324-4b9f-bad4-84e3036ad354">
</video>
Is there any chrome extension or software which can be used to download videos from blob URLs?
I just came up with a general solution, which should work on most websites.
I tried this on Chrome only, but this method should work with any other browser, though, as Dev Tools are pretty much the same in them all.
Steps:
Open the browser's Dev Tools (usually F12, or Ctrl-Shift-I, or right-click and then Inspect in the popup menu) on the page with the video you are interested in.
Go to Network tab and then reload the page. The tab will get populated with a list of requests (may be up to a hundred of them or even more).
Search through the names of requests and find the request with .m3u8 extension. There may be many of them, but most likely the first or largest is the one you are looking for. It may have any name, e.g. playlist.m3u8.
Click its name to open the request. Under the Headers subsection you will see request's full URL in the Request URL field. Copy it.
Extract the video from m3u8. There are many ways to do it, I'll give you those I tried, but you can google more by "download video from m3u8".
Option 1. If you have VLC player installed, feed the URL to VLC using the "Open Network…" menu option. I'm not going to go into details on this part here, there are a number of comprehensive guides in many places, for example, here. If the page doesn't work, you can always google another one by "vlc download online video".
Option 2. If you are more into command line, use FFMPEG or your own script, as directed in this SuperUser question.
Use the HLS Downloader Google Chrome extension to get the link to the M3U playlist. Its icon in the browser bar will show the number of playlists found on the current webpage. Clicking on the icon you can then see a list of the playlist link and then use the copy button next to a link to copy it.
Then use the youtube-dl program to download the file.
youtube-dl --all-subs -f mp4 -o "file-name-to-save-as.mp4" "https://link-from-Google_Chrome-HLS_Downloader_extension"
Explanation of command line options:
-f mp4 = Output format mp4
--all-subs = Download all subtitles
-o "file-name-to-save-as.mp4" = Name of the file to save the video as.
"https://link-from-Google_Chrome-HLS_Downloader_extension" = This is the link to the playlist you copied from the HLS Downloader extension.
If you use the same configuration options all the time for youtube-dl you may want to take a look at the configuration options for youtube-dl, as this can save you a lot of typing.
The HLS Downloader extension is free and open source under the MIT license if you want to see the code it can be found on its project page on Github.
There are a variety of ways to get the URL .m3u8 either by viewing the source of a page, looking at the Network tab in the Developer Tools in Chrome, or using a plugin such as HDL/HLS Video Downloader.
With the .m3u8 URL in hand you can then use ffmpeg to download the video to a file like so:
$ ffmpeg -i 'https://url/to/some/file.m3u8' -bsf:a aac_adtstoasc \
-vcodec copy -c copy -crf 50 file.mp4
This is how I manage to "download" it:
Use inspect-element to identify the URL of the M3U playlist file
Download the M3U file
Use VLC to read the M3U file, stream and convert the video to MP4
In Firefox the M3U file appeared as of type application/vnd.apple.mpegurl
The contents of the M3U file would look like:
Open VLC medial player and use the Media => Convert option. Use your (saved) M3U file as the source:
The process can differ depending on where and how the video is being hosted. Knowing that can help to answer the question in more detail.
As an example; this is how you can download videos with blob links on Vimeo.
View the source code of the video player iframe
Search for mp4
Copy link with token query
Download before token expires
Source & step-by-step instructions here.
If you can NOT find the .m3u8 file you will need to do a couple of steps different.
1) Go to the network tab and sort by Media
2) You will see something here and select the first item. In my example, it's an mpd file. then copy the Request URL.
3) Next, download the file using your favorite command line tool using the URL from step 2.
youtube-dl -f bestvideo+bestaudio https://url.com/destination/stream.mpd
4) Depending on the encoding you might have to join the audio and video files together but this will depend on a video by video case.
Find the playlist/manifest with the developer tools network tab. There is always one, as that's how it works. It might have an m3u8 extension that you can type into the Filter. (The youtube-dl tool can also find the m3u8 tool automatically some time give it a direct link to the webpage where the video is being displayed.)
Give it to the youtube-dl tool (Download). It can download much more than just YouTube. It'll auto-download each segment then combine everything with FFmpeg then discard the parts. There is a good chance it supports the site you want to download from natively, and you don't even need to do step #1.
If you find a site that is stubborn and you run into 403 errors... Telerik Fiddler to the rescue. It can catch and save anything transmitted (such as the video file) as it acts as a local proxy. Everything you see/hear can be downloaded, unless it's DRM content like Spotify.
Note: in the window, you can use youtube-dl.exe using "Command Prompt" or creating a batch file. i.e
Thanks
I posted this already at some other websites and though why not share it with guys/gals at stackoverflow.
Install the Video DownloadHelper extension on Firefox browser.
With DownloadHelper activated, navigate to the webpage containing the video that you want to download.
Once the video is streaming, click on the DownloadHelper icon. It will give you a list of all file formats available on the current video.
Scroll onto the file format that you wish to download
On the right hand side, you will see an arrow
Click on that arrow to get more information regarding the current video and the selected format
From the displayed window at the end of that arrow, scroll down and select "Details"
You now have all the details concerning the current video and the selected format. It is something like this.
Hit Details⊗
_needsAggregate
_needsCoapp
actions
bitrate
chunked
descrPrefix
durationFloat
extension
frameId
fromCache
group
hls
id
isPrivate
length
masterManifest
mediaManifest
originalId
referrer
size
status
title
topUrl
url
urlFilename
Now, look at the specifics of the referrer in that Hit Details. That's the url you want. Copy it and paste on your favorite downloader.
If the blob is instantiated with data from an F4M manifest (check the Network Tab in Chrome's Developer Tools), you can download the video file using the php script posted here: https://n1njahacks.wordpress.com/2015/01/29/how-to-save-hds-flash-streams-from-any-web-page/
By putting:
if ($manifest == '')
$manifest = $_GET['manifest'];
before:
if ($manifest)
you could even run it on a webserver, using requests with the query string: ?manifest=[manifest url].
Note that you'll probably want to use an FTP client to retrieve the downloaded video file and clean up after the script (it leaves all the downloaded video parts).

Rails send_file to video/audio tags don't let me replay the video/audio or jump to different points

In my Rails app, I have audio and video files in a location I wish to make private, so they can only be accessed by send_file or send_data. When I use send_file for an action that gets put inside of a source src="(controller/action)" tag, the video/audio shows up in the browser. However, unlike with video/audio files in the Rails public folder, I cannot jump to different parts of the audio with the default player GUI, nor can I loop the video/audio, etc. Why is this happening and what can I do to fix it?
Edit: This problem seems to only happen with chrome.

Open a link in web browser using flash swf

I am new to flash coding and didn't know much more.
I want to make a flash file that send URL to web browser to open particular link.
I've made such file it execute properly but after making swf file, it does not open the link.
Any one help me regarding this small problem.
Check out navigateToURL(): http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/package.html#navigateToURL()
Note that it won't work unless it's triggered by a user action; i.e. a mouse click or a key press

SWF file extraction

If I have a link to a SWF file - for example here http://redletterdaysb2b.co.uk/swf/our-video.swf
how can I extract it for use on another website?
I have downloaded the swf, but just get an error#2044 when I try and play it. does it need to go in some sort of wrapper?
thanks guys
You're trying to load a swf that in turn loads and displays a .flv using the FLVPlayback component. I'm guessing our-video.swf loads fine, but it probably keeps a relative reference to the .flv.
I can think of two ways to handle this:
Simple add a new FLVPlayback (or any other video player) on the other site but tell it to load the .flv file from the original site.
Try to copy the .flv file in the same folder as the new .swf on the new site.
With the FLVPlayback component there's another part that could cause the error: the skin which on the original site is here.
The #2024 IOError should also include an URL.
This is your best hint to how the our-video.swf is trying to load the .swf file (using a relative(./swf/redletterdays.swf) or an absolute(/swf/redletterdays.swf) path).
Based on this, if you decide to load the player from the original site (not just the .flv file), you can work out where to place the skin (i.e. in the in a folder named swf on the root of the new site)

Embedded HTML 5 video is stored in the cache but is not displayed on iPad 2

I am creating an offline webapp for the iPad 2, which includes video content. When the page first loads, the video displays fine. But when I reload the page, the video's play button becomes broken.
I've gone into Settings > Safari > Advanced > Website Data and, sure enough, the video is in the cache... So the problem seems to be that it is not being retrieved from the cache.
My HTML code snippet:
<html manifest="cache.manifest">
...
<video width="320" height="240" controls="controls">
<source src="videos/movie.mp4" type="video/mp4" />
</video>
My cache.manifest snippet:
CACHE MANIFEST
# Updated 2012-08-22 19:49:00
index.php
...
videos/movie.mp4
For good measure, my .htaccess snippet:
AddType text/cache-manifest .manifest
AddType video/mp4 .mp4
Does anyone have any ideas?
This unfortunately isn't an answer but after now 20 hours continuous searching and testing to resolve the exact same problem i can tell you where i am now.
This appears to be an ipad iOS specific problem where no matter what size the video / sound file is it will not draw on the cached files although they clearly are cached and on first load it plays the file OK.
I have tried making the smallest video possible.
I have looked at wrapping in a native app but that's not an option for delivery reasons.
I have tried forcing a reload of the video .src on page load using javascript.
I have tried all possible variations of the manifest file.
Looked at all the Apple developer docs i can stomach.
After reading hundreds of posts, that never actually complete, i think the answer, other than getting the client to buy Android tablets, is to use the local database to store the video in binary form to be retrieved when needed by the app. Unfortunately i am still searching for examples of this and as yet cant find any with any detail. Local saving of text / numerical data isn't a problem. I just dont know if its possible to store the raw file data and retrieve it in a local database.
Sorry its not what you were after but hope it helps point you in less directions.
An update but not much progress. I decided to use base64 ecoded mp4 and paste the text in a simple xml file. My app would read this xml video data and by using in the video tag SRC. This was about a 4MB string.
SRC="data:video/mp4;base64,AAAAA /...../ AA"
This worked fine in Chrome. When i used it on the Ipad the good points are that i didnt ever get the play button crossed out and it tried to play then flashed a message it could not complete this operation.
I had a somewhat related issue with playing video on an iPad. This was in an HTML widget that will reside in an iBooks file. My problem was I couldn't get the videos to rewind, so when you went back to that screen the video was stuck at the end (or still playing if you went back fast enough.)
The workaround I came up with was to load a different video and then reload the video I wanted to play. It's ugly, but it works, and it may provide a workaround for your problem.
var sources = videoEl.getElementsByTagName('source');
sources[0].src = "assets/TeethMouth_Anim_Part3_03.mp4"; // Load some other video into the source, in my case, a video that I'm playing later in the presentation.
videoEl.load();
sources[0].src = "assets/TeethMouth_Anim_Part1_03.mp4"; // Then reload the video I want to play.
videoEl.load();
Although now I see that this thread is a year old so it's probably not an issue anymore. Still, thought I'd post it.

Resources