Tips for Halting Media Playback in UIWebView

Currently developing a browser with support for multiple tabs on the iPad, but facing an issue due to iOS restrictions that only allow one tab to play audio/video at a time. When attempting to play media in multiple tabs simultaneously, it results in all audio stopping and not resuming.

I've observed that Google Chrome's browser handles this by stopping media playback in inactive tabs. I'm curious about their approach. While I am aware of using 

[webView loadRequest:NSURLRequestWithString(@"about:blank")];
to completely stop media playback, it leaves a blank screen. My goal is to simply pause the media without affecting the page display.

Is there a JavaScript solution to halt media playback in a UIWebView? If so, how would I implement it (as someone unfamiliar with JavaScript)?

Thank you in advance!

javascriptobjective-ciosuiwebviewmedia-player

Answer №1

When using the 

[webView stringByEvaluatingJavaScriptFromString:]
method, there are some simple techniques that can be employed.

For instance, consider the following approach:

[webview stringByEvaluatingJavaScriptFromString: @"document.querySelector('video').pause();"]

This code snippet is effective in pausing the first video found on the page. However, for iPad devices, a more advanced script is required to handle multiple videos present on the webpage.

var videos = document.querySelectorAll("video");
for (var i = videos.length - 1; i >= 0; i--){
        videos[i].pause();
};

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

Removing a Node in VisJs in Real Time

function activateAddEdgeMode(nodeId){ network.addEdgeMode(); } /**looking to implement a method similar to network.addEdgeMode(); that will allow for node deletion. For instance: network.deleteNodeMode()*/ ...

javascriptvis.js

Mastering the onKeyPress event for Material UI text fields: A step-by-step guide

I have a TextField component from Material UI as shown below: <TextField id="todo-textarea" label="Enter new todo" placeholder="ToDo" onChange={this.props.toDoOnChange} onKeyPress={(ev) => { ...

javascriptreactjsmaterial-ui

Exploring ReactJS: Utilizing the useEffect Hook for Retrieving Various Data Sources

I have recently started working with react and currently have a function that fetches data in my useEffect hook. I am using a loading state to handle component rendering, and then populating my state component with the fetched data successfully. However, ...

javascriptreactjs

What is the proper way to reference a computed symbol that has been inherited as a function in an extended class

As a newcomer to Typescript, my understanding of the code might be lacking. I am currently working with the Klasa framework, which is built on top of Discord bot framework using Discord.js. The framework recently introduced plugin functionality and there a ...

javascripttypescript

Exclusively for Numerical Input with Number Keys

A customer on a website requires a Zip Code field that only accepts 5-digit numbers and triggers the numeric keypad on iOS and Android devices. It should also be compatible with external number pads on laptops. I've tried various approaches like keyC ...

javascriptjqueryhtml

Passing images as props to be utilized with next/image in NextJS

Below is the content of my index.js file: import Head from 'next/head' import Layout, { siteTitle } from '../components/layout' import Homecard from '../components/homecard' import logo from '../public/images/logo.jpg&apo ...

javascriptreactjsnext.js

Update the PHP webpage dynamically by utilizing AJAX and displaying the PHP variable

I am working on a PHP page that includes multiple queries, and I would like to be able to include this page in my index.php file and display the results with an automatic refresh similar to the Stack Overflow inbox feature. Is there a way to achieve this ...

javascriptphpajax

Access the UIWebView from a selected row in UITableView

Here is the code for my initial view controller that includes a tableview I am looking to display a UIWebView on the next page. import UIKit class menuTableViewController: UITableViewController { var menuNameArr:Array = [String]() var iconeImage:Array ...

iosswiftuiwebview

Extracting public data from social media profiles as displayed in Smartr

Is there any pre-existing API or reference material available for achieving this task? I am interested in accessing public social data without the need for users to manually link their accounts to our site. ...

c#javascriptsocial-networking

Challenges with touch interactions

Recently, I've encountered a challenge with implementing a feature on my app involving handling touch events on a button. The requirement is to change the image based on the duration of the touch - less than 1 second triggers action X, while longer th ...

iosobjective-cuigesturerecognizertouchesbegan

Overlapping of JavaScript Array.push() function within nested arrays causing duplication

Recently, I encountered a puzzling situation while attempting to create arrays with three levels of depth. It may seem crazy, but this approach was the most suitable solution to my problem at the time. The code snippet below illustrates how these nested ar ...

javascriptnode.jsarraysmultidimensional-array

AngularJS - utilizing the directive $parsing to evaluate an expression and bind it to the scope object

I have set up my isolated directive to receive a string using the @ scope configuration. My goal is to convert this string into an object on the scope, so that I can manipulate its properties and values. Here's how it looks in HTML: <div directiv ...

javascriptangularjsangularjs-directiveangularjs-scope

The StateProvider is giving back an iteration that is undefined

AppContext.js import React, { createContext, useContext, useReducer } from "react"; // Initialize the appContext export const AppContext = createContext(); // Wrap the app and set up the App Context export const AppProvider = ({ reducer, initia ...

javascriptreactjsreact-hooksreact-reduxreact-router

Trouble with launching Semantic UI modal

I have implemented a button using Semantic UI and set up a click event to open a modal when clicked, but nothing is happening. When I click on the link, there is no response. I'm unsure what the issue might be. Below is the code for the button: < ...

javascriptjqueryhtmlmodal-dialogsemantic-ui

Retrieve the query parameters from an URL string

I'm responsible for an application that serves SSRS reports. To access a specific report, users typically navigate to the following URL: https://reportserver.com/reportname On clicking View Report, a postback is sent to the report server with user-d ...

javascriptjqueryasp.netvb.netreporting-services

I am looking to gather user input in JavaScript and then showcase that input on the webpage. What would be the best

I am currently learning Java and I decided to challenge myself by creating a hangman game. The issue I am facing is that when the user inputs a letter, nothing happens - there is no output indicating whether the guess was correct or incorrect. I suspect th ...

javascript

AJAX messaging system utilizes setInterval to stack identifiers

Currently, I am working on a chat project at school that involves AJAX. The issue I am facing is when a user clicks on a link (representing the person they want to chat with), an onclick event triggers a function called load(id) where the id of the person ...

javascriptjqueryajaxchat

Unusual results observed with the Promise.all method

There's a code snippet I'm working on where I need to await 5 promises, wait for 2 seconds, and then continue with another set of 5 promises. However, it seems like the two instances of Promise.all are not being awaited as expected. I wonder if I ...

javascriptpromiseasync-await

Navigating routes for a module sourced from NPM: Best practices

Looking for guidance on loading Angular routes from an NPM module? Take a look at this snippet from my app.module.ts file: import { HelloWorldModule } from 'hello-world-app-npm/hello-world-app.umd.js'; // Loading module from NPM const routes = ...

javascriptnode.jsangularangular2-routing

My Angular post request lacks any content in the body

I am facing an issue where the body of my Angular post request is empty on my server. The post request from my client application looks like this: var data = { Stime: '+this.Stime+', Etime: '+this.Etime+', eAMPM: &apo ...

javascriptangularjshttpexpress