How to prevent playback error YouTube iframe api - javascript

I've been trying to work with the YouTube iframe api but I've noticed that sometimes it looks like it doesn't want to play any video, I get the following:
An error occurred. Please try again later (Playback ID: XXX)
It doesn't happen all the time though, so far I assume it happens when I swap between Google/YouTube accounts...
Does anyone know how I can prevent / resolve this issue from happening?

Related

Facebook embedded video not playing on click

I'm facing problem with facebook video embedded on my post. My client wanted me to follow this method: https://medium.com/#BenBillups/facebook-video-embeds-that-actually-work-57037f8cdcf3
I've done all of the part except PHP code because that wasn't required by my client. Now what is happening. When page loads a play button appear to start video. On click it work just fine. It plays the video but only on desktops. The click event triggers on mobiles and tablets. But it doesn't start the video.
Please take a look at https://candylish.com/mix-and-match-swirl-cookies/ and also check in mobile. You'll see the difference.
In short, you've to click twice in mobile to start video.
Please help me sort this out.
Thanks :)
I think you are simply dealing with mobile browser's general reluctance to start playing video, when they can't determine it was directly connected to a user interaction (and therefor likely willingly triggered by the user.)
//Autoplay
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
msg.instance.play();
}
});
This code waits for one of the SDK's events to fire and then tries to call the play method, introducing exactly the kind of asynchronism/detachment that gets this blocked, because techniques like that are often used in a malicious way.
In short, you've to click twice in mobile to start video.
That second click is "a whole different animal" altogether ... it happens on the native play button of the (now) embedded social plugin. The other script is not involved at all any more at this point, and this click is a direct user interaction that triggers the video to play, so it is allowed to work. This isn't nested into anything asynchronous or callbacks, it is straight up click => trigger play.
I don't think you will find any example using this technique where this will work differently.
Mobile browsers are more gracious when it comes to autoplay-on-page-load(!) videos, if those videos do not contain an audio track or are embedded to be muted by default. I don't think Facebook offers the latter as an option for mobile to begin with (the data-autoplay attribute does that for desktop, but is documented to not work on mobile) - so at most you could try with a Facebook video that is silent to begin with; but apart from that I'm not sure this restriction resp. when it actually gets lifted even applies here, it's probably not going to fulfill your client's requirement either.
I started typing this as a comment, but besides that it has gotten a little longer now, in this case I think it can't be done actually simply is the answer, even if it might not be a satisfying one.

HTML 5 audio element bug in Chrome

I've got a pretty silly bug in Chrome with the HTML5 audio element. Basically if I try to set the currentTime immediately after setting the source and then try to play, it throws an exception. This only occurs in Chrome.
Plunker : https://plnkr.co/edit/GZm9nZkmrt0ZvX6D85Qy?p=preview
<audio id="audio_0" src = "https://d2zsljmk3mm9kv.cloudfront.net/assets/samples/56c5a7c03f511270e90cb9373ea22a43d6f37082/112eeb9ddba02ec9"/>
$(document).ready(function(){
$("#audio_0")[0].currentTime = 80;
$("#audio_0")[0].play();
});
I've tried all sorts of combinations on trying to play after seekend, oncanplaythrough etc events but no luck. The only way to get it to work is to wait long enough for it to load the entire file which is just not acceptable.
Has anyone been able to get around this? Note that jPlayer does the same thing.
Thanks

Handle net::ERR_CONTENT_LENGTH_MISMATCH error in JavaScript

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!

mailto: anchor links unloading html5 video in Chrome

I have a very simple page with a <video> tag and an email anchor link:
http://jsfiddle.net/6GquX/3/
Clicking the email link in Chrome (OS X 10.8 + Win7, 23.0.1271.97) invokes the beforeunloadchange event and causes the video to unload, which isn't the desired outcome.
Curiously enough, if I let the video buffer a bit and then click the email link, the video keeps playing and doesn't unload.
To my knowledge this only occurs in Chrome and I'm truly at a loss. Visiting any HTML5 video player site (videojs, flowplayer etc), starting a HTML5 video and then immediately simulating an email click with document.location.href = "mailto:foo#bar.com" in the dev console yields the same error.
However, I'm inclined to think it's the way in which the video has been encoded as I'm unable to recreate the above with a video downloaded from YouTube's HTML5 player:
http://jsfiddle.net/6GquX/4/ (source)
1. Is it possible that YouTube are encoding their videos in a particular way to combat this?
2. Are there any strategies / hacks I can employ to get around this?
Update:
The issue seems to be linked to the bitrate of the video. Re-encoding that flowplayer example above to 300kbps resolves the issue. (A 400kbps video still exhibits the same issue, not sure what the exact threshold is)
300kbps example here: http://jsfiddle.net/6GquX/7/
Hopefully this will be resolved in a future version of Chrome.
I just encountered the bug you seem to be describing myself.
My workaround was to simply play the video again after someone clicks the mailto link.
$('.email').click(function(e){
e.preventDefault();
document.location.href = $(this).attr('href');
setTimeout(
function(){
// video.js handle (insert whatever call you want to play the video)
_V_.players.video.play();
},
2000
);
});

How can I debug a youtube flash embed's behavior?

A youtube embed I am using seems to freeze (pause and becomes unresponsive) when I mouse over it. It only happens on chrome, not firefox, and I think it is because of those thumnail previews when you go to fastforward but have no way of checking.
Does anyone know how I can track or diagnose what could be changing the youtube players state?
I have a function set up when it becomes paused, stopped, buffering, and youtube's errors (from their API) but none of these are being triggered. Is there something else you'd suggest using? perhaps in firebug or the like?
Use mm.cfg with Vizzy and a debug player to see what events are happening on the Flash side. A heap snapshot may help isolate the issue as well.

Categories