I am unable to play html5 audio on iPad Safari..i have tried
var audio = document.createElement('audio');
audio.type = "audio/mpeg";
audio.src = audioUrl;
x.appendChild(audio);
audio.load()
audio.play();
and
x.innerHTML = '<audio autoplay=autoplay><source src="'+audioUrl + '" type=audio/mpeg /></audio>';
I am able to play on desktop Safari, but on the iPad it says, cannot play movie...
I am using ios 4.3
One important thing which i might think i need to look at is adding mime type to htaccess..though not sure how and if that is the issue...But just to add, i can play the fallback mp3 using embed on older browsers..so does that mean even the html5 audio should work without the need of adding the MIME type?
Please help me. Thank u..
Some video and audio types are served up by certain browsers with no configuration on your part (which is likely why mp3 files are being served), but you will need to add a mapping to .htaccess in order for the MPEG audio to work for you. Just open your .htaccess file for your site and add (something like) the following line
AddType audio/mpeg .mp3
Hope that helps!
Related
I am using ngx-videogular in one of my application to stream live media. It works perfect everywhere except the browsers in iPhone/iPad. I am using Hls.js along with ngx-videogular for streaming. Is there anything else I need to consider to make it working on browsers (chrome/safari/firefox) in iOS (iPhone or iPad).
Thanks in advance
I have found the solution just posting it here in case if someone needs in the future
Before reading further please take a look about the issue described in detail here which helped me to understand the root cause
https://github.com/video-dev/hls.js#embedding-hlsjs
If you are using npm you need to add the Hls.js in angular.json
You have to import Hls from hls.js in you videoPlayer component
import Hls from 'hls.js';
and you need to update your ngAfterViewInit() method like below
ngAfterViewInit(): void {
this.videoElement = this.videoElementRef?.nativeElement;
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource('your media url');
hls.attachMedia(this.videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
this.videoElement.play();
});
}
else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
this.videoElement.src = 'your media url';
}
}
Make sure you have the HTMLVideoElement and the element reference created in ts file
#ViewChild('videoPlayer') private videoElementRef: ElementRef;
videoElement!: HTMLVideoElement;
And your HTML video tag need to be updated with the reference like this
<video #videoPlayer autoplay controls playsinline>
Have a good day!
I'm using WebApi to serve videos on a website. I've tested this on all major desktop browsers and the HTML5 Video tag plays the video as expected. However, I can't get this to work on iPhones (Mobile Safari). The Get() method is never called even after pressing the play button.
WEBAPI CODE
public HttpResponseMessage Get()
{
var path = System.Web.Hosting.HostingEnvironment.MapPath("~/Content/testbw2.mp4");
var stream = new FileStream(path, FileMode.Open, FileAccess.Read, FileShare.Read);
if (Request.Headers.Range != null)
{
try
{
HttpResponseMessage partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent);
partialResponse.Content = new ByteRangeStreamContent(stream, Request.Headers.Range, _mediaType);
return partialResponse;
}
catch (InvalidByteRangeException invalidByteRangeException)
{
return Request.CreateErrorResponse(invalidByteRangeException);
}
}
else
{
HttpResponseMessage fullResponse = Request.CreateResponse(HttpStatusCode.OK);
fullResponse.Content = new StreamContent(stream);
fullResponse.Content.Headers.ContentType = _mediaType;
return fullResponse;
}
}
HTML
<video controls>
<source src="http://localhost/WebApplication24/api/range" type="video/mp4">
Your browser does not support the video tag.
</video>
If I change the video src to point directly to the file...
src="http://localhost/WebApplication24/Content/testbw2.mp4"
It works so I know this isn't an encoding issue.
Is there something I am doing wrong? I get the feeling mobile safari wont request the video src if the url doesn't end with .mp4
Here are the possible reasons (some) that your file does not work and possible solutions:
Safari is fully expecting an actually-named MP4. No other combinations of file and mime-type works. The other browsers opt for the WEBM file first, especially Chrome. source
On iOS prior to 7.0.2, Safari does support HTML5 Video, the Quicktime Player has to be installed in order for this to work. source
Also there are issues in which steaming doesn't work in iOS 7 where as local files does. source
For some reason videos would not play on iOS unless controls="true" is set. source
iOS doesn't support all the profiles that h.264 provides. You have to encode your h264 with a baseline profile only in order for it to be playable on iphone/ipad. Encoding with Miro Video Converter might help. source
Can we open & view .doc, .docx, .rtf, .ppt, .pptx, .xls, .xlsx file in iphone using UIWebview?
I am using Document directory to show the file.
.doc file is working fine here… but rest of the files' extensions are not working..
if any one has implemented this then please help me...
any code snippet or any web link help...
thanks in advance...
You may want to look at the QuickLook Framework for iOS:
https://developer.apple.com/library/ios/documentation/FileManagement/Conceptual/DocumentInteraction_TopicsForIOS/Articles/UsingtheQuickLookFramework.html
It supports the following formats:
iWork documents
Microsoft Office documents (Office ‘97 and newer)
Rich Text Format (RTF) documents
PDF files
Images
Text files whose uniform type identifier (UTI) conforms to the public.text type (see * Uniform Type Identifiers Reference)
Comma-separated value (csv) files
More specifically you may want to look at the QLPreviewController: https://developer.apple.com/library/ios/documentation/NetworkingInternet/Reference/QLPreviewController_Class/Reference/Reference.html#//apple_ref/occ/cl/QLPreviewController
with swift 2.2
For showing PDF and DOC file I have use following code snip
//Document file url
var docUrl = NSURL(string: "https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwjjwPSnoKfNAhXFRo8KHf6ACGYQFggbMAA&
url=http%3A%2F%2Fwww.snee.com%2Fxml%2Fxslt%2Fsample.doc&usg=AFQjCNGG4FxPqcT8RXiIRHcLTu0yYDErdQ&sig2=ejeAlBgIZG5B6W-tS1VrQA&bvm=bv.124272578,d.c2I&cad=rja")
let req = NSURLRequest(URL: docUrl!)
webView.delegate = self
//here is the sole part
webView.scalesPageToFit = true
webView.contentMode = .ScaleAspectFit
webView.loadRequest(req)
Note: make sure on backed side (for api) we have to define content-type as document in headers.
Try this:
[self.m_webView loadRequest:[NSMutableURLRequest requestWithURL:[NSURL fileURLWithPath:_m_filePath]cachePolicy:NSURLCacheStorageAllowedInMemoryOnly timeoutInterval:3.0]];
You can change timeoutInterval and cachePolicy, in sometime you have to wait more time to loading.
A PDF file is generated on server side and pushed to client end for download. While the download works in all browsers on windows , fails on IPAD.
Please advise.
Specification : OS 6, Safari 6.1 , Chrome 23.0.1271.100
Please note: In this application pdf is not downloaded on to a new url (NO REDIRECTION).
General behavior: IPad browser (safari / chrome) does not support the download window, hence its expected to open the pdf and provides option to view in pdf compatible apps. Which is not currently happening.
When i debug the below servlet action code for download, the pdf file is successfully generated on server but browser on Ipad does not show :-(
Code sample :
/** Setting response Header **/
response.setHeader("Content-Type", "application/pdf");
response.setHeader("Content-Disposition", "attachment;filename=sample.pdf");
response.setHeader("Connection", "close");
response.setHeader("Cache-Control","cache");
response.setHeader("Pragma","cache");
response.setDateHeader ("Expires", dt.getTime() + 100000);
/** Writing to output **/
InputStream stream = info.getInputStream();
OutputStream os = response.getOutputStream();
try {
response.setContentType(contentType);
copy(stream, response.getOutputStream());
}
finally {
if (stream != null) {
stream.close();
}
}
After testing, the download action code pasted above appeared to be working fine as the issue was BROWSER specific.
Andriod Tablet - Firefox browser downloads the pdf onto pop up window.
IPad : Safari - FIX: Forced the content to open up in a new tab, something like this :
window.open(print_url);
where print_url is the baseurl+action.do+additional_parameter.
To display a pdf instead of asking the browser to save it, use "inline" instead of "attachment".
response.setHeader("Content-Disposition", "inline;filename=sample.pdf");
Also, you're setting content type twice, once in the header and once using setContentType().
I'm not sure if those two headers interact or cancel each other out, so can't say for sure that it's a source of error, but it seems like something to consider changing.
I am trying to play HTML5 on iPad Safari .
Below is my code;
var audio = document.createElement('audio');
audio.type = "audio/mpeg";
audio.src = audioUrl;
x.appendChild(audio);
audio.load();
audio.play();
Now my audio files are called over https and for some reasons, it cannot play audio over https...I mean if I try manually playing mp3 files on http, it plays them fine..
How do I fix this issue?
var audio = document.createElement('audio');
audio.type = "audio/mp3";
audio.src = audioUrl;
x.appendChild(audio);
audio.load();
audio.play();
audio/mpeg may be the issue. Safari on iOS (including iPad) currently supports uncompressed WAV and AIF audio, MP3 audio, and AAC-LC or HE-AAC audio. HE-AAC is the preferred format.