Chrome mediaelement.js stream and download link conflict - google-chrome

I'm having trouble getting audio streams and download links (for the same file) to play nice on a page in Chrome.
http://500mixes.com
For each audio file, I have a separate player and download link. The player is mediaelement.js. The problem is that clicking on the download button stops the stream. But the opposite (download, then stream) works fine.
I know one solution would be to use a modal pop-up to pull the download link out of the page. But I'm hoping to find an inline solution. Does mediaelement.js have native download functionality?
Thanks!

I haven't looked at your code yet, so this assumes you aren't doing anything strange...
If you link to a download, the browser will often begin the process of shutting down the current page in order to go to the next page. This is a reasonable optimization, since most links are pointing to other pages, not downloads.
To get around this, set the target of your download links to _blank. This opens the download link in a new window. Note that a simple modal dialog on the same page will not work. You must set the target to somewhere else.
Alternatively, add a hidden <iframe> to your page and set the target of those download links to it.

I have been having the same problem, the download link shows but is not clickable. Simply adding target="_blank" within the URL makes the link clickable and makes the file downloadable. Thanks.

Related

browser default loader icon not shown while clicking any link inside an iframe

While accessing any page inside an iframe when I click on any download link or url, browser default loader doesn't work.
I have loaded jqueryui page inside an iframe in below example. when I click on Stable link below Quick download section, it downloads zip file but during download it doesn't show loading bar in browser.
<iframe src="https://jqueryui.com/" title="Jquery" width="1024px" height="768px"></iframe>
https://jsfiddle.net/palak6041/1egsp74b/2/
I am scratching my head for this weird issue as originally in my application file being downloaded takes time and its frustrating for user to wait for it without any indication of something is in progress.
Is it possible to display default browser loader of parent page when we download / navigate in child iframe?

How to Make a Direct download link of an embedded Video

I have a Souce URL of a .MP4 video
here is the URL: http://naruto.manga47.net/Naruto_Dub/040.MP4
to download this video we have to open the link and wait for it to load and then we will be able to
download it by right-clicking on it and saving it as a video.
the Question is That ** I want to get a Direct download link of this video. After pasting the Direct link in a browser it will start downloading the video without any second click**
please tell me if this is even possible.
-Thank You
You can use tag to do this. I suspect somewhere in your code you have an link to this address. Just put a download tag after it like this:
<a href="/download/Naruto_Dub/040.MP4" download>
or like this:
<a href="/download/Naruto_Dub/040.MP4" download="Naruto Video">
and then it will tell the browser to download the file in that link. For more in-depth info read here: https://www.w3schools.com/tags/att_a_download.asp
EDIT: Chrome 65+ and Firefox only support same-origin download links, due to security reasons. You would need to download the file yourself, and put it somewhere on your website and then link it to your own website.
So basically you have a direct link of a file on internet, That is this : http://naruto.manga47.net/Naruto_Dub/040.MP4
the easiest thing you can do is just add ?dl=1 at last in the link in order to download it.
Now the link will be :
http://naruto.manga47.net/Naruto_Dub/040.MP4?dl=1

Chrome can't see images that require username/password

So this is a weird problem, I am attempting to embed a video stream from a D-Link DCS-930L into a web page. My embed looks like this:
<img alt="" src="http://guest:password#192.0.0.10/video.cgi">
The problem is that Chrome displays a broken link image when I load the page, while Firefox and IE load it perfectly the first time.
But the really strange part is that if I right click on the broken image > Open link in new tab the stream loads, and then if I close the tab and refresh the page with the embed it loads there too! So it's definitely something to do with the username/password requirement.
I have also tried creating a user without a password but I see the same issue. There is no setting to disable this requirement in the 930L's control panel that I can find.
Does anyone know how to fix this? If not, is there a way to use PHP to execute a login automatically for the above kind of URLs?
This appears to be intentional behavior on Chrome's part since v19. Bummer.

View PPT files directly in an iframe (with Chrome Office Viewer?)

