Using the YouTube iframe player in an iOS UIWebView, I'm periodically seeing an onError event with error code 5 ("The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred").
The error is not associated with particular videos (that is, the video throwing the error plays just fine other times). Curiously, the errors often come in bursts: several videos in a row, from different channels, will throw the same error (each in a new UIWebView).
At some point, the error disappears, and the same video can be watched on the device that originally had the error. This has been going on for months.
Related
I'm trying to play a video with HTML and Javascript. A video is generated through some local processes, and once done, I have a Javascript that triggers the video playback right away and displays it:
document.getElementById("video").innerHTML = "<video style=\"margin-right:"+videospace+"\" height=\"300\" controls><source src=\"video.mp4\" type=\"video/mp4\"></source></video>";
document.getElementById("video").style.display = "inline";
It works for some videos (apparently smaller sizes/resolutions), but when a video is slightly larger (2600x800), it keeps looping and never loads/plays it (maybe due to the reason that once the video is still sitting on disk and given it's slightly larger, the video player doesn't get enough time/buffering to load it). And Javascript shows this error:
How to solve it?
Failed to load resource: net::ERR_REQUEST_RANGE_NOT_SATISFIABLE video
I am attaching a screenshot for reference to get more elaborated idea about the problem am facing.. Kind of hell.
I am well aware about autoplay policy and have gone through possible approches which involves user interaction. Also, am not a fond of displaying any screen or button to user to make him click, never, i do not want that.
I am developing a wordpress plugin and having microphone feature which can attach to textbpx on any wordpress website, user clicks on it (user interaction) comes in.
I have also read that i need to resume suspended audio context, which am doing and as you can see in screenshot the state of audio context "running" before and after audio elements play mathod.
I am using audio element created using Audio() constructor.
Note: screenshot is a photo of mac system, I am debugging iphone xr using usb cable.
Can somebody help me out or enlighten me on what am doing wrong or there is any technical limitation.
Sigh! after a week lasted hell finally I managed to make things works.
To give an overview of solution let me first describe high level rough idea of work flow which has problem on iOS Sfari.
Problematic workflow
clickHandler --> AudioContext creation --> Playing audio using audio element.
All the audios followed by this workflow miserably failed in 'play' promise.
Solution which worked for me
clickHandler --> Play audio using audio element -> AudioContext creation --> Playing audio using audio element.
The point of interest in a solution which worked for me is you have to play audio using audio element as first line of code in 'clickHandler'. No doubt the promise still fails but subsequent audios does play.
Also, I was creating new audio element for each new audio source to be played, Which was wrong as auto-play policy imposed on 'per-element' basis. So instead of creating new audio element for each source I just create it once on page load (or whatever suits for you as one time creation) and whenever I want to play different audio file I just change the '.src' property/attribute.
So this is how It worked for me. I must mention throughout the week lasted hell, previously answered questions here and their problem specific solutions have been guiding light which gave me new perspective in a hunt for solution. Also the articles on internet, webkit , chrome, apple's documentation on Auto play policy helped a lot.
playSound : function() {
var audio = new Audio(audio.mp3);
audio.play();
}
I am using the above code to simply play audio. But I am facing two issues below:
The sound never plays till I click on the tab (for this I go to another tab and then click the current tab). Seems it needs an event before playing sound.
Sometimes I get exception and audio never plays "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first."
I don't want to mess with HTML element.
You're likely seeing the policy change for autoplaying media on websites issued by Chrome: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
In essence, the policy says that unless the user interacts on your media and your handler* does not start the media synchronously, it will not play.
Notice the word synchronously - you can't even use setTimeout or some such. This is to protect the user from spammy ads and alike. The other browsers have this as well, as a setting, but they might and likely will enable this by default, so you better get ready for it.
[*] - (e.g. click handler)
I have a JavaScript video playlist. The videos are served from another domain, not mine. And recently I discovered problems with playing some videos. Sometimes, I receive net::ERR_CONTENT_LENGTH_MISMATCH error. These videos start playing and after 2-3 seconds they stop by themselves. Then they begin playing after 1-4 minutes. Only some videos have this behavior.
Can I check somehow for this error before playing a video? I want to skip the video if the error is detected and play a next one.
I encountered this exact issue when I was trying to continually re-download an image that was continually being re-uploaded.
Unsurprisingly the image was sometimes incomplete but, even so, I've not found a way to prevent the error from being logged - but I can catch it like this:
$('#myPic').attr('src', 'cacheless-pic.bmp?d='+ new Date().getTime())
.on('error', function() {
console.log('Oops - image of broken.');
});
I'm uncertain if this will help with your videos, but it's all I've got right now!
I have used video.js for several videos on two previous projects. The projects were cross browser and work fine.
On project 3 I set up the video reference in a floating div like so...
I get the following error from Firefox on loading the page into the browser...
Media resource tio4.mp4 could not be decoded. tio4.php
All candidate resources failed to load. Media load paused.
I attempt to play the video subsequently with...
videojs("example_video_1").play();
but (of course) it does not play.
Swapping tio4.mp4 with a video from a previous project I have no problems.
Running tio4.mp4 (The video that gives the "could not be coded" error) in Movie Maker shows the video running fine.
Do I need a refinement in my video reference? What else?
The original video (The one giving me the problems) was formatted in an obscure tool.
I put it in Movie Maker and tried saving it which made no difference. I then cut a tiny piece off the Movie and saved it as a "clip" which worked on this one and a subsequent one!