I need to play YouTube Videos with at least 720p resolution on my mobile tv web app, but safari plays them always with the lowest quality, that sucks.
I tried a lot of solutions that have been already posted, but they seem to be outdated. e.g. &vq=hd720, &hd=1, &vq=hd1080 appending to the embed iframe, unfortunately it's not working.
I also tried to do it with the youtube javascript api, what a surprise, no luck either.
Any other solutions I could try? The Videos are uploaded in portrait format 720x1280.
I ran into these exact same issues today and ultimately came up with a bit of a hack that worked for my specific needs. The trick is to double the size of one of the parent elements that's wrapping the iframe embed and then to scale it down again using a transform. For example:
.video-wrap {
width: 200%;
transform: scale(0.5);
transform-origin: left top;
}
Alternatively, you can also specify an exact width/height for it if you're trying to get exactly 360, 720, 1080, etc.
The only major downside to this "solution" is that it will also scale down the whole video player UI. In my case this was acceptable because there are other UI elements that allow the user to control the video.
I'm also only applying these styles to smaller screens based on css breakpoints, because the larger screens pull in the right resolution video regardless.
I really hope YouTube will eventually fix their setPlaybackQuality function, but in the mean time, I hope this helps someone out.
Related
I've got a full page Youtube video embed on a page and recently I've noticed it defaults to low quality. I saw this is a common problem that had different solutions at different points in time so I was wondering if anyone has any new tips?
I've tried setting the width and height of the iframe to 1920x1080 and adding &vq=hd1080 or &vq=hd1080p to the source url but none of these seemed to work.
I'm currently working on something that uses a livestream from Ustream as a fixed background. At the moment, it only works on desktop, and I personally think that it wouldn't be the best idea to do this for mobile because of performance and so on (not to mention, I would hate for my mobile data to be chowed down by a video I cannot control). I'm simply curious if it is possible at the moment.
I tried it, just for fun, but realized that it doesn't autoplay and if I do initiate it by hitting play, a media player opens up with the stream in it - at least on iOS.
Just got me wondering if this was possible. I mean, facebook and instagram do it without opening up a media player, so I'm sure it is, but I'm assuming it's not as straightforward as I would want it to be.
Curious to hear your thoughts!
It is possible, but I guess more likely it depends on the device and the browser what it using, I tried now with this url: https://www.nationalgeographic.com/magazine/2017/09/holland-agriculture-sustainable-farming/ on my S9+ with the Samsung browser and it works for me if I ask the desktop version of the website. However I suggest to forget the background videos or the users will hate you when your app/site will consume all of their mobile data. And I don't want to mention the lower end devices. Those may not support or if support it will have a bad experience to view a background video.
For background video: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
Normally a real stream doesn't have too much difference compared to a static video if we just strictly viewing the background video/stream part.
It is possible, there is a good article on it here.
As the article describes...
By default, it can only autoplay when the video is muted. But for
webkit/iOs you also need a second attribute; playsinline. This
attribute makes it so that it, well, plays inline (and doesn’t
automatically jump to fullscreen video)
More information from google and webkit
If you do encounter opening this question and if you dont know the answer. please upvote it so that i and many others can get answers.. Please dont downvote anyone please!
I want to get the best performance i can on animations for my landing page of my project, I am trying GSAP and raw css and i think none are helping performance gets too laggy at times,
-> I have seen many websites using hardcore and way more complex with animations going sweetly silk continuously and supporting all platforms including mobile phones mostly as well, but my animations are chirpy even when running at PC,
I have been trying to get the solutions, have tried to
remove all the other animating properties other than transform or
opacity and
have added css 3d transform hack ,
Using Gsap as well none are helping,
and now i am out of ideas how to get it working, if anyone wants to see my site, this is the link :
webkrushers.com/test/template
Note:
the preloader animation (only css) lags sometimes while loading and the home screen animation as well (the stars are animated via gsap,the BG is moving through css transform and the world is rotating with css transform as well), when i am doing one more animation which is that i want to stamp the big logo and world and then fade it out, it just gets done in steps not smoot at all,
if we get through this i have one more place where animations are not going so well. Hope to get it all sorted and that someone else also learns something from the solutions. you can see it, its in development not so responsive, so open it up at 80% zoom on full HD screens and 67% on HD screens. I would really like help from anyone who can assist me along the way, if he/she feels so. I would also like some recommendations on bettering my UI if someone sees some improvement or replacement that can be made.
Should i try some other thing like, canvas,webGL or web animation API or anything else considering that i want full support till IE9 and mobile devices as well but i dont need the home animation on phones essentially just the loading animation is need in phones.
I've developed HTML5 game with canvas and DOM elements. And I have problem with flickering DOM elements while playing. The problem occurs in mobile browsers, especially in Chrome.
My apps consists of full screen canvas and DOM elements as GUI (ie. popups). There is many objects rendered on canvas in loop. While playing suddenly DOM elements start flickering (not integrally but regular fragments). DOM elements are positioned absolutely and scaled on window resize by CSS3 (transform:scale).
I cannot publish the code because it's commercial project, but I attach screens below.
http://mywebpage.ovh.org/1.jpg
http://mywebpage.ovh.org/2.jpg
http://mywebpage.ovh.org/3.jpg
Does anyone know the reason and the solution?
Thanks in advance!
I don't think you posted any screenshots, but most likely because it is redrawing it without a buffer. I would take a look at double buffering, I know when I coded flash and java games back in the day buffers really solved a lot of the flickering.
Heres a previous question which may be helpful:
Does HTML5/Canvas Support Double Buffering?
edit: okay I see the screenies now, It's probably not double buffering, but CSS. I would double check your CSS for any thing like background-attachment: fixed or position: fixed, I know that sometimes gives flickering in Chrome.
I am trying to set up a HTML5 video player using video.js and Flat UI by DesignModo. I have the problem that I need to make the video player responsive, so the width needs to be 100%.
The problem is that then when this is set the height of the video is always the same as you can see in this fiddle. So what I need (I think) is a script which detects the aspect ratio as the aspect ratio will change. I found a script like that over here however it is designed for iframe videos like YouTube or Vimeo.
I attempted to modify the script by changing the value of $allVideos to $("video[class^='video-js']"), but it does not seem to have worked. Can anyone have a look at my Fiddle and try and tell me what's wrong and how to fix it?
By the way, I know that the links to the font files and image(s) are turning up 404, thats because at the moment the files are not hosted on my server, I have just been testing them locally.
Just remove the height: 100%; from .video-js .vjs-tech. And this take aspect ratio automatically from given width 100%.