We use JWPlayer for video playback, with only a single player embedded in any page, and suddenly it has stopped executing callbacks, though it does not throw errors when the listeners are registered (for onPause, onPlay, and onComplete).
Embedding continues to work fine. The player responds to user interactions to pause, play etc. However, when these occur no callbacks are triggered.
As part of troubleshooting, I have replaced the callbacks with very simple troubleshooting functions, e.g.
jwplayer().onPause( function(event) { alert('pause!'); return true; } );
In the JavaScript console for both IE and Chrome, no JavaScript errors are shown. Troubleshooting statements (alerts) around every JWPlayer JavaScript call show that no errors are thrown. Wrapping all calls to JWPlayer in try/catch blocks and alerting any created error messages does nothing.
In the JavaScript console after page load, executing control methods such as jwplayer().play() exhibits the following behavior: does NOT change the player's actual playback state, but DOES trigger callbacks.
The JWPlayer version is "5.9.2156 (Licensed version)".
EDIT: Another clue: In the JavaScript console, even when the player is paused, alerting jwplayer().getState() shows "PLAYING".
EDIT: In our testing, disabling HTML5 mode prevents this bug from appearing, but is not optimal.
In the end there was no fix for this bug, but we worked around it by having the player default to flash mode first, then fall back to HTML 5 mode second.
The implication of the bug is that for those users who do not have flash support enabled in their browser, our pre-existing integration with Google Analytics will not work, but this should be a minority of users.
We considered upgrading to JWPlayer 6 but that is not an option at this time, due to a known issue with extra play events being reported.
Related
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'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.
I'm implementing a video player using VideoJS. Two key functions of this video player are:
a) If the user leaves the page, resume the video at that point when they come back or on refresh
b) Include HLS (h.264/mp4) support to provide better video quality depending on the connection.
The API for saving and retrieving a user's timestamp is already in place, and using the excellent HLS plugin, the video player works almost fine in all browsers as expected. The following code is used to initialize the player and jump to the saved time:
videojs.options.flash.swf = '../video-js/video-js.swf';
var player = videojs(videoId);
supportHLS = videojs.Hls.isSupported();
player.ready(function() {
[[event listeners for media controls]]
this.on('seeked', function() { console.log('seeked');});
this.on('seeking',function() { console.log('seeking');});
var PLAYER_LOADED = 'loadedmetadata';
if(!supportHLS) { PLAYER_LOADED = 'canplay';}
this.one(PLAYER_LOADED, function() {
this.one('canplay', function() {
this.play();
});
this.currentTime(savedPosition);
lastViewed = savedPosition;
});
});
(Reason for the roundabout logic: Chrome had issues with playing the video before the new data (after the seek) had loaded, which caused a number of problems with the data in the buffer. Also, Safari 7.1 would break if you tried this during the 'loadedmetadata' event)
However, there's still one problem, specific to Safari. The loading spinner doesn't always go away when you refresh the page. Examining the logs and listeners seems to indicate that the 'seeking' and 'seeked' events fire at about the same time, but in different orders; the problem always arises whenever 'seeked' fires first, and never occurs when 'seeking' is first. Furthermore, any seeking after the video is playing removes the spinner, so it has to be caused by the initial seek.
It's interesting that Safari supports HLS streaming natively, yet consistently causes the most problems with this player implementation. This is the last Safari bug to iron out, but though it's small it still has a negative impact on user experience.
What causes Safari to fire the 'seeked' and 'seeking' events out of order like this? What can I do to work around it, or is there a cleaner solution for what I'm trying to accomplish?
I have used some jquery components in my web site, Suddenly i'm getting an error,
"A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.
"
I have used, Jquery tab component, Carousel components 5 times, image slider component. Is it due to many Jquery compnents?
I have used,
jquery-1.6.4.min.js
Fixed the error,
Issue was the order of some jquery scripts. Once its in the correct order, it works without any issue, not due to too many components.
#madhairsilence and #pst - Thanks for the comments
Problem in Firefox,
Disable firefox add on and restart firefox with safe mode...
https://support.mozilla.org/en-US/questions/1008123
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.