Not sure if it's related to Ionic, but when the page is loaded I have a button that play a sound.
If I click on that button - the sound does play.
Then, I wanted to play the same sound from that button - but when the page is loaded, so when the page is loaded - sound will play, when you click on that button - same sound will play.
NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
I tried using ionViewDidEnter, setTimeout for 5 seconds ... but I'm keep getting this error msg of permission ...
UPDATE - MEI score
On purpose I set my permissions for Auto play sound: Block for finding the right solution.
I can raise the MEI score according to the following statement:
On desktop, the user's Media Engagement Index threshold has been
crossed, meaning the user has previously play video with sound.
This means:
- if somewhere on previous pages - I made a sound - switching to any other page - will also trigger sounds.
- Or a valid click ( that loads a silent sound just to "collect" the permissions ) - also does the trick ..
Counting on that - when loading the Ionic project for the first time, then home.page.ts is being loaded, the trick here, is, when I click on the menu item for selecting an inner page to go to -> this is considered a valid click event for allowing playing audio files - in which the sound which didn't work before ( because I kept refreshing the same page w/o any clicks ) - now works on page switch..
UPDATE for background music ( for video games )
Found this thread ... I think it's the only way
How to make audio autoplay on chrome
It sounds like your issue is more related to browser permissions on automatically playing sounds.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
You can find more information here:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio
The article goes on to suggest that when initiating programmatic audio play, a promise will be returned which can be used to handle success/fail cases, e.g.
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
Related
[Goal]: To record the sound of a tab and at the same time hear the sound while it's being recorded
[Means]: To use chrome.tabCapture because it's less invasive than chrome.desktopCapture or navigator.mediaDevices.getDisplayMedia. The former provides a better user experience as opposed to the latter which asks for tab selection every time and then intrusively shows the blue rectangle with a status bar and the "Stop Sharing" button
[Issue]: Tab sound is muted after getting the stream (recording not necessary, only calling getUserMedia) and can not be unmuted. Is this a bug? How can it be avoided?
[Technicals]:
Obtain the stream id in a foreground page (popup, options, or iframe pointing to an extension page, injected in the current DOM by a content script) because that's the only place where tabCapture is available
const tabId = ...get current tab id...
chrome.tabCapture.getMediaStreamId({ consumerTabId: tabId }, function(streamId) {
// send the streamId to the content script
})
Receive the streamId then use it to start the capture
const options = {
audio: {
mandatory: {
chromeMediaSource: 'tab',
chromeMediaSourceId: streamId
}
}
}
navigator.mediaDevices.getUserMedia(options).then((tabStream) => {
// at this point the sound of the tab becomes muted with no way to unmute it
});
Just invoking tabCapture will mute the tab. AudioContext source connecting to the default destination doesn't do anything for this stream and no error is thrown. If the callback promise from getUserMedia is empty, the sound of the tab comes back on its own in about 20 seconds or so. If MediaRecorder actually uses the stream to record the sound, the sound doesn't come back until recording is stopped. The sound of the tab is present in the recording, just muted while recording.
[Comparison 1]: Obtaining a MediaStream directly with chrome.tabCapture.capture instead of the above mechanism works as intended. The tab sound is muted, but can be reconnected to the speakers using AudioContext. The issue with this approach is that chrome.tabCapture.capture can't be started successfully in an injected iframe (always fails with the cryptic "Error starting tab capture"), so there's no way to capture the sound. It does work in a popup though, but not really an option given its volatile nature.
[Comparison 2]: chrome.desktopCapture works in the opposite way. The sound is always present in the tab while recording and can not be muted, not that this poses a problem.
In my adobe air application, i've managed to implement Revmob ads: Rewarded video and banners.
I'm still in my testing mode, so when i run the game i will get the blue Revmob Banner at the bottom of the screen as expected. The first problem is, whenever i click on the ad, it will popup a window, and in 2 seconds it disappears without even loading anything, and my game keeps running in the background!
I've tried to trace and see if the ad is getting dissmissed, but i didn't get any trace :
case RevMobAdsEvent.BANNER_DISMISSED:
{
trace( "RevMob banner dismissed");
break;
}
should i manually pause the game whenever the user clicks on the banner? or would it automatically pause? because it seems that the game continues!
When is BANNER_DISSMISSED called?
If i have to manually pause, how can i do so ? Note that i have timers running, and unsing stage.framerate = 0 will stop the game but not the timers.
Is it normal that the window automatically disappears? how can i test anything?
Hi Elias,
We have test our SDK and could not reproduce this issue with the banner click.
Could you please check if you are using the latest version available here?
In case you are with the latest version, could you send us the log shown when calling
revmob.printEnvironmentInformation();
and also your flash version?
About the questions you raised:
Yes, you should manually pause the game when the user clicks on any of our ads. You can check here all listeners fired when a user clicks in any ads, always ending in "_CLICKED"
BANNER_DISMISSED is called if you call
revmob.hideBanner(); or revmob.releaseBanner();
Each app has it's own way of pausing itself, like when a user hits pause button, you should probably use the same logic you use in that scenario
No, that's not the behavior we are expecting. You should see a webview with our message saying the click in your ad was successful, if you provide the information asked above in this answer, we will have a more close look into it
Hope to have cleared your doubts, and as always, should you have any further questions, just contact us.
Best regards,
I am building a web page with a list of video records. Clicking on each video record opens a modal dialog on the same page with detail of the record and an HTML5 Video player.
A user can open one video, close it, and open another as many times as they want. However, on Chome specifically, after 3-5 videos, the browser starts hanging for upwards of two minutes while displaying a message "waiting for socket".
Doing some reading, I have narrowed it to Chrome's inability to open more than 6 connections to the same host.
I must be doing something wrong with how I dispose of the Media players. I believe the socket remains open to the media for some period even though the html for the player has been removed from the dom.
Using:
Bootstrap,
MediaElement.js,
HTML5 Video,
MVC,
Controller returning "Range Request" of FilePathResult
// Handling Bootstrap Modal Window Close Event
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
var player = xr.ui.mediaelement.xrPlayer();
if (player) {
player.pause();
player.remove();
}
});
I am going to go for my Self Learner badge, here, and answer my own question.
I did about 8 hours of research on this and came up with a great solution. Three things had to be done.
Set the HTML5 video src to something other than the original URL. This will trigger the player to close the open socket connection.
Set the HTML5 video src to a Base64 encoded data object. This will prevent the Error Code 4 issue MEDIA_ERR_SRC_NOT_SUPPORTED.
For issues in older versions of Firefox, also trigger the .load() event.
My Code:
// Handling Bootstrap Modal Window Close Event
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
var player = xr.ui.mediaelement.xrPlayer();
if (player) {
player.pause();
("video,audio").attr("src","data:video/mp4;base64,AAAAHG...MTAw");
player.load();
player.remove();
}
});
I came up with the idea to load the data object as the src. However, I'd like to thank kud on GitHub for the super small base64 video.
https://github.com/kud/blank-video
Added a line between pause() and remove():
// Handling Bootstrap Modal Window Close Event
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
var player = xr.ui.mediaelement.xrPlayer();
if (player) {
player.pause();
("video,audio").attr("src", "");
player.remove();
}
});
I was wondering what the difference between loadedmetadata and the canplay event listeners for video. According to MDN:
canplay Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the CAN_PLAY readyState.
loadedmetadata The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.
There are also two event listeners including loadeddata and loadedstart.
For my use case, I want to wait for the video element to be loaded so that I can grab the video.currentTime. My timeupdate function uses this information but I believe the video doesn't fully load so it throws a small error that it can't grab the currentTime of the video.
What is considered best practice for waiting for a video to load or play?
canplay usually implies that enough content has been loaded that, assuming network conditions remain constant, the browser will be able to play to the end of the content without buffering. This normally only fires after loadedmetadata as that metadata is what tells the browser the length and other important information about the content.
loadedmetadata only refers to the metadata about the content itself - in the case of an mp4 file for instance that would be extracted from the MOOV atom (hence it being best practice to encode the mp4 so that is at the start, not the end as default, of the file on disk)
If you only need access to things like currentTime and are less concerned with buffer-free playback then loadedmetadata should suffice, but my personal preference (if the usecase will be playing through without skipping in the majority of views) would also to be wait for canplay just to create a better user experience.
The canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
canplay will be fired first and then the canplaythrough. You can use these events to change the UI like :- remove loader and start the play.
The loadedmetadata event is fired when the metadata has been loaded. The duration and dimensions of the media and tracks are now known.
The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame. Let's assume a video is if 10 seconds. You have set the video's currentTime to 5s. Then loadeddata will be fired once the 5th seconds frame has been loaded.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
I'm interested in uploading a series of files to my web server and directing viewers to page which will autoplay the videos from a specific point dependent on the current time. My intention is to create the illusion of a live stream or actual TV channel, where they are unable to control the playback, but will return to the same point if they refresh the page.
I'm having difficulty finding answers, since it's descriptively so close to an actual webcast.
Here's my thought process on a solution.
Use the JavaScript Date Object API to capture the current time
Include your video with preload set to true, and controls false
Then use onLoad() and setup your video in JS
$(video).get(0).currentTime = XX; //You need an algorithm based on the time & length of video
$(video).get(0).play();