So I am currently working on a local web-based application. Here are the facts:
I am using the CSS page transitions found here:
http://tympanus.net/Development/PageTransitions/ Due to this, each "page" of my application is contained in it's own div in a single file.
Example:
<div class="pt-page pt-page-1">
<!-- Page 1 content goes here ... -->
</div>
<div class="pt-page pt-page-2">
<!-- Page 2 content goes here ... -->
</div>
...etc
The client wants to be able to view Powerpoint (.ppt) files directly on the web browser. To attempt a quick and dirty solution, I have installed the Chrome extension "Chrome Office Viewer" https://chrome.google.com/webstore/detail/chrome-office-viewer-beta/gbkeegbaiigmenfmjfclcdgdpimamgkj?hl=en to each machine(this application is going to be isolated to just four machines that will be using Chrome for the application, so usability isn't an issue here)
What I WANT to have happen is to link to the .ppt file in an iFrame in one of my <div> pages as seen above, so when the user clicks on a link to view the PowerPoint, the page transitions and the slides can be viewed within the iFrame due to the Chrome Extension capabilitiy.
What CURRENTLY happens is that as soon as the application loads, the page redirects to the browser FROM the original application page to a seperate page to view the .ppt file. I would like this to be done inside of the <iframe> as mentioned earlier instead of an entire page redirect...
Is this possible or am I limited due to the construction of the Chrome Extension itself? I can always have the client save their .ppt as images and then display those within a <div> page, but I figured the Chrome Extension would be the quickest solution. Any ideas? Thanks in advance.
You can use Google Drive web publishing and embed your documents by iframes.
https://support.google.com/drive/answer/37579
Try making a .html or .php (depending if you use php) and link the .ppt in it, and then just put that .html in an iFrame.
<div class="pt-page pt-page-1">
<iframe src="/page 1 file linked here"></iframe>
</div>
<div class="pt-page pt-page-2">
<iframe src="/page 2 file linked here"></iframe>
</div>
If it still redirects then its an extension thing.
Also in future try keeping away on reliance to extensions and browsers, they are not really reliable enough for commercial use.
And whats the intention of this system? If its gonna stay in the office for work why does it need fancy transitions?
EDIT:
If you need those .ppt files to be dynamic you can use PHP for dynamic .html creation.
http://www.microsoft.com/web/solutions/powerpoint-embed.aspx
This might help, unfortunately I couldn't find any other way, using iframe forces the browser to download the file, and embedding also doesn't work here. Moreover, this method also allows you to add controls below, and its almost same as an iframe window. :)

open pdf in iphone webapp

I am trying to open a pdf from my JQM webapp. I have tried iframes/embed/object, and none of those work on an iphone like they do on a desktop browser (scrolling, zooming, etc). I have settled with simply opening the pdf via a link Link. This works fine in the standard browser because the user can simply use the browser back button to navigate back to my app.
The issue that I am having, is that when a user saves the page to thier home screen and opens it using the chromeless safari browser, they no longer have the browser back button. I have tried adding target="_blank" to the link, but apparently JQM hijacks the link and prevents opening in a new page, and I have been unable to get the hacks to work.
I have also tried pdf.js, but I can't seem to even get that to work as my javascript knowledge is fairly limited, and the examples are pretty advanced. The only tutorial that I found used an old version which I couldn't get to work.
Are there any ways to bypass the JQM in openning a link in a new window (which would in turn open in the mobile safari rather than my chromeless web app), or are there any other suggestions for how to open a pdf from a webapp?
Just disable the default jQuery Mobile behaviour, by specifying data-ajax=false.
For example:
Link
See http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
For my webApps I used https://docs.google.com/viewer to embed the pdf into my interface.
So, when I navigate the webApp by home screen icon, the app doesn't close when I open the pdf.
I met the same question: open pdf in webapp with html5.
I've tried several solutions: iframe、embed、pdf.js, but none of them is the best solution.
tips: iOS 9.x upper, open pdf with iframe only show the first page of the pdf file, and there will be a <img /> tag in the iframe body when you debug.
util now I still have this troublesome problem, anyone has solution please write your experience here.
Thank you.