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!
Related
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 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
I've been running into an issue now for a while where on some ios devices my webaudio system only seems to work with headphones where as other devices (exact same os, model, etc) the audio plays perfectly fine through the speakers or headphones. I've searched for a solution to this but haven't found anything on this exact issue. The only thing I can think of is that maybe it's an audio channel issue or something.
How can I fix this?
#Alastair is correct, the mute toggle switch does mute WebAudio, but it does not mute HTML5 tags. Thanks to his work I managed to find a work around for the web which enables WebAudio to play even when the mute toggle switch is on. I'd post this as a comment on his reply, but I don't have the reputation.
In order to play WebAudio you must also play at least one WebAudio sound source node and one HTML5 tag during a user action. It is fine if these sounds are short bits of silence. I found that this self contained code works without any extra files needed:
EDIT 11/29/19:
Removed vestigial typescript typedefs. Thanks #Joep. I also realized the code below is woefully out of date and janky. Just consider it an example. Editing this post prompted me to create an open source solution for this. You can see a demo of it here: https://spencer-evans.com/share/github/unmute/ and check out the repo here: https://github.com/swevans/unmute
/**
* PLEASE DONT USE THIS AS IT IS, THIS IS JUST EXAMPLE CODE.
* If you want a drop in solution I have a script on git hub
* Demo:
* #see https://spencer-evans.com/share/github/unmute/
* Github Repo:
* #see https://github.com/swevans/unmute
*/
var isWebAudioUnlocked = false;
var isHTMLAudioUnlocked = false;
function unlock() {
if (isWebAudioUnlocked && isHTMLAudioUnlocked) return;
// Unlock WebAudio - create short silent buffer and play it
// This will allow us to play web audio at any time in the app
var buffer = myContext.createBuffer(1, 1, 22050); // 1/10th of a second of silence
var source = myContext.createBufferSource();
source.buffer = buffer;
source.connect(myContext.destination);
source.onended = function()
{
console.log("WebAudio unlocked!");
isWebAudioUnlocked = true;
if (isWebAudioUnlocked && isHTMLAudioUnlocked)
{
console.log("WebAudio unlocked and playable w/ mute toggled on!");
window.removeEventListener("mousedown", unlock);
}
};
source.start();
// Unlock HTML5 Audio - load a data url of short silence and play it
// This will allow us to play web audio when the mute toggle is on
var silenceDataURL = "data:audio/mp3;base64,//MkxAAHiAICWABElBeKPL/RANb2w+yiT1g/gTok//lP/W/l3h8QO/OCdCqCW2Cw//MkxAQHkAIWUAhEmAQXWUOFW2dxPu//9mr60ElY5sseQ+xxesmHKtZr7bsqqX2L//MkxAgFwAYiQAhEAC2hq22d3///9FTV6tA36JdgBJoOGgc+7qvqej5Zu7/7uI9l//MkxBQHAAYi8AhEAO193vt9KGOq+6qcT7hhfN5FTInmwk8RkqKImTM55pRQHQSq//MkxBsGkgoIAABHhTACIJLf99nVI///yuW1uBqWfEu7CgNPWGpUadBmZ////4sL//MkxCMHMAH9iABEmAsKioqKigsLCwtVTEFNRTMuOTkuNVVVVVVVVVVVVVVVVVVV//MkxCkECAUYCAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";
var tag = document.createElement("audio");
tag.controls = false;
tag.preload = "auto";
tag.loop = false;
tag.src = silenceDataURL;
tag.onended = function()
{
console.log("HTMLAudio unlocked!");
isHTMLAudioUnlocked = true;
if (isWebAudioUnlocked && isHTMLAudioUnlocked)
{
console.log("WebAudio unlocked and playable w/ mute toggled on!");
window.removeEventListener("mousedown", unlock);
}
};
var p = tag.play();
if (p) p.then(function(){console.log("play success")}, function(reason){console.log("play failed", reason)});
}
window.addEventListener("mousedown", unlock);
This is likely because the iPhone's side switch is on "mute". It's very confusing - HTML5 <audio> tags still play fine when the phone is muted, but WebAudio does not. Why? Who knows. But it's a restriction I currently haven't found a way around.
If the iPhone mute button is down, meaning that the iPhone is muted, what is played through Web Audio Api will be muted.
Unfortunately there is no way to check if that physical button (located on the left edge towards the top of the iPhone) is on or off through Javascript.
This issue is completely independent from the fact that in iOS Safari the audio has to be started by a user action for it to be unmuted. There are some tricks that can be done to overcome that fact, including the one suggested by here Spencer, were you use "any action or a specific action" started by the user to "play" a silent audio file to allow subsequently playing audio files to play unmuted.
had same issue, and finally understood problem.
indeed WebView don't play sound on internal speakers if phone is in mute.
when i dig deeper i found a workaround :)
original post => https://stackoverflow.com/a/37874619/8064246
do {
try AVAudioSession.sharedInstance().setCategory(AVAudioSessionCategoryPlayback)
//print("AVAudioSession Category Playback OK")
do {
try AVAudioSession.sharedInstance().setActive(true)
//print("AVAudioSession is Active")
} catch _ as NSError {
//print(error.localizedDescription)
}
} catch _ as NSError {
//print(error.localizedDescription)
}
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 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!