Error message "ERR_FILE_NOT_FOUND" displayed in Ionic Dailymotion iframe player

While viewing the app on a browser, the video player functions properly. However, when accessed on a phone, the following error occurs. I suspect that the issue lies in the 'file:' prefix, but I am unable to remove it using string.replace('file:',''):

The webpage at file://www.dailymotion.com/embed/video/{video_id} could not be loaded because:

net::ERR_FILE_NOT_FOUND

player.ts:

this.video_link = "//www.dailymotion.com/embed/video/"+this.video_id;

player.html:

<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(video_link)" allowfullscreen frameborder="0" width="100%" height="200px" ></iframe>
angularcordovatypescriptionic-frameworkdailymotion-api

Answer №1

The reason for this behavior is attributed to the mechanics of Cordova. It fetches your website from the device's file system, so in the absence of a protocol, it defaults to file://

To resolve this issue, update your link to use https, like so:

this.video_link = "https://www.dailymotion.com/embed/video/"+this.video_id;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble entering text into a React input field

Encountering a puzzling issue with a simple form featuring an input field that inexplicably won't respond to keyboard typing. Initially, suspicions pointed towards potential conflicts with the onChange or value props causing the input to be read-only. ...

reactjstypescriptnext.jsnext-router

Testing the Child Component's EventEmitter Functionality

In my child component, there is an event emitter that sends a boolean value when the style changes in the parent component: export class ExampleComponent implements OnInit, OnChanges { @Output() statusEvent = new EventEmitter<boolean>(); getS ...

angulartypescripttestingeventemittertestunit

Best practices for applying the Repository pattern within a NestJS application

After reviewing the NestJS documentation and examining their sample source codes, it appears challenging to implement a Repository pattern between the service layer and the database layer (e.g. MongoDB). In NestJS, database operations are executed directl ...

typescriptmongodbnestjsrepository-pattern

Bringing in a TypeScript module to an Angular component

Having trouble with including a specific library in my component Here is the code for my component which uses geolib as the library: import { Component, OnInit } from '@angular/core'; import { StationsService } from '../../../services/stati ...

angularnpmnode-modulesangular5

Enhancing an existing Angular1 project to Angular4 while incorporating CSS, Bootstrap, and HTML enhancements

Facing CSS Issues in AngularJs to Angular4 MigrationCurrently in the process of upgrading an AngularJS project to Angular 4, specifically focusing on updating views. However, encountering issues with certain views not displaying the custom CSS from the the ...

angularjsangularupgrade

Misunderstanding the concept of always being right

Here is a code snippet that raises an error in TypeScript: class Status { constructor(public content: string){} } class Visitor { private status: Status | undefined = undefined; visit(tree: Tree) { if (tree.value > 7) { this.status = new ...

typescript

What could be causing the issues with SSL certificates when using Node.js/Express-TypeScript?

I'm currently in the process of transitioning a project's backend from JavaScript (Node.js/Express) to TypeScript. However, I've encountered an unusual issue where FS's readFileSync is unable to access the key.pem or cert.pem files in t ...

javascriptnode.jstypescript

Discovering JSON data in Angular 4

I am working with a JSON data format retrieved from (this.url) { "user": [ { "id": "1", "name": "root", "password": "root" }, { "id": "2", "name": "clienttest", ...

jsonangular

Inconsistent Display of Contact List with Cordova Contacts Plugin

I am experiencing an issue with the contacts plugin in my app on a specific test device (iPhone 5, iOS 9.02). The contact list does not appear and nothing shows up when I search. There are no error messages displayed. However, on other devices such as so ...

androidioscordovaionic-framework

Issue with the functionality of the material tree's parent node may not be operating

I created a material tree with the ability to select up to 42 elements. Once the limit is reached, the nodes become disabled. However, I encountered an issue where if some child nodes are selected while others are disabled due to reaching the limit, the pa ...

angularangular-materialangular8

Use the CLI to install both the alpha and beta versions of Angular on your system

I'm interested in switching to a version of angular that is currently in active development and testing, like 8.0.0-beta, however I currently have 8.1.0 installed. What is the best way for me to downgrade from version 8.1.0 to 8.0.0-beta? ...

angular

Guidelines for integrating a SOAP asmx service into an Angular+8 application using XML implementation

Here is the code snippet I'm struggling with: var xmlItemAll = '<?xml version="1.0" encoding="utf-8"?>' + '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:x ...

asp.netangularxmlweb-servicessoap

Use Angularfire 5 to merge data from multiple lists based on a common key

Ever since the release of Angularfire5, using $key has become a thing of the past. I decided to convert this and stumbled upon a snippet that shows how to change the list into one containing their own key: getRankings(week): Observable<any> { ...

angularionic2angularfireangularfire5

Passing validators for reactive forms from parent to child components is proving to be a challenge

Currently, I have a situation where a parent form component is utilizing a child form component within an Angular reactive forms setup. While I am able to successfully set the values in the child form component, it seems that the validators are no longer f ...

angularangular-reactive-forms

Running `ng serve` in Angular works perfectly fine, but for some reason `ng serve --

Recently diving into Angular, I am still getting the hang of things as a newcomer. Nodejs and Typescript are all set up and good to go. Navigating to my project directory in the command prompt, running 'ng serve' compiles the project successfully ...

node.jsangulartypescriptnpmcmd

Tips on creating tabs in angular7 that toggle between two distinct components

In my Angular 7 project, I have created three different components: ng g c mycomp1 ng g c mycomp2 ng g c mycomp3 Now, I am looking to build a tab within the mycomp1 component that will have the following layout: https://i.sstatic.net/LZdyM.png When the ...

angulartabsangular-materialangular7angular-ui-tabset

Angular: Oops! Encountered some template parsing issues: Surprising closing tag encountered

Recently, I created a brand new project with Angular CLI on 05/25/17. I decided to copy and paste some HTML code into a new component in the project. Surprisingly, this HTML code, which worked perfectly fine as its own standalone page, is now causing compi ...

htmlangularhtml-parsing

How can I incorporate a feature in my Angular application that allows users to switch between different view types, such as days, using JavaScript

Greetings, community! I am currently utilizing version 5 of the fullcalendar library from https://fullcalendar.io/ in my Angular 9 application. I have noticed that the calendar offers various options to change the view type as shown below: https://i.stac ...

javascriptangulartypescriptfullcalendar-4fullcalendar-5

What is the recommended substitute for the "any" type in TypeScript?

Code Slider.tsx import { useSelector, connect } from "react-redux"; import { ProductType, ProductItem, StateType } from "types"; const Slider = ({ products, number }: any) => { ------------------> what type? // const number = ...

reactjstypescriptreduxreact-redux

Unexpected disappearance of form control in reactive form when using a filter pipe

Here is a reactive form with an array of checkboxes used as a filter. An error occurs on page render. Cannot find control with path: 'accountsArray -> 555' The filter works well, but the error appears when removing any character from the fi ...

javascripthtmlangularangular-pipe