Unfortunately, Safari and iOS do not support the video functionality

I am encountering an issue with my HTML5 sample video not loading in Safari 11 on OSX, but working perfectly fine in Chrome and Firefox. Additionally, the video is not functioning on iOS at all (neither in Safari nor in Chrome).

Below is the HTML code:

<video id="VideoElement" width="200" height="160" muted controls src="/static/media/fitness/theraband1.mp4" type="video/mp4"></video>

However, I suspect that the HTML code is not the problem since I cannot even access the video on Safari with a direct link to the file. If you want to test it yourself, here is the link: Placeholder video

The application is built using Python 3 and Django 2. The video cannot be loaded using the pythonanywhere page or my local Django development server.

I have already searched on Stack Overflow for a solution, but have been unsuccessful so far. For example, this question on HTML5 Video tag not working in Safari, iPhone and iPad mainly focuses on the HTML and video format, which seem fine in this case).

djangohtmlvideosafarihttp-headers

Answer №1

I managed to resolve the issue, albeit with a somewhat clumsy solution. Instead of referencing the file on pythonanywhere, I opted to use github as a host and it did the trick:

Previous method that didn't work:

<video id="VideoElement" width="200" height="160" controls muted src="http://USER.pythonanywhere.com/static/video.mp4"  type="video/mp4"></video>

New method that works:

<video id="VideoElement" width="200" height="160" controls muted src="https://github.com/USER/mysite/blob/master/static/video.mp4?raw=true"  type="video/mp4"></video>

I am using the exact same file from the same github repository that I pull onto pythonanywhere. It is possible that pythonanywhere does not support HTTP byte-range requests (?) but regardless, the issue has been resolved now.

Answer №2

While Django is capable of serving videos and other media types, using the development server for this purpose may not be ideal as it is not a full-fledged web server. Consider utilizing servers like nginx or apache to serve your site without needing to host static content elsewhere.

Here's an example setup:

  1. Use Gunicorn to run the app and listen on a socket (e.g., /var/sockets/mysite.sock)
  2. Configure the web server accordingly to serve the site.
    Reference:

It's also recommended to run collectstatic and set up the webserver to load static content from this location. While not mandatory, this approach allows the web server to cache static content for improved performance.

We hope this information proves useful.

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

Using XSL variables in JavaScript code

I've noticed that there have been similar questions asked, but none of the solutions seem to help in my case. So, I have this variable named 'var': <xsl:variable name="var"> val </xsl:variable> Now, I want to use it like thi ...

javascripthtmlxsltinnerhtmlxsl-variable

Verify if there is a date present within the JSON entity

I have a PHP array containing date strings and I want to validate them using a native HTML5 date input element. To achieve this, I have converted the date array into a JSON object for use with JavaScript: <script> var date_array = <?php echo json ...

javascriptjsonhtmldateobject

"Unlocking the potential of AngularJS: A guide to accessing multiple controllers

