Some of my Vimeo videos rendered in the iOS web view show the quality settings to toggle between different qualities. But in other videos, I can only see 360p quality. Is there any specific reason for this behavior?
I can toggle between qualities inside the Android Web view.
I'm using a React Native Web View to render the Vimeo player.
My web view template
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1 user-scalable=0 minimum-scale=1">
</head>
<body style="width: 100%; height: 100%; margin: 0;">
<div style="width: 100%; height: 100%;">
<div id="video" style="width: 100%; height: 100%; display: flex; justify-content: center;">
</div>
</div>
<script id="vimeo" async src="https://player.vimeo.com/api/player.js"></script>
<script>
function webViewBridge() {
const sendEvent = (evt, data = null) => {
// Passes events through the bridge
var payload = {
name: evt,
data: data
};
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
var options = { id: '${VIDEO_ID}' }
const player = new Vimeo.Player('video', options)
player.ready().then(function () {
player.on('play', function () {
sendEvent('play');
})
player.on('ended', function () {
sendEvent('finish');
})
player.on('error', function () {
sendEvent('error', "Player error");
})
sendEvent('ready');
}).catch((e) => {
sendEvent('error', e.message);
})
}
let script = document.querySelector('#vimeo');
script.addEventListener('load', function () {
webViewBridge();
});
</script>
</body>
</html>