I'm trying to bind a url in video from API, but I'm taking this error below, I tried DomSanitizer and others but dosent work.
Error
Failed to load resource: net::ERR_FILE_NOT_FOUND
My last try
load() {
this.liveProvider.load().then((data) => {
this.urlStrean = "http://evcv.mm.uol.com.br:1935/band/terraviva/playlist.m3u8";//this.getSafeUrl(data.result.url);
this.getSafeUrl(this.urlStrean);
console.log(this.urlStrean);
}).catch((error) => {
console.log(error);
})
}
getSafeUrl(url) {
return this.sanitizer.bypassSecurityTrustUrl(url);
}
and in my view:
<video width="100%" controls autoplay>
<source [src]="urlStrean" type="application/x-mpegURL">
</video>
I solved problem with this code below:
constructor(public navCtrl: NavController, private liveProvider: LiveProvider, public sanitizer: DomSanitizer) {
this.liveProvider.load().then((data) => {
this.obj = sanitizer.bypassSecurityTrustResourceUrl(data.result.url);
// this.obj = sanitizer.bypassSecurityTrustResourceUrl("http://evcv.mm.uol.com.br:1935/band/terraviva/playlist.m3u8");
this.trustedUrl = this.obj;
}).catch((error) => {
console.log(error);
})
Related
Here is the code and I am receiving an error while passing this parameter from services.
export class CardsPage {
currentItems: Item[];
id: any;
getData: Object;
categories:any;
constructor(public navCtrl: NavController, public api:Api, navParams:
NavParams, items: Items, public http: HttpClient) {
this.id = navParams.get('idName') ||'';
console.log(this.id);
this.api.getCategoryPosts(this.id).subscribe(data=>{
console.log(data)
this.getData = data
},err=>{
console.log(err)
})
}
openItem(item){
this.navCtrl.push('ItemDetailPage', {
itemName: item
});
}
}
Here is my Ts file:
getCategoryPosts(category: any) {
return this.http.get(`${this.api_url}/posts?
categories=${category.id}`);
}
The error that i am receiving is Reference error: category is not defined Reference error. Category is not defined at new CardsPage
Hello just use ionViewWillEnter to get your parameter and no need to use OR operation while getting parameter so here is the solution.
ionViewWillEnter(){
this.id = navParams.get('idName')
}
then use ionViewDidEnter to fetch data through service.
ionViewDidEnter(){
this.api.getCategoryPosts(this.id).subscribe(data=>{
console.log(data)
this.getData = data
},err=>{
console.log(err)
})
}
i wrapped a website and there are external links which i made to open in System browser, but when I return to in-app browser using hardware back button and again try to open the external links it doesn’t open. It looks like the 'loadstart" occurs only once.Or am i doing anything wrong here?
home.ts
export class HomePage {
constructor(public navCtrl: NavController, private iab: InAppBrowser, public
platform: Platform,private fileOpener: FileOpener, private
transfer:FileTransfer, private file: File, private diagnostic:Diagnostic) {
platform.ready().then(() => {
const browser =
this.iab.create('https://www.tutorialspoint.com/ionic/index.htm','_blank',
{zoom:'yes',location:'no', clearcache: 'yes', clearsessioncache: 'yes'});
browser.show();
browser.on('loadstart').subscribe(
(data) => {
console.log("URL IS", data.url);
this.downloadfile(data.url)
},
err => {
console.log("InAppBrowser Loadstop Event Error: " + err);
}
);
});
}
downloadfile(url) {
var externalCheck = (!url.includes("tutorial.points"));
var pdfCheck = (url.substr(url.length - 4) == '.pdf');
if (externalCheck || pdfCheck) {
window.open(url, "_system", 'location=no');
}
}
}
Is there any solution for this ? any help is really appreciated.Thanks in advance
I am trying to load this https://www.shopify.in/website website using iframe but it gives me below error:
Refused to display 'url' in a frame because it set 'X-Frame-Options'
to 'DENY'
In html:
<iframe class='webPage' name="samplePage" [src]="myURL"></iframe>
In ts:
export class HomePage {
myURL: any;
constructor(public navCtrl: NavController, private sanitizer: DomSanitizer) {
}
initialize = () => {
this.myURL = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.shopify.in/website');
};
ionViewDidLoad() {
this.initialize();
}
}
Then i have tried with jquery. The error is gone but website is not loaded also.
in html:
<div id="loadExternalURL" style="width: 100%; height: 100%"></div>
in ts:
export class HomePage {
constructor(public navCtrl: NavController) {
}
initialize = () => {
$('#loadExternalURL').load('https://www.shopify.in/website');
};
ionViewDidLoad() {
this.initialize();
}
}
How to load this website in the iframe?
I have a typescript file with this part of code:
export class HomePage {
createprofile = {} as CreateProfile;
profileData: FirebaseObjectObservable<CreateProfile>;
constructor(private afAuth: AngularFireAuth, private toast: ToastController, private afDatabase: AngularFireDatabase, public navCtrl: NavController) {
}
goToYourItemsListPage(){
this.navCtrl.setRoot("YourItemsListPage");
}
ionViewDidLoad() {
this.afAuth.authState.take(1).subscribe(data => {
if(data && data.email && data.uid){
this.profileData = this.afDatabase.object(`create-profile/${data.uid}`);
//console.log(data);
}else{
this.toast.create({
message: `Could not find authentication details!`,
duration: 3000,
position: "bottom"
}).present();
}
});
}
}
And in home.html I am adding this code:
<h1>Welcome, {{(profileData | async)?.firstName}}!</h1>
But it is not displaying error nor any value it's just: "Welcome !"
What am I missing here?
I'm a newbie to ionic.
Thank you
I want to make a callback between two page.
In the page 1, i have this code:
DataInfo= [
{
Price: 0,
ClosePrice: 0,
UpdateTime:"",
DefaultPrice:0
}
]
GetClosePrice(i):number{
return DataInfo[i].ClosePrice;
}
i want to get the value of 'i' from the page 2, How can i load the function GetClosePrice() when the navcontroller return to the page 1 (this.navCtrl.pop())
SOURCE PAGE CLASS
this.navCtrl.push(Page,
{
data: this.data,
callback: this.getData
});
getData = data =>
{
return new Promise((resolve, reject) => {
for (let order of orders) {
this.data = data;
}
resolve();
});
};
TARGET PAGE CLASS
constructor(public navCtrl: NavController, public navParams: NavParams)
{
this.callback = this.navParams.get('callback');
this.data = this.navParams.get('data') || [];
}
sendData(event: any): void
{
this.callback(this.data).then( () => { this.navCtrl.pop() });
}
TARGET PAGE TEMPLATE
<button ion-button (click)="sendData($event)">
I answered similar question in Ionic forum. I just used Events listeners to achieve this behaviour.
MainPage-
import { NavController, Events } from 'ionic-angular';
import { OtherPage } from '../other/other';
export class MainPage{
constructor(private navCtrl: NavController,
private events: Events) { }
private pushOtherPage(){
this.events.subscribe('custom-user-events', (paramsVar) => {
// Do stuff with "paramsVar"
this.events.unsubscribe('custom-user-events'); // unsubscribe this event
})
this.navCtrl.push(OtherPage); // Push your "OtherPage"
}
}
OtherPage-
export class OtherPage {
// Under some function
this.navCtrl.pop().then(() => {
// Trigger custom event and pass data to be send back
this.events.publish('custom-user-events', myCustomParams);
});
}
Try this one - ionic2 pop with params