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
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'm developing a web app whose main purpose is streaming dancing videos and I'm facing this problem just in chrome mobile, it works flawlessly in firefox mobile, and in every other desktop browser.
The thing is I need to be able to flip an html5 video element and it works... well, it works until I go fullscreen, then it stays for a few seconds and reverts to the original video (not flipped).
I'm using the css "transform: scaleY(-1)" property.
I've tried setting this property to the video tag, to an upper div, within the video tag and the div which requests fullscreen. And to the div requesting the full screen with no success. If I set scale(); to any positive number between 0 and 1, it seems to do the trick but it doesn't work with negative numbers.
I'm aware of the UA css :not(:root):-webkit-full-screen {transform: none !important}, but it doesn't seem to be the problem. I would rather say it's more related to the way chrome handles video in fullscreen mode.
Any help would be appreciated. If I can't make it work, I'll have to provide another stream with the mirrored version of each video.
Thanks in advance, If you need any examples don't hesitate on asking.
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?
I have a site with full screen background video using BigVideo.js. (http://dfcb.github.io/BigVideo.js/) On mobile devices, android is working great. However, on an apple device the video loads with a 'Play' button that you need to click which loads the video in a modal window over top of the site. Any ideas on how to make this behave like desktop/android devices where the video seamlessly plays in the background? Could there be an Apple app-driven event detecting video and forcing play in a modal?
Example HTML:
<div class="screen" data-video="vid/1-Statue.mp4">
Many mobile devices do not support video autoplay - the idea is to avoid users running up large mobile data bills. Last time I looked all the smaller iOS devices, i.e. iPhones did not.
There is a popular javascript library to detect browser features which includes a test for autoplay which may be useful for you:
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js
Similarly, inline video is not supported on all Mobile devices - it is evolving so more devices do now but it is probably not a good idea to rely on it. Again, there is at least one open source library trying to address this on iPhone (inline video works on iPads last time I checked, as far as I recall):
https://github.com/newshorts/InlineVideo
I'm trying to get a video background on one of my web pages.
I've tried converting my video to several formats(ogg,mp4..etc) and testing a few plugins, however I cant seem to get video backgrounds to play on mobiles and some older browsers (firefox, IE7).
Does anyone know what the best way to do this would be to date?