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
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 trying to play a video from an app using Flash Builder 4.7, AIRSDK 31.0 and ios 12.
private function init():void{
holder.addChild(video);
this.addElement(holder);
nc.connect(null);
ns = new NetStream(nc);
ns.client = {};
ns.client.onMetaData = ns_onMetaData;
ns.client.onCuePoint = ns_onCuePoint;
video.attachNetStream(ns);
ns.play("Videos/video.mp4");
ns.addEventListener(NetStatusEvent.NET_STATUS, statusNet);
}
This works on simulators and on android devices, but not for ios devices. I've seen a couple of similiar questions but they are trying to stream an mp4 from a "http" address where mine is using a local file.
I've been asked to stick to mp4 format, although I have read using an FLV file should work.
Special considerations for H.264 video in AIR 3.0 for iOS
For H.264 video, the iOS APIs for video playback accept only a URL to a file or stream. You cannot pass in a buffer of H264 video data to be decoded.
So do I need to find a new way of playing the video other than netStream or am I best to swap to a different file type?
As a side note Adobe says to write your mp4 URLs like this:
("mp4:samples/myvideo.mp4");
My app can't find the file with "mp4:" at the front of the URL.
If you are wanting to play videos that are packaged with your iOS app it's important to ensure you are actually including them when you compile your app.
Untested but something like this should work.
var _dFile:File;
var _ns:NetStream;
var _nc:NetConnection;
var _customClient:Object;
var _video:Video;
_customClient = new Object();
_customClient.onMetaData = metaDataHandler;
_nc = new NetConnection();
_nc.connect(null);
_ns = new NetStream(_nc);
_ns.client = _customClient;
//this is the important bit for finding files within the .ipa bundle.
_dFile = File.applicationStorageDirectory.resolvePath("nameOfYourVideoDirectory/nameOfVideo.mp4");
_ns.play(_dFile.url);
_video = new Video(480, 340);
_video.attachNetStream(_ns);
_ns.addEventListener(NetStatusEvent.NET_STATUS, onNSComplete, false, 0, true);
private function metaDataHandler(infoObject:Object):void {
trace("Length of video",infoObject.duration);
}
private function onNSComplete(e:NetStatusEvent):void{
if(e.info.code == "NetStream.Buffer.Empty") {
//do something
}
}
However, I would highly recommend using an ANE to play video on mobile via the native media player. Take a look at Distriqt MediaPlayer ANE.
I'm developing an HTML5 audio player for use specifically on iPhones, and am trying to get an EQ visualizer working. From what I've found there are two ways to set this up:
One where you load the mp3 file on demand using an XMLHttpRequest:
var request = new XMLHttpRequest();
request.open('GET', 'sampler.mp3', true);
request.responseType = 'arraybuffer';
request.addEventListener('load', bufferSound, false);
request.send();
function bufferSound(event) {
var request = event.target;
var buffer = myAudioContext.createBuffer(request.response, false);
source = myAudioContext.createBufferSource();
source.buffer = buffer;
}
You then use the source.noteOn and source.noteOff functions to play and pause the audio. Working this way, I AM able to get the EQ visualization going. BUT, you have to wait until the mp3 file completely loads to start playing, which won't work in our situation.
The other way to do this is to have an <audio> element already on the page, and you get the audio data from that using:
source = myAudioContext.createMediaElementSource(document.querySelector('audio'));
You then use the audio tag's play and pause functions. This solves the loading problem as it allows the media to be played immediately once the page loads... BUT, EQ visualization is gone.
Both methods show the EQ when testing on Chrome (WIN), so there seems to be something specific with iOS/iPhone that isn't allowing me to get the data from an <audio> tag, but will allow me to get it if I load the mp3 file on demand.
...
Any ideas out there?
Unfortunately Safari doesn't properly support MediaElementSource. It's a bug: Why aren't Safari or Firefox able to process audio data from MediaElementSource?
I'm developing a radio app for BB 5.0 in java. I don't find a way to play the radio from the url stream address that I have. I use multiple formats but nothing works (.pls, .aac, .m3u). I get a RuntimeException every time I try to play the stream. The content is ok, I've checked it.
InputStream stream = Connector.openInputStream(urlPlay);
StreamConnection streamConnection = (StreamConnection) Connector.open(urlPlay, Connector.READ);
InputStream readAhead = streamConnection.openDataInputStream();
byte[] audioData = new byte[500];
readAhead.read(audioData,0,audioData.length);
ByteArrayInputStream in2 = new ByteArrayInputStream(audioData);
player = javax.microedition.media.Manager.createPlayer(in2, "audio/aac");
System.out.println("REALIZE");
player.realize();
System.out.println("PREFETCH");
player.prefetch();
System.out.println("START");
player.start();
Edit:
When I use a URL from my .pls file I hear a little bit of my streaming but It stops immediately.
I suspect the problem is that you are trying to play playlist files instead of an actual stream. Generally, you need to parse those files yourself to get the real stream URLs.
If you open up that .m3u file, you will see that it is just a list of URLs. Take one of those URLs and then try it. Also, be sure you are setting the right content type. You can determine what that type is with cURL or VLC.
I am trying to Autoplay an mp3 file using html5 on ipad but its not working
Here is my code
<audio src="1.mp3" autoplay="" controls="" onended="this.play()"></audio>
The iPad does not support autoplaying of video and audio files. This is a design decision.
I found a way to auto-play video. I think is working on audio, also.
It works if you append/empty every time the video element from the div.
function addListeners()
{
// loop for each list item
$('#mscroll li').each(function looping(index)
{
// onclick...
$(this).click(function onItemClick()
{
// empty left column and description
$("#divplayer").empty();
// append video tag
$("#divplayer").append('<video width="'+video_width+'" height="'+video_height+'" controls="controls"><source src="'+videos_array[index].mp4+'" autoplay/></video>');
$('video').get(0).play();
});
});
}
I have tested this on my Ipad, iOS 5.1.1
Here is a pretty detailed overview of mobile audio and tricks to make it work, created in 2013, so quite recent:
http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/
Good luck!