I have a website that has a video playing on it using Video-JS. It works fine, apart from on an iPad, in which case there is a 50/50 chance that the video will play with audio only. However, rotating the iPad causes the video to display properly, at the point that it should be at (synced with the audio).
I am not entirely sure what's going wrong, since sometimes it does work so I doubt it is the video stream itself. Apart from that the video-js integration script is pretty textbook and seems to work on everything else.
I have found a work around which is by simply clearing the cache :)
Related
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
I'm working with user-uploaded audio in javascript/html5, such that the user file input becomes the src for an audio element. In all my development so far, things have been working very well in chrome and safari; but I have one problem with firefox that I can't figure out and I don't know where to begin looking. Other than this, firefox works fine, too!
Consistently I'm finding that when audio.currentTime is very near to audio.duration (about 98%, to be more precise), the play and pause methods don't work properly. When I try to pause the audio at any point past ~98%, the audio just finishes playing. Trying to play the audio then defaults to doing whatever happens when one plays the audio after it has ended.
If audio controls are on, the slider works as it should stopping and starting no matter when play or pause are called.
This is really bugging me out... anyone have any ideas, similar experiences?
I have a <video> element at the top of my page playing an animation in the background (very similar to the one found on the Google Hangouts page). On most computers, the video plays smoothly and it seems fine, but on older hardware there is a lot of lag and the browser slows down quite a lot.
Is there anyway to detect the performance of the video playback? I'd like to either replace the video with a static image or pause the video if performance is an issue.
Use the video metrics if available in your browser. Here's an example using webkit prefixed DroppedFrameCount.
http://git.chromium.org/gitweb/?p=chromium.git;a=blob;f=chrome/test/data/media/html/media_stat_perf.html
See also: http://wiki.whatwg.org/wiki/Video_Metrics for the Moz prefix.
You could use Get the timestamp of loaded page to determine how fast the user loads the page, then if their bandwidth is below a specified threshold, supply an image rather than the variable.
Very strange problem:
I've created a small HTML5 canvas game with box2dweb.js.
So far, all my work has been on desktop and today I've decided to move it to the iPhone (which usually consists of wrapping the app in a PhoneGap/Cordova application, change a few settings, and that's it.
The problem is, when I run the app on my desktop browsers (Chrome, Safari) as well as the iPhone and iPad simulators - everything works correctly - but when I actually deploy to my device (iPhone 4S) only some of the pictures show up. In fact, only the player sprite animation plays, and everything else (while still there physically) does not get drawn unless it doesn't have a specific animation (whether it's a sequence of images or just one image).
What seems even more strange, is that only the player entity is being drawn (with animation, too!) but all other entities that have animations are simply not drawn.
I've attached images to show the differences:
My question is - where do I even start debugging this? I tried running the index.html page without the cordova app on the iOS simulator so I could access the debug console, but there were no issues. How is this even possible? I was under the impression that if it worked as a web page, it should work as a PhoneGap app.
Alright, I've solved the problem. It was incredibly simple but hard to find. It's not even a PhoneGap problem:
The game has a level editor, and so it also has a saving/loading mechanism. While I specify all the images as './graphics/image.png', when a level gets deserialized it saves the loaded image's source, and not the original './graphics...' path. So the problem was that I was trying to load local files from my computer to my iPhone. I guess it was a path problem after all...
I have an html5 video app which consists of video + JS swipable playlist + other JS animated overlays.
In iOS, onload performance of the playlist swiping and overlay animation is fine. Once a video has played, even if it is stopped, the playlist swiping and overlay animation is very very slow. Some users think it is not responding at all.
In Chrome/desktop, everything is fine.
If I log status information, the logs look the same regardless of whether a video has played or not. I don't know where to begin to debug. It seems to be a memory issue (?), but not sure how or if it can be addressed.
Anyone have any thoughts?
Javascript in iOS (both safari and UIWebView) execution can be stopped (or killed could be more appropriate term) without throwing any errors if under heavy CPU load to save more power for background native tasks or special tasks like handling video - rendering video even if hardware (GPU) supported still requires more CPU power thus it gets higher priority then javascript and can lead to the javascript acting not as intended or expected - it can work sluggish or not at all in extreme cases.
The only thing I can come with is pausing the video on any user input in iOS - maybe it would help.
regards,
Tom