The video element in my Angular application is not functioning properly in Safari

I am having an issue with playing a video in my angular app. It works perfectly in all browsers except for Safari :

<video controls autoplay muted class="media">
    <source src="https://my-site/files/video.mp4" type="video/mp4" />
</video>

Even after following suggestions from this post on Stack Overflow, the problem persists.

Initially, the issue was related to byte range, which I resolved, but it still doesn't work.

If I place the video tag in a standalone HTML page, the video plays fine, but within my angular app, it fails to do so.

On using Fiddler to check HTTP traces, I noticed some differences that confuse me.

When viewing the requests with the video tag in a separate webpage, there is a specific Range request:

GET https://my-site/files/video.mp4 HTTP/1.1
Host: (my-site)
Accept-Encoding: identity
X-Playback-Session-Id: 14692D0E-A88B-4253-8B8A-BC580AB82174
Accept-Language: fr-fr
Range: bytes=0-1
Accept: */*
User-Agent: Mozilla/5.0 (iPod touch; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
Referer: (http://my-site/)
DNT: 1
Connection: keep-alive

Multiple requests with different ranges are made, and the video plays smoothly.

However, when attempting to play the video from the Angular app, the request looks different:

GET https://my-site/files/video.mp4 HTTP/1.1
Host: (my-site)
Connection: keep-alive
Accept: */*
User-Agent: Mozilla/5.0 (iPod touch; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
Accept-Language: fr-fr
Referer: (http://my-site/)
Accept-Encoding: br, gzip, deflate

This time, there is no Range header, causing the server to send the entire file, resulting in playback issues.

The discrepancy in requests is puzzling as the video URL remains the same (although the HTML page is hosted on a different domain).

iosangularsafarihtml5-video

Answer №1

Have you attempted including the playsinline attribute?

<video controls autoplay playsinline muted class="media">
    <source src="https://my-site/files/video.mp4" type="video/mp4" />
</video>

Answer №2

Give it a shot with using the <iframe>

For instance:

<iframe title="vimeo-player" src="https://player.vimeo.com/video/336853299" width="640" height="360" frameborder="0" allowfullscreen></iframe>

Answer №3

If you're having trouble with your Mp4 file, it may be necessary to convert it using the h264 codec. Keep in mind that Mp4 files have various codecs and Safari might not support all of them due to licensing issues. Here's a code snippet for converting in nodejs:

const ffmpeg = require('fluent-ffmpeg');
const ffmpegPath = require('@ffmpeg-installer/ffmpeg').path;
ffmpeg.setFfmpegPath(ffmpegPath);

function convertFile(input, output, size) {
  return new Promise((resolve, reject) => {
    console.log("Starting file conversion: " + size);
    ffmpeg(input)
      .format("mp4")
      .videoCodec("libx264")
      .size(size)
      .on('error', (err) => {
        console.log("Error during conversion");
        reject(err);
      })
      .on('end', () => {
        console.log("File conversion successful");
        resolve(output);
      }).saveToFile(output);
  });
}

Answer №4

The problem I encountered stemmed from the fact that the video file was located in the assets folder. While it worked perfectly fine on other browsers when accessed through assets, Safari seemed to have a compatibility issue with it. As a solution, I had to move the video file to Azure Storage.

As a result, the updated code now appears as follows:

<video class="px-5" controls autoplay="autoplay" loop>
  <source src="azure-link/video.m4v" type="video/mp4">
  Your browser does not support the videos.
</video>

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

Navigate back to the initial page in Ionic2 using the navpop function

I have an application that needs to guide the user step by step. While I am aware of using navpop and navpush for navigating between pages, I am unsure about how to use navpop to go back to the first page. Currently, I am attempting to pop() twice if ther ...

angulartypescriptionic2

Text in Angular vanishes upon reopening

I have a code snippet where I am trying to allow the user to edit and save a paragraph displayed on a side panel of the main page. Although the code works fine, allowing users to update the text and see it reflected in the network upon saving, there seems ...

javascripthtmlangulartypescript

The production build of Angular 2 with special effects amplification

I am currently working on an Angular 2 Beta 8 app that I need to bundle and minify for production deployment. Despite configuring the system to generate a Single File eXecutable (SFX) bundle, I am encountering issues with creating a minified version of the ...

javascriptangularbundling-and-minificationsystemjses6-module-loader

Leveraging property values in Angular 2 to dynamically generate HTML elements as tag names

Is it feasible to use a property as an HTML tag name? For instance, something along the lines of: <{{property.name}}>Hello world</{{property.name}}> ...

htmlangular

I am experiencing difficulties with my Socket.io connection on IOS as it is unable to successfully establish a

My Node.js server is currently running Websocket using Pomelo. I can successfully run a web application and connect to it at localhost on port 3104. However, when attempting to use socket.io (SocketRocket) for IOS to connect to the same localhost and port ...

iosnode.jswebsocketsocket.iopomelo

The toISOString() method is deducting a day from the specified value

One date format in question is as follows: Tue Oct 20 2020 00:00:00 GMT+0100 (Central European Standard Time) After using the method myValue.toISOString();, the resulting date is: 2020-10-19T23:00:00.000Z This output shows a subtraction of one day from ...

javascriptangulartypescripttoisostring

When a child triggers a non-bubbling event, the view reference in Angular 2 structural directive is automatically cleared

Imagine we have a set of images that need to be displayed: <div *ngFor="let image of images; let i = index"> <div *appMaskImageOnError="i" #mydir> <img [src]="image" alt="" (error)="mydir.remove()"> </div> < ...

angular

Manage sequential observables and await user input

I have a collection of items that I need to loop through in order to determine whether or not a modal dialog should be displayed to the user, and then pause the iteration until the user provides input. The items are stored within an observable as Observabl ...

angulartypescriptrxjsobservablengrx

With *ngFor in Angular, radio buttons are designed so that only one can be selected

My goal is to create a questionnaire form with various questions and multiple choice options using radio buttons. All the questions and options are stored in a json file. To display these questions and options, I am utilizing nested ngFor loops to differ ...

htmljsonangularradio-buttonngfor

What is the process for uploading a video to YouTube with JSON-C format?

While I have successfully uploaded videos to Youtube using their xml input/output format, I am finding their documentation on utilizing json-c for uploading to be lacking. Specifically, I am unsure of what the 'key' is for the json data that need ...

objective-ciosjsonyoutube

Tips for identifying MIME type errors in an Angular 9 application and receiving alerts

While working on my Angular app, I encountered the MIME type error Failed to load module script: The server responded with a non-javascript mime type of text/html. Fortunately, I was able to resolve it. Now, I'm stuck trying to figure out how to rece ...

javascriptreactjsangularecmascript-6

Diverse Options in the Form Generator

Is there a way to save both the value of "member.text" and "member.id" in "this.fb.group" at the same time? I want to display the text value in a table but also send the id value to my service. form: FormGroup = this.fb.group({ result: this.fb.array( ...

angularangular-materialangular-reactive-formsangular-formsangular-formbuilder

I am struggling to delete real-time records in Angular using Firestore

I am facing an issue with my Angular code. I want to be able to delete a record and have it reflect in real-time. When I create a product, it works fine, but deleting the product doesn't work unless I refresh the browser. I'm not sure where the p ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire2

Error: Unable to inject UrlHandlingStrategy as no provider was found

I recently upgraded my application to Angular 14 and encountered a challenging error. Despite configuring RouterModule for Root and child with lazy loading, I am now facing a circular dependency issue related to the Router. I'm unsure how to further d ...

angulartypescriptangular-cliangular-routercircular-dependency

Issues with the performance of input range sliders in iOS Safari is causing frustration

I recently developed a basic range slider component for an application built with NextJS. This component utilizes an <input type="range"> element. While the range slider functions properly on Desktop and Android devices, I encountered sign ...

htmlreactjsnext.jssafari

issues arise when deploying the Angular application on GitHub pages

Encountered an error while attempting to deploy my Angular application on GitHub pages using angular-cli-ghpages The bash commands I used when pushing the website to GitHub were as follows: ng build --prod --base-href "https://dinith72.github.io/aiese ...

angulargithub-pagesangular-cli-ghpages

Is there a way to identify the specific button that was clicked within an Angular Material dialog?

import {Component, Inject} from '@angular/core'; import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; /** * @title Dialog Overview Example with Angular Material */ @Component({ selector: 'dialog-overview-ex ...

javascriptangulartypescriptangular-materialangular-material2

Step-by-step guide on incorporating an external JavaScript library into an Ionic 3 TypeScript project

As part of a project, I am tasked with creating a custom thermostat app. While I initially wanted to use Ionic for this task, I encountered some difficulty in integrating the provided API into my project. The API.js file contains all the necessary function ...

javascriptxmlangulartypescriptionic-framework

What event type should be used for handling checkbox input events in Angular?

What is the appropriate type for the event parameter? I've tried using InputEvent and HTMLInputElement, but neither seems to be working. changed(event) { //<---- event?? console.log({ checked: event.target.checked }); } Here's the com ...

angulartypescript

What could be causing the conditional div to malfunction in Angular?

There are three conditional div elements on a page, each meant to be displayed based on specific conditions. <div *ngIf="isAvailable=='true'"> <form> <div class="form-group"> <label for ...

angulartypescriptfirebase