I am trying to set a variable in one instance of a controller and read it in another. The variable I need to set is within the object vm (so $scope cannot be used). This is the code for the controller: app.controller("AppController", function(){ var ...

javascriptangularjshtml

Placing a div over a JavaScript element

Is it feasible to overlay a div(1) with a background image on top of another div(2) that contains JavaScript (like Google maps API v3)? I have experimented with z-index without success, and I am unable to utilize absolute positioning because I depend on t ...

javascripthtmlcss

Is it possible to alter the color of an icon image using CSS?

I'm currently exploring ways to modify the color of an image that has a transparent and solid color split. My goal is to change the white portion for hover effects, and create a dynamic way to alter colors within WordPress without relying on Photosho ...

jqueryhtmlcss

Tips for choosing a particular list item using jQuery: retrieve the attribute value of 'value' and showcase it on the webpage

I have a task that requires the following: Implement an event listener so that when you click on any list item, the value of its "value" attribute will be shown next to this line. In my HTML, I have an ordered list with 8 list items. The values range fro ...

javascriptjqueryhtmljquery-selectorsjquery-events

Ensuring that a header one remains on a single line

Within this div, I have set the width and height to be 250px. Specifically, the h1 element inside the div has a height of 50px. Users who are updating content on my website can input any text they desire within this box. However, when the text within the ...

htmlcss

Using a declared const in a separate React file

I've been searching for a solution, but haven't found anything that helps. I'm trying to retrieve data from an API and pass it to another page. The information is currently defined as "drink.strDrink", including the name and image. However ...

htmlarraysreactjsapi

Unable to eliminate italicized text within collapsible content

Despite having no programming experience, I am attempting to create a FAQ section for our help site using collapsible sections for the Q&A. While I've managed to achieve most of what I wanted, there is one element that stubbornly refuses to change. De ...

htmlcss

A guide on extracting data from a Script element in an HTML file and saving it to a CSV file using Python Selenium

Looking for help with optimizing a Python script that extracts data from the Script tag on an HTML web page. The current output saved in a CSV file is not meeting my requirements: (1) the format is incorrect, and (2) there is unnecessary content included. ...

pythonhtmlseleniumcsvweb-scraping

Alter the background-color of the parent div when an input is checked using CSS

.chk-circle { width: 8px; height: 8px; background: #afb0b5; border-radius: 100%; position: relative; float: left; margin-top: 4px; margin-right: 8px; } .chk-circle label { display: block; wi ...

htmlcss

Assigning websockets to a global variable may cause them to malfunction

I'm utilizing websockets in conjunction with JavaScript and HTML5. Here is the code snippet I am currently working with: <input type="text" onFocus="so = new Websocket('ws://localhost:1234');" onBlur="so.close();" onKeyUp="keyup();"> ...

javascripthtmlnode.jswebsocket

Challenges encountered when redirecting users with a combination of javascript and php

I have a login form that triggers a JavaScript function upon submission. This function calls a PHP page to process the input. The issue I'm facing is with how the redirections are displayed based on the user's role type. It attempts to display t ...

javascriptphpjqueryhtmlforms

Exploring the depths: Retrieving nested object attributes using ngFor

Trying to display the "type" value in the ngFor table resulted in receiving object '[object Object]' of type 'object.' NgFor only supports binding to Iterables such as Arrays. json [{ "id": 123, "name": "Paul", "cars": { ...

htmljsonangular

Is there a way to set the menu to automatically open when the page loads?

Looking for some help with a slide out menu that I want to be always open and cannot be closed. I tried changing the open=true setting to open=false but it didn't work as expected. Here's the code snippet below. I aim to remove the open and close ...

javascripthtmlcss

Commitment of service within AngularJS controller using the "as" syntax

I'm experiencing an issue with the code snippet below. I prefer using the controller as syntax and assigning data to 'this' instead of $scope. The problem is that in this scenario, when using $scope.user everything works fine, but when tryin ...

javascripthtmlangularjs

Tips for adjusting the value of a textbox up and down

I am facing an issue with my booking flight form that is supposed to take input from users regarding the number of travelers. I have three textboxes for Adult, Children, and Infants respectively, along with a main textbox to display the final result. Howev ...

javascriptjqueryhtmlcss

Deciphering HTML with AngularJS

We are currently working with AngularJS version 1.5.6 and facing an issue with HTML characters not being displayed correctly in our text. Despite trying various solutions, we have been unsuccessful in resolving this issue. We have explored numerous discuss ...

javascripthtmlangularjsdecode

Exploring the Features of PrimeNG Table Component in Angular 8

After attempting to implement p-table (PrimeNG table) in my Angular project and importing all necessary dependencies and modules using the CLI, I encountered the following error: ERROR: The target entry-point "primeng/table" has missing dependencies: - @ ...

htmlangulartypescriptangular-materialprimeng

Using jQuery to create a nested table

I have a table that I would like to customize so that when a user clicks on a row, only the child table under that specific row is visible while the child tables under other rows are hidden. How can I achieve this using jQuery? <table class="mainTabl ...

jqueryhtmlhtml-table