Loading Youtube iFrame API video at a lower quality - youtube-iframe-api

Currently, we have a YouTube iFrame API setup with the following (pretty boilerplate) code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
YT.ready(function() {
player = new YT.Player('player', {
videoId: 'iyBaInK2TsI',
width: 200,
height: 200,
events: {
onReady: "onReady",
onStateChange: "onStateChange",
onPlaybackQualityChange: "onPlaybackQualityChange",
onError: "onPlayerError"
},
playerVars: {
fs: 0, // hide fullscreen button by default
playsinline: 1, // make the player not go fullscreen when playing on ios
modestbranding: 1, // hide youtube logo by default - we say 'powered by youtube'
controls: 0, // hide controls by default
showinfo: 0, // hide video title by default
iv_load_policy: 3, // hide annotations by default
rel: 0
}
});
console.log('available quality levels after create = ' + player.getAvailableQualityLevels());
});
// onReady, onStateChange, onPlaybackQualityChange, onPlayerError handlers...
</script>
The long and short of it is that it always loads the video at 'medium' quality. Calling setPlaybackQuality('small') does not affect the video quality whether I am on desktop or mobile.
I have tried calling setPlaybackQuality('small') in onReady, onStateChange when state becomes BUFFERING or PLAYING, and completely separately in the JavaScript console when the video is playing, un-played or paused.
This presents a large issue when users are trying to load the player on a 3G/4G connection. I understand that 3G is being phased out for video streaming but a significant amount of users still operate on 3G connections and the ability to stream at 144p actually makes video tenable on 3G and at 240p makes video tenable on 4G (non-LTE).
When I choose a video with hd720 as a quality option, I can call setPlaybackQuality('hd720') and it works fine.
My specific question is, is there anything in my configuration that would preclude switching to lower quality, and is there a certain set of commands that would work around this limitation and trigger the playback quality actually changing?

The workaround I found is to create the player with no videoId, never call setPlaybackQuality anywhere else, but call loadVideoById(videoId, 0, 'small') inside of your onReady handler. This was respected on both Android and iOS when tested, calling onPlaybackQualityChanged with 'small' once on Android and Desktop and twice on iOS, never forcing medium quality.
Unfortunately, if you pass 'tiny', it doesn't seem to work. On most videos, it will force 'small'; in my experience, however, it's forced 'medium' before. Be aware of that.

Related

Telegram Web Apps method Expand isn't working

I found that the method Expand of window.Telegram.WebApp object isn't working in the Telegram client for Windows and IOS on computers and tablets.
How to increase the size of Web Apps frame for those devices?
function buttonOn(){
// do something on btn click
}
let main_page = document.querySelector('#main_page');
if (main_page){
window.Telegram.WebApp.expand() //expand window after page loading
window.Telegram.WebApp.MainButton.onClick(buttonOn) //set func on main button click
window.Telegram.WebApp.MainButton.setParams({'text': 'Корзина'}) // set byn params
window.Telegram.WebApp.MainButton.show() //show telegram btn
}
Other button events
Remove the line from the function:
window.Telegram.WebApp.expand() //expand window after page loading
And call it in the beginning/at the top of your main javascript code. (The code that will start running once the user has clicked on the button)
Also, you can make your code a lot shorter by putting window.Telegram.WebApp in a variable like:
const tele = window.Telegram.WebApp; //Initializes the TELEGRAM BOT and
//Gets the user's Telegram ID from the Telegram API
tele.expand(); //Expands the app on the users' phone to 100% height
The reason is, probably, you are a bit incorrect in understanding what "expansion" is. This term could only be applied to mobile devices with OS such as Android or iOS. Web App is displayed there in such native component as BottomSheet with inserted WebView containing your web application. Initially, in mobile devices, application is being opened minimized (not expanded). To make it use maximum allowed height of screen, you could call expand() method. It must work through window.Telegram.WebApp.expand().
In desktop or web versions of Telegram, Web App is displayed in separate component which is not allowed to change its size.
You could probably find more useful information about viewport and expansion here, or use alternative libraries, such as twa-bridge or twa-sdk

Vimeo Aframe can you show me an example of working play pause buttons?

I am trying to add play and pause buttons to VIMEO in WebXR via Aframe (and disable autoplay).
Note the video is playing on autoplay on the desktop web browser, but it is not playing at all inside the same website via the Lenovo Mirage Solo.
So to try to get it working I attempted to disable autoplay, however it's ignoring my command, and I tried to create play pause function that will play the video on mouse enter and pause the video on mouse leave.
How do I do this the correct way?
Example code:
AFRAME.registerComponent("play", {
init: function () {
this.el.addEventListener("mouseenter", (e) => {
VR_LOG('mouseenter')
this.el.play();
});
this.el.addEventListener("mouseleave", (e) => {
VR_LOG('mouseexit')
this.el.pause();
});
}
});
<a-entity autoplay="false" vimeo="id: 322980501" play>
<a-plane id="spectrum" class="clickable" color="#000000" scale="3.2 1.8" position="0.0 1 -2"></a-plane>
Can you post an example of vimeo in aframe with autoplay false and with a working play and pause button?
Update: The play pause function started working when I moved the play component to the parent entity, but the autoplay is still autoplaying. And it still doesn't play at all in the Firefox Reality browser on the lenovo Mirage Solo for some reason
Try moving autoplay: false inside the vimeo entity arguments, it should look something like
<a-entity vimeo="id: 322980501; autoplay: false;" />
Unfortunately, I can't test on the Lenovo Mirage but feel free to open a Github issue and so we can try and help solve that 🙌
We are working on posting a playback control example soon, but here is an open issue with more information about how to get that working

