I am trying to play a video on the YouTube mobile website (https://m.youtube.com) in 720p or more. So far I am failing.
My analysis so far
When accessing the mobile website, YouTube doesn't offer controls for the quality setting. I am employing JavaScript to add this functionality. My intention is to later inject that later with a browser extension.
Here are two angles I have tried so far:
1) using loadVideoById
player = document.getElementsByClassName("_msc")[0];
id = player.getVideoData()["video_id"];
player.loadVideoById(id, 0, "hd720");
// debug information
player.getAvailableQualityLevels(); // --> reports ["hd1080", "hd720", "large", "medium", "small", "tiny", "auto"]
player.getPlaybackQuality();
player.showVideoInfo(); // shows statistics below in viewport
However, the new player is still in quality medium. The script works for setting it to a smaller quality small and tiny. Often this happens when the viewport is to small. However in our case it is large enough to support a the large (854 x 480) quality setting, see on the picture below. Still switching to it doesn't work. It only loads up to medium (640 x 360).
2) using setPlaybackQuality
This is the official way of switching the quality, which works perfectly on the desktop version of the website (https://www.youtube.com).
player.stopVideo();
player.setPlaybackQuality("large");
player.seekTo(10);
Then calling player.getPlaybackQuality() still only reports medium. Note that this script doesn't work to set it to a smaller value small, tiny. So it doesn't seem to work at all.
On the desktop version both versions work. However to retrieved one has to use:
player = document.getElementById('movie_player');.
Also when testing this on the desktop, accessing the mobile site requires me to to a user agent switch to one of a mobile browser.
Question
How can I sucessfully change the quality to anything higher than medium?
Related
I am trying to build a Wordpress website using a theme I purchased, unfortunately the maker of the theme doesn't seem to respond to any support requests.
After creating a few pages I noticed that performance is much worse on Safari compared to any other browser. I tested this on a few computers and few versions of macOS.
Example page is https://sochacki.info/proj/nepal-manaslu-circuit/
I realise that photos on the website are quite big (4000px each), but that is exactly what I want. I am happy with how quickly the pages load and how the galleries work, in Chrome, Firefox or Opera. When you click on a picture it loads PhotoSwipe JavaScript gallery so you can see them in full size, and then you can also click in top right corner to go full screen as well, or to leave the PhotoSwipe viewer. Switching between photos, going full screen or leaving PhotoSwipe are instant.
However when I load the same page in Safari, any action after clicking on a photo is slow. Switching between photos, going full screen, leaving full screen. It all takes a second or a few seconds. I can also see in Activity Monitor that CPU is used way more in Safari.
I tried a couple of things:
the theme I am using uses a custom plugin made by the same author to create these galleries, place photos and it includes PhotoSwipe files inside. Those files were one version behind (4.1.2 instead of latest 4.1.3) so I updated them, but the performance issues are the same.
I installed some other gallery plugins which use PhotoSwipe to display photos, and they did not have the performance issues, so I am not blaming it on PhotoSwipe, probably some other part of the plugin is causing the issues.
I have no real experience with JS or web development, are there any tools that could help me find what is causing the slow performance?
I checked the website speed - as I can see the Theme-Loading-time is okay. But as you already mentioned the Photo-sizes are really unfortunate as we can see in google page insights (https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fsochacki.info%2Fproj%2Fnepal-manaslu-circuit%2F)
Try to resize the Photo-sizes in normal view (not the HeightxWidth > the kB)
I built a Portable Web Application (PWA) that specifies "orientation": "portrait" in it's Manifest file.
This ensures that the application is displayed in portrait mode no matter how the phone is held (at least with Chrome).
This is fine for nearly all situations for my application, but there are situations where an embedded YouTube video is shown (iframe embedding API). When placing the video into fullscreen mode, the video is displayed in portrait mode, which is not useful.
Can I change the desired screen orientation via JavaScript? Or at least "unlock" the orientation so that the manifest setting is temporarily disabled?
What we ended up doing is removing "orientation" property completely from manifest.json. That would allow full screen video with rotations. I guess if you really want to leave only "portrait" orientation in the rest of the app, you can lock it with JS using the screen.orientation API: https://caniuse.com/#feat=screen-orientation (81.82% supported):
// to lock portrait
ScreenOrientation.lock("portrait");
// and then allow any
ScreenOrientation.unlock();
Please note, that this is still a working draft, not a live spec. Some more docs and info from Mozilla. Hope that helps.
I'm currently running out of guesses, but I've implemented a fullscreen video header on some sites of my webpage using WebM and a JPG replacement image as fallback shall the original MP4 video not be able to load
The header loads perfectly fine on 2 Macs as well as several smaller devices (tablets and smartphones across operating systems) however, some people that I've asked to test the website reported that the video does not load across browsers, and neither does the image fallback.
I've examined the code already a couple of times. Here's an example:
http://crispin-m.de/bentley.html
does it load in your browser? Where is the mistake that I've made?
Regards
I see a number of ways to deal with layouts, and interchange, etc to deal with image sizes, but I haven't come across any info about video player size. For instance, using viewbix, voo, jw, or any other js served video player, the size of the player is built into the embed. It also has an associated image file for the poster frame.
Just wondering how other folks approach this. Do you make multiple versions of the embed and image for various breakpoint sizes? Does it matter if the embed is too big? Not sure if that actually affects streaming speed or not, or if the video itself is technically doing anything until play is pressed. Image would still be an issue though as serving a full width desktop size image on a 320px screen seems a waste.
What's the smart way to handle this globally?
thx
With the JW Player, we have responsive support built into the player - http://www.jwplayer.com/blog/new-in-jw-player-responsive-design/, so you don't need to worry about breakpoints, media queries, or anything like that. Those would all still be handled in your CSS.
jwplayer("myResponsiveVideo").setup({
file: "/assets/tearsofsteel.mp4",
image: "/assets/tearsofsteel.jpg",
width: "100%",
aspectratio: "12:5"
});
Basically a set up like this will make the player responsive, regardless of what container it is in.
I am developing a Game using JavaScript and HTML5 .While using the concept of canvas ,I am rendering the images on screen and then moving the coordinates to make the image look moving. When the laptop is charging the images move very fast but as soon as it is unplugged ,the speed of image falls.
On the Windows laptops you've got power options which are designed by default to reduce a processor and video performance if a laptop unplugged from a charger. Also if your browser for game's debugging is IE the windows also will reduce javascript performance for IE. The first Google link for illustrating my words: http://www.sevenforums.com/tutorials/778-power-plan-settings-change.html (you've got the same options for Windows 8).