I have a media player in VueJS project that is being injected from a 3rd party. Its a basic HTML <video /> with some wrappers and containers where we call the 3rd party API for content, and send it to the player. This web page is loaded by WKWebView with the configuration allowsInlineMediaPlayback = true. But with this set to true, the fullscreen mode does not use the native controller. Instead it only fills the webview context (not the full screen) and basically breaks the page. How can I allow the video to play inline AND use the native fullscreen controller on iOS?
HTML video can't play inline and use native fullscreen within WKWebView
53 views Asked by James Haskell At
1
There are 1 answers
Related Questions in VUE.JS
- Problems with matter.js and i18n in vue.js
- Form Validation not working in custom component Vue
- Authenticating vue app on each route change
- Vue/TailwindCSS - Content is behind Sidebar
- Vue3 Suspense Parent > Child Animation
- Pass dynamic object data via nuxt-link to component
- Failed to resolve import, but the path is valid, and detected as such by VSCode
- how to use less variables in vue components?
- Prevent a webpage from navigating away
- Creating a modal window in product edit page in Shopware6 and saving data to custom table(repository) from a form within the modal window
- How do I fix (or ignore) a TypeScript error that's inside a HTML template?
- Vue.js Checkbox Alignment Issue: Centering Checkboxes Within Table Cells
- How to reset vue product filter?
- Vue display output of two dimensional array
- vue js error when adding bonus items to another item
Related Questions in WEBVIEW
- Android jetpack compose webview, image selector not works
- After progressbar load website is not loading in android webview
- Awaited promise for navigator.mediaDevices.getUserMedia neither resolves or throws an error
- Flutter WebViewWidget inside StatefulWidget does not dispose
- Crash : org.chromium.android_webview.AwDataDirLock.b
- Tauri Build Error unterminated character in import
- Update your browser to use...in android webview application
- Face Recognition in Windows Logon
- Flutter Webview translate the page
- Prevent checking checkbox input in contentEditable from stealing focus from editor in Android webview?
- Touch Problem with slider on Android 12 compared to Android 8 in vuejs webapp in WebView
- Asset file not being included on older versions of Android
- Unable to Trigger JavaScript Actions in WKWebView for W3Schools "Try it Yourself" Button (iOS/UIKIT)
- TadingView Charts in Flutter Dart are responsive on App
- Flutter webview fails to load Urls with error 'ERR_INVALID_RESPONSE' on Android but works on iOS
Related Questions in WKWEBVIEW
- Why does the WebView in my Mac app behave differently from Safari?
- WKWebview js injection
- In iPad/iPhone (iOS 17.4) App crashed on Launching
- PDF text recognition in WKWebView iOS 17
- Webpage not loading on WKWebView
- Swift: WKWebView Load Time problem with Large Cache (DataStore)
- How to load a URL starting with 'https://app.' with with WKWebView?
- Occasional deadlock when keyboard input in WKWebview
- Use WKWebView to open URL and handle button tap using Spotify API
- How to make content in WkWebView display in dark mode?
- Making webView text right size but also preserve <img> size?
- how to save website locally in WKWebView?
- How do I get the selected rows of an AGGrid that is embedded in a WKWebView control in an iOS application?
- HTML video can't play inline and use native fullscreen within WKWebView
- iOS WKWebView's WKProcessPool - when is it safe to share the same process space?
Related Questions in MEDIA
- Gecko chrome @supports function for strings and numbers
- Android media library, how to start media download only when needed?
- Error when fetching and downloading images from CDN (S3) on Chrome and Safari
- django media files only available after reloading page (DAPHNE, Debug = True)
- How can I convert output buffer of MediaCodec into OpenCV Mat?
- Media resources not found on GitHub Pages
- Issue with WhatsApp Cloud API Upload: Receiving "invalid_request" Error due to Incorrect MIME Type
- How can I intercept "touch screen event" within my Android App from an External (car) Display?
- HTML video can't play inline and use native fullscreen within WKWebView
- RTP distribution gateway in golang
- Lightningcss and @custom media
- Android 12 AOSP: How to prevent creation of the media folders on external volumes?
- Image type restriction in Strapi
- Grav - why page.media[image.thumbnail].url works and page.media[image.flag].url doesn't, even if defined
- Show correct video length in Fluid Player
Related Questions in PLAYBACK
- No Audio Playback in VSCode (Python)
- Looking fo an API for playback of pre-recorded video content
- The slider does not move after pausing the player MediaSession Android studio
- How to Make Android game on google play store install on windows option on
- HTML video can't play inline and use native fullscreen within WKWebView
- Syncing audio/video in pyav decoding
- Flutter mediaItem.duration and playback speed design
- Google play Console Account
- about google play review process
- my app is rejected by play console with permission error api
- Dont start automatic transmition
- LibVLC media_add_option usage: no sound in output file
- Why is the Android Link for closed testing not updating after I have created a new release? (Google Play Console)
- MP3 file 'working' in some cases but not others
- Using Playwright to Find and Click on Button with Dynamic CSS (Scraping TikTok)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
Popular Tags
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
I had the same issue in a different setup and I found out that the library I was using had the value of
isElementFullscreenEnabledinWKPreferencesset totrue. Setting this tofalseachieved the desired behavior.Documentation: https://developer.apple.com/documentation/webkit/wkpreferences/3917769-iselementfullscreenenabled