A-frame automatically entering in full screen mode oculus go

I am using A-frame for building a VR website. I wish to enter vr-mode without having to press the 'enter-vr' glasses on the oculus go more than once. For my application most of the html (including the a-scene) get reloaded (but the header/footer remain in place). For pc browsers this code works:
HTML:
<a-scene id="eqvrscene">
</a-scene>
<button id="enterVRButton" onclick="$('#eqvrscene')[0].enterVR();"> Enter VR </button>
JS:
$("#enterVRButton")[0].click();
but this does unfortunately nothing on the oculus go. Does anyone have a suggesting how to tackle this problem?
This may or may not be related, but you have a typo in your <a-scene> tag.
It's difficult to tell from your code, but are you sure your scene is loaded when you click the button?
Try first listening for the loaded event of the scene, and then setting up a listener for the button:
// Scene entity element
var scene = document.querySelector('a-scene');
// Button element
var enterVRButton = document.querySelector('#enterVRButton');
// Check if scene has loaded, otherwise set up listener for when it does.
if (scene.hasLoaded) {
addButtonListener();
} else {
scene.addEventListener('loaded', addButtonListener);
}
// Add our button click listener.
function addButtonListener() {
enterVRButton.addEventListener('click', function() {
scene.enterVR();
});
}
In A-Frame master branch, there is an API in place for adding a custom button for entering VR, so it may be released in 0.9.0. See the master docs: https://aframe.io/docs/master/components/vr-mode-ui.html#specifying-a-custom-enter-vr-button
If you're trying to automate the click event, I don't believe this will work in many browsers, as a user interaction is required for enterVR().
It’s not posible. The WebVR API does not allow to enter VR mode automatically. It requires a user gesture like a click that cannot be synthetized like your example does. The only exception is when a page enters VR mode after user gesture, new pages are granted permission to enter VR automatically after navigation. A-Frame already accounts for the scenario and no extra application code is necessary.
Firefox also grants permision to enter VR automatically on page reload. That’s why you might be seeing a different behavior on desktop. Your code is not necessary, A-Frame auto enters VR automatically already. This case is not covered in the Oculus Browser

How to make A particular Web Page Grey on certain events like when the page is offline?

Here is a an offline version of https://www.flipkart.com/ on mobile which uses progressive web applications and greys out Content when User Is offline.
And Here is an Online version without greying
So How Do they Do It?
As others mentioned, you could use an overlay placed using position: fixed above the entire HTML. However this would not allow the user to click any elements beneath the overlay, so it depends on what you are after.
In the case of Flipkart, they apply the following CSS to the <html> tag:
filter: grayscale(1);
They also apply inline style to the individual elements, such as buttons to modify their colours. This approach will still allow you to navigate the site, which will come in handy if you allow for offline functionality.
Finally you will then need to add event listeners in JavaScript to handle when the user goes online or offline, such as below.
window.addEventListener('online', function(e) {
// add your logic to update the UI when online
console.log("You are online");
document.body.style.filter = 'grayscale(0)';
}, false);
window.addEventListener('offline', function(e) {
// add your logic to update the UI when offline
console.log("You are offline");
document.body.style.filter = 'grayscale(1)';
}, false);

open site in iFrame which avoids Frame Busting

I am trying to open some site in iFrame which opens as popup.
Some sites does not allow itself to open in iFrame (Frame Busting).
I have searched for this . i Have got some solution also like
$(window).bind('beforeunload', function (event) {
return 'Custom message.';
});
beforeunload not work for me, as it will run even when navigating within my site
and also I tried
// Event handler to catch execution of the busting script.
window.onbeforeunload = function () { prevent_bust++ };
// Continuously monitor whether busting script has fired.
setInterval(function () {
if (prevent_bust > 0) { // Yes: it has fired.
prevent_bust -= 2; // Avoid further action.
// Get a 'No Content' status which keeps us on the same page.
window.top.location.href = 'http://mysiteurl/#';
}
}, 1);
above is also not working, it will redirect to the url which is being opened in iFrame.
So Is there any solution to open site (having Frame Buster) in IFrame.
Regards,
Sagar Joshi
For IE use this in your frame security="restricted"
<iframe id="frame_id" name="frame_name" security="restricted" src="page.html">
</iframe>
Edit: I was having the same issue but I needed scripts etc to run in my frame so security restricted was not good. Try using sandbox="..."
allow-forms allows form submission
allow-popups allows popups
allow-pointer-lock allows pointer lock
allow-same-origin allows the document to maintain its origin
allow-scripts allows JavaScript execution, and also allows features to trigger automatically
allow-top-navigation allows the document to break out of the frame by navigating the top-level window
Top navigation is what you want to prevent, so leave that out and it will not be allowed. Anything left out will be blocked
ex.
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.example.com"</iframe>

Resources