I have made a simple test page that fails with chrome, but works with IE.
It is at:
http://www.rateforsuccess.com/test2.aspx
If you use IE, you will see that the video plays for about a second, and then you can do a seek, (with the SEEK button) and it will seek 100 seconds into the video, and play for about 7 seconds. You will see and hear a woman talking.
But in chrome, this fails multiple ways. Sometimes clicking the SEEK button does not work the first time but works the second time. Sometimes the clip will play, but without any visuals - you just hear the audio.
Its a simple page, so I do not understand this.
There is a another odd thing, sometimes if you clear the cache and then access the page, you get the error, but if you don't clear the cache, eventually it works (sometimes).
Any help is appreciated.
Related
Environments
iOS 14.4.2 (safari)
chrome 91.4472.80
As I was trying to find a way to prevent my iPhone going to sleep while a browser page is opened, I found 3 ways.
use Screen Wake Lock API
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
call window.location.href periodically and stop it
play a video with a user interaction
For #1, this doesn't work on iPhone, should work on Android.
#2, didn't seem to work on either safari or chrome on iPhone.
#3, also didn't work (even playing a video after user interaction).
I tried https://github.com/richtr/NoSleep.js/ but didn't prevent from sleeping.
I also tried https://github.com/roldanjr/use-stay-awake and it opened a blank video in fullscreen (this maybe fixed by just adding https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline)
Then, I noticed browser version of Youtube preventing my phone from sleeping while it's playing a video (I set my sleep time for 30 seconds, and it can play a 10 min video without turning itself off).
Does anyone know what kind of technics they are using to do that?
I have an Angular 5 app.
I have the same video element (tiny video of 10 seconds at the server root for testing), with the same source on my route 1 and on my route 2.
I can't make things work properly.
Here's my HTML video element :
<video width="400" controls>
<source src="test.mp4" type="video/mp4"> Your browser does not support HTML5 video.
</video>
Can't do easier, right ?
When I visit for the first time my webapp, on my first route loaded (either route 1 or route 2, I tried both), all caches clean, my video doesn't have cover. When I click on play :
In the best case, the video is playing for a 2 seconds and then, the image freeze, sound is cut, the playing seeker goes at the end of video time. The end screen is green.
OR
Most of the time, the video is not playing
If I navigate to my other route, video is not playing when I click on play. If I refresh my page, same action same result.
I tried to use a basic HTML page with just the same video tag. My video is playing as expected. At the first visit, and when I refresh. So, I assume that I don't have the byte-range requests issue.
It's working as expected in all others platforms tested (Safari/ Chrome macOS, Chrome iOS, Chrome Android).
Issue is encoutered on iPad Mini 4 with iOS 11.3.
I read a lot of things about Safari iOS issues with HTML5 video. I tried to apply several fixes without success, but anyway, posts readed don't really have the exact same problem : in their case, video wasn't playing at all.
Moreover, it's working with the same code outside Angular, so I guess it's not that problem is not about my video tag.
The rel parameter in YouTube API dictates whether or not related videos are shown at the end. When rel=0 the video reverts back to the thumbnail with a play button.
However on mobile (tested on iPhone / iPad / Fire Tablet) when the video goes back to the thumbnail it cannot be played a second time. It just does nothing.
I reported the issue to Google but nothing yet after a few days.
I had to resort to destroying the video and recreating it but this makes for a kind of nasty flickering.
My experience with YouTube issues is they never seem to end up fixing anything related to iOS - so I was wondering if there was any other kind of trick to prevent this.
Test page
The trouble with refreshing a webpage at a specific interval is that you dont know exactly when the video ends so you need to develop a method which the video player sends a signal when the video ends, which would then start the script to refresh the page. Otherwise you end up restarting it in the middle of the video. so personally, I would not even mess with refreshing the page. For Audio players it works ok because audio is smaller and streams more quicker. Video dont.... they always stop to buffer.
So YouTube API uses "Events" and "Listeners", so in particular, you need to design around the Event: "onStateChange".
When onStateChange = "ended" (zero) the video has ended, so then you reload the video player with the same video and set it to its Ready State again.
In theory its very easy you basically need to setup and control the entire video player through javascript. And the API gives examples on that.
http://code.google.com/apis/youtube/js_api_reference.html
http://grizzlyweb.com/webmaster/javascripts/refresh.asp
http://code.google.com/apis/youtube/forum/
Have a look at loop and playlist parameters as well. You can set playlist parameter to video ID and same video can be replayed using this.
So, it will be something like:
http://www.youtube.com/embed/{VIDEO_ID}?wmode=opaque&loop=1&version=3&playlist={VIDEO_ID}
Hope this helps!
Appears to have been fixed by YouTube.
I can now play the video multiple times (on multiple devices) without it getting stuck. Was too busy wondering why my question was getting so little attention that I forgot to check again to see if it was fixed ;-)
I've got an html5 video tag and I'm using video.js. On my desktop browsers, it works beautifully.
On the iPad however...
When I load the page on the iPad, everything looks great. When I touch the play button and the image is replaced with the player, it starts jittering back and forth. Even once it's done playing, it continues to jittery back and forth.
Here's a video of it happening...
http://youtu.be/4IaEBD0p2hw
Has anyone seen this happen before? Any ideas?
I'm having a small web app, which plays really short sound bits on the click of several buttons. It explicitly targets mobile Safari on iOS (iPad).
After reading here and elsewhere about the several "shortcomings" of HTML5 audio in this context on mobile Safari and trying a few "hacks" and tricks, I'm stuck with a situation where Safari seems simply (for the lack of a better word) broken:
I can play sound A (it takes a long time for it to start — I'm assuming it's downlading [again]?) on the click of button A. After that, clicking on button B will immediately play the sound A again. Same for button C. In some cases it will play a different sound, sometimes even the right one. But mostly sound A. The format in use was .aiff, is now .m4a .
After writing a few tiny versions myself, I decided to go with the Buzz library to handle the sound loading/playing/etc..
Funnily enough, their demo includes a game, which does pretty much exactly what I need and triggers the same faulty behavior. I even ended up in a situation where any audio player in mobile Safari in any tab would play a certain sound out of the Buzz demo game (!).
I was hoping a cache manifest might help overcome Apples preloading limitations and force the app to play the sound right after hitting the button in offline mode. But after confirming that the whole app had been cached, I can't play/hear any sound in offline mode.
Has anyone managed to get something like this to work somehow? (— Having seen how Apple handles certain things, I' don't expect much response, though… )
Update 1:
The example in this answer causes the same effect: How to synthesize audio using HTML5/Javascript on iPad
Update 2:
Updating iOS (and so Safari) seems to resolve the audio bug. The cache manifest doesn't seem to effect audio files, though. These files are just not available at all.
After removing the cache manifest the app works okay, but adding it to the "home screen" and reloading it prevents the audio from playing as well.
I wish I could tell you there's a magic formula to get all your html5 media to work perfectly, but there isn't. Mobile support for HTML5 audio/video is pretty poor right now; much further behind than its desktop predecesors. To make matters worse, each of the different platforms handle it differently and most of them only support it in semi-recent versions.
However, there are some tricks you can employ to get media files to work correctly in mobile Safari. In order to explain them, you'll need to understand some of its shortcomings.
1) You can't load multiple audio / video files
Its been my experience that the browser will only load one file at a time. If you play one file, go and play another, and then come back and it'll just load that file all over again. And, although I didn't try it myself, I don't believe a cache manifest will help you here.
What I had to do is combine all my audio files into one large audio file. Then, depending on which audio track was requested, I'd move the play position to the appropriate starting position and play that track. Then, I'd use a setInterval to examine the playback every few milliseconds to determine if the current play position hit the end of the track. Once it did, I paused it. Pluis, I gave myself a few seconds (2-3) between each track, just in case the phone's CPU was under a lot of load and checked the feed a little too late.
2) You can't auto-play audio / video files
Apple built into their HTML5 media tag technology the limitation that these tracks would only load and play in response to a user click event. That way, developers couldn't auto-play annoying tracks when you went to their websites.
When I was using audio/video tags, I was trying to build a rich media advertisement. So I hooked my audio/tracks loading to the banner click event, when you click a banner and expand the advertisement.
What I'd suggest you should do is have a small lightbox popup come up, asking the user if they want to turn on/off sound. You can attach your load functions to the click event of that popup box, regardless if the user turns the sound on or off.
Personally, I didn't have much luck using the load() function. I'd run that function to load the audio and then click play and it would just load it again. It could have always been that I just didn't do it right, so feel free to prove me wrong and get that working. What did is I told the track to play, so that way it would start loading, and then I'd use a setInterval to see if the current play time incremented just a few milliseconds. Once I noticed that it started to play the track, I'd immediately pause it.
3) Audio/Video tags are only supported in iOS 4.0 and higher
There's no trick to getting around this. Its just the facts.
Here's a few sites that helped when when I was developing with audio/video tags:
http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements
Good luck!