Using Three.js for creating immersive video textures on mobile devices

I have been experimenting with this particular example on Three.js for a panoramic video experience, found at this link.

While it works perfectly fine on desktop devices, I am encountering issues when trying to render it on mobile. All I see is a black screen and receive the following warnings:

three.min.js:573 THREE.WebGLRenderer: OES_texture_float extension not supported.
three.min.js:573 THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
three.min.js:573 THREE.WebGLRenderer: EXT_texture_filter_anisotropic extension not supported.

Is there any possible solution to make this work on mobile devices, or should I consider it a lost cause?

javascriptthree.jshtml5-video

Answer №1

Auto-playing videos on mobile browsers is disabled by default to conserve data bandwidth, requiring user interaction like a click event to start the video playback. This intention serves well in saving initial data consumption.

Safari HTML5 Audio and Video Guide

Be cautious about unsolicited downloads over cellular networks while using embedded media on Safari for iOS as playback cannot be initiated automatically. The user must always trigger the playback, and a controller is provided automatically on iPhone or iPod touch once the playback is started. However, for iPad, you need to set controls attribute or provide a controller through JavaScript.

To enable video playback on devices like Nexus 7, simply create a playback button as shown below:

playbackButton.onclick = function(){
    video.paused ? video.play() : video.pause();
}

For iOS devices, especially considering video format support limitations, switching to mp4 format may solve part of the issue. iOS Safari utilizes its native fullscreen video player instead of three.js rendering, necessitating an inline video player solution or a js-based currentTime trick for seamless playback experience.

Hopefully, this information addresses your concerns. :)

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

Deselect an item from a three.js scene by clicking on it

In my three.js scene, I have multiple OBJ models, some already loaded in the scene and others added via a button click. If a user adds an object but later decides to remove it, I am seeking guidance on how to accomplish this effectively. My ideal solutio ...

javascriptthree.js

"Implementing a dynamic image thumbnail list with adjustable opacity effects and the ability to add or remove classes

I found a script on another post, but it's not working correctly in my implementation. Everything is functioning properly except that the "selected" class is not being stripped, causing the thumbnails to remain highlighted after being clicked. Here is ...

javascripthtmlthumbnailsopacity

Having difficulties getting basic cube rolling animations to function properly in three.js

I am a beginner in the world of THREEJS and currently working on moving a cube using arrow keys. Take a look at this fiddle: https://jsfiddle.net/mauricederegt/y6cw7foj/26/ Everything is functional, I can move the cube with arrow keys and even rotate it c ...

javascriptanimationthree.js

Adjust the body class dynamically based on the URL in AngularJS

Here is the link to my website To Log In - http://localhost/ang/#/login To Access Dashboard - http://localhost/ang/#/dashboard See below for the HTML code for the body tag If the current URL is http://localhost/ang/#/login, then the body should include ...

javascriptphpjqueryangularjs

The Vue function fails to execute following the mounted() lifecycle hook

I am currently working on a memory game that needs to be initiated right after the page is loaded. In order to start, I have to call createDeck() and showCards() I've experimented with different approaches within the export default {} section such a ...

javascriptvue.jsvuejs2hookloaded

What is the best way to refresh my task list using only basic JavaScript?

How can I update the output to reflect changes when deleting an item from a task list? I used the splice method for deletion but it doesn't seem to be working properly. Any insights on what might have gone wrong? (function(){ // Variable t ...

javascripthtmlarrays

trigger an event once an element has completed cycling using cycle.js

Incorporating the cycle.js library for simple transitions between images: $(document).ready(function() { var first; var $slider = $(".trauringe"); $slider.cycle({ timeout: 8000, next: '#next', prev: '#prev' ...

javascriptjquery

The organizational structure of data in MongoDB for posts, comments, saved content, and likes

I am currently diving into the world of MEANJS web development and working on structuring my data. As a newcomer to the NoSql concept, I am seeking guidance on the best practices to follow. The data I need to store includes: questions answers likes saved ...

javascriptmongodbnosql

How to Implement Click Actions on Elements in AngularJS

Just starting out with angularjs and I have a scenario with jQuery. handleClick(); function handleClick() { var doubleClick = false; $('#text span.word').on('click', function() { var that = this; setTimeout(funct ...

javascriptjqueryangularjs

What is the process for transferring form data from one HTML file and using it as a value in another?

Looking into jQuery to help with the following task. I have two HTML files, one containing a form and the other without. The aim is to transfer the full name inputted in the form from the first file to display it as the full name in the second file. Below ...

javascriptjqueryhtml

Express was unable to save the cookie

I've been attempting to save a login session into a cookie when a user logs in using their username/password, so that the server can recognize that the user is authenticated. However, despite my efforts, the cookie remains unset. Below is the relevan ...

javascriptnode.jsexpresscookiessession-cookies

Utilizing J Query and AJAX to retrieve user details through API without the need for page refresh

I'm new to using Ajax and Jquery. 1) When I try to add a new user using the post method through a form within an HTML Modal, the Modal doesn't automatically close upon clicking the Submit button. I end up having to refresh the page to see if the ...

javascriptjqueryhtmlajaxapi

Exploring the implementation of a functional accumulator inspired by Haskell in JavaScript functions

Exploring Haskell has captivated me, particularly its end-recursive functions with an accumulator. Curiosities: Is there a similar construct in javascript? Is it even practical given that javascript lacks the functional nature of Haskell? Are there any ...

javascripthaskellunderscore.jslodashramda.js

Looking for a way to execute code exclusively when the 'other' option is chosen? Let's tackle this challenge with Javascript and swig

I am looking to utilize swig (my chosen templating engine) for incorporating JavaScript code that will only display when the user selects the 'other' option from the select menu. <div class="form-group"> <select class="custom-select"&g ...

javascriptcssnode.jsswig-template

Refreshing a portion of the view following the submission of a post with jQuery AJAX in ASP.NET MVC

I've been developing a form for my application and I'm trying to implement AJAX submission. The data is successfully sent to the controller, but instead of refreshing the entire page, I want to display a success message on the view. Do I need to ...

javascriptjqueryasp.netajaxasp.net-mvc

What is the method for initiating an event from iframe content to an external website?

Currently, I am developing a chat-bot that is designed to function across all domains. For example, let's say my chat-bot is hosted on 'chat.mybot.com' as an iframe using Angular, and my website is 'example.com'. Due to the differe ...

javascriptangulariframeiframe-app

Opening a fresh window and dynamically populating form fields with Javascript

Recently, I've been diving into the world of JavaScript and attempting to create a functionality where a new window is launched on click after a user inputs information into form fields. The challenge lies in transferring this information into form fi ...

javascripthtml

Incorrect handling of Unix timestamps in AngularJS

I'm facing an issue with timestamps. Let me explain - I have a timestamp coded as 1378028575, which corresponds to Sun, 01 Sep 2013 09:42:55 GMT according to this website. The problem arises when I attempt to format this timestamp using Angular's ...

javascriptunixangularjstimestamp

Arranging an array containing three elements

As I work on my angular app, I have come across the following array: [ { "Name": "Jack", "IncomingTime": "2020-06-19T11:02+00:00", "Outgoingtime": "2020-06-19T11:07+00:00" ...

javascriptangulartypescriptangular8

Guide on using the react array map method to insert elements into a designated Id

Below is an example of an array containing IDs, items, and item notes descriptions. let sampleArr = [ { id:1, item:"item", notes:["one"] }, { id:2, item:"item2", notes:["one","two"] }, { id:3, item:"i ...

javascriptreactjsecmascript-6