I am creating a website where I am embedding a YouTube video on clicking some url's. The wrapper for the video is hidden initially, so I am displaying the wrapper on clicking on a url and then creating the player.
All is good, except that in case of fast transitions between url's, there are some errors thrown in the console which look like -
Uncaught TypeError: Object #<O> has no method 'cueVideoById'
Here is the sample code - http://jsfiddle.net/2b6bu7p4/2/
This happens only when I start clicking rapidly on the url's for the first time after page load. If I start on slowly, it works fine.
How can I fix this? Thanks in advance.
so a quick fix would be to make sure the player is ready before cueVideoById is called
function loadVideoOnClick(videoId) {
console.log('Loading');
if (player && player.cueVideoById) {
player.cueVideoById(videoId);
}
}
fiddle: http://jsfiddle.net/leighking2/2b6bu7p4/5/
Related
I've been experiencing issues with multiple Brightcove videos freezing at :19 seconds when played through Fancybox. Here is an example: https://jsfiddle.net/qrqwy0qt/1/
Steps to reproduce:
Click the 'Play Video in Fancybox' button
Watch the video play through correctly
Refresh the page, or click 'Run' in jsfiddle
Play the video again in Fancybox, watch it freeze at :19 seconds.
Wait about a minute and the video shows "Could not download the video. Error code: PLAYER_ERR_TIMEOUT" and the following error is shown in the console:
VIDEOJS: ERROR: (CODE:-2 undefined) i {code: -2, type: "PLAYER_ERR_TIMEOUT", message: ""}
h # index.html?videoId=5002405584001&autoplay=1:1300
g.error # index.html?videoId=5002405584001&autoplay=1:1300
b # index.html?videoId=5002405584001&autoplay=1:1307
db # index.html?videoId=5002405584001&autoplay=1:1297
(anonymous function) # index.html?videoId=5002405584001&autoplay=1:1308
This doesn't appear to happen when the video is embedded on the page normally, which you can also see in the jsfiddle.
Additionally, with certain video players you can even see the issue forming in the buffer progress bar:
Video Progress Bar Image
You can see the color change on the progress bar right at :19 seconds. The video seems to have issues loading content after this point unless you manually seek beyond that point.
I've also had this issue using other lightboxes such as Brightcove's modal. Can anyone help me find a fix for this?
Update:
It seems the issue only occurs when the video height is over 270px, excluding the "letter-box" of the video player. You can test this with the following CSS properties:
.fancybox-inner{
max-height:270px; // No freezing issue
//min-height:275px; // Results in freezing
}
This isn't really a permanent solution because it prevents responsiveness on larger resolutions, but hopefully this information can bring us closer to a real solution.
Could you specify the browser? I tested it on Firefox and Chrome and works fine.
I often find myself using this line of code on the console of the browser:
document.getElementsByTagName('video')[0].playbackRate = 1.5;
I use it so I can speed up a video (I just prefer to watch videos on a higher speed). Is there a way to make this line of code run on every web page I open. For example if I go to a youtube video, this line of code runs automatically. I know that YouTube already has buttons for speed, but some players don't have the UI for this and this is why I have to do this often. Thanks in advance :)
I've been searching around for a long time but still haven't found a valid solution for my problem. I just cant seem to get the video player to enter fullscreen. The API does have many examples but none of them seem to work.
The jQuery version included on the page I am currently working on is 1.8.2. Also, I am using parallax-1.1.js and libraries required for it to work properly so that may also be an issue.
The client I am working for wants the site to have responsive design, with the ability of the player to directly go to fullscreen when the "Play" button is clicked. This functionality should be avalable both on desktop, and mobile/tablet browsers. On the video page, there should be 3 video players, each of them has unique IDs, and they also have a common CSS class.
Some of the code I tried didn't work well. Here's an example JS code snippet controlling one of the video HTML tags.
Example:
player1 = _V_('video-1');
player1.on("play",
function () {
this.requestFullScreen();
});
player1.on("ended",
function () {
this.cancelFullScreen();
});
The code generates this error:
Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'
I am working with the latest version of Google Chrome.
There are a two problems to be solved here.
First, you cannot go to full screen inside a 'play' event handler. For security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule. So you need to move this to a 'click' handler on the actual play button.
The second is a big problem with Video.js 4.0.x, which is that it's minified using Google Closure Compiler with Advanced Optimizations. So many of the public properties and methods are obfuscated, making them difficult/impossible to use. In this case, requestFullScreen is now player1.Pa(). And, as far as I can tell, cancelFullScreen doesn't exist at all.
Here are some options for how to handle this:
Use the obfuscated method name. I don't recommend this, because a) the name will change with every minor version upgrade (e.g. 4.0.5) and b) it will make your code unreadable, and c) you can't use cancelFullScreen.
Get an un-minified copy video.js and host it yourself. (You can use Uglify or another minifier that won't mess with the method names.) Video.js doesn't provide this file, so you have to clone the git repo and run the build script yourself. And you don't get the advantage of using video.js's CDN for free.
Use an older version of video.js and wait until 4.x is ready for prime time.
Don't use video.js at all. Consider jPlayer and jwPlayer or roll your own.
I recommend 2 or 3.
Update: It looks like this particular issue has been fixed, but it has not made it into release yet.
I personally used a custom link that triggers both play and fullscreen.
<a class="enter-fullscreen" href="#">Play fullscreen</a>
And the js part:
<script type="text/javascript">
$('.enter-fullscreen').click(function(e) {
e.preventDefault();
$('.vjs-play-control').click();
$('.vjs-fullscreen-control').click();
});
</script>
This is improvable but simple and does the job.
One easy way to solve the problem:
document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)
Video goes full screen and the regular event of the play button causes it to start playing.
in video.js file go to this lines
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
and add
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
document.getElementsByClassName('vjs-fullscreen-control')[0].click()
// exit early if clicked via the mouse
if (this.mouseused_ && event.clientX && event.clientY) {
silencePromise(playPromise);
return;
}
The website EndlessVideo used to work fine, but all of a sudden it will not loop videos anymore. I've found that running the following code in the console has the wanted effect, but strangely, adding it to the bottom of the page does not seem to work:
<script>
ytplayer = jQuery("#ytapiplayer")[0];
ytplayer.addEventListener("onStateChange", "onytplayerStateChange1");
function onytplayerStateChange1(state){console.log(state);if(state == 0){ytplayer.playVideo();}}
</script>
I've tried various modifications of the above, including calling it from onYouTubePlayerReady(), running it on a timer, etc... Nothing seems to work.
The youtube video player loads after the page is loaded. So the event is not actually getting bound to the player. Please try adding the state handler after the video starts playing or at least when the player has loaded.
The looping is enabled by passing the &loop=1 query string.
The JavaScript API isn't needed to enable looping.
I have tried several examples from vimeo and other websites for getting a JavaScript event to fire when an iframe embed vimeo video stops playing.
Nothing I try seems to work!
Does anyone have the simplest possible version of a JavaScript onFinish event for an iframe vimeo player?
The example page is www.armourylondon.co.uk/work.php - clicking on a video thumb animates a div and then loads in the player with Ajax. I am using the prototype / Scriptaculous frameworks for the ajax and animations.
I have got the froogaloop js included and as I said, I have followed many examples from Stack Overflow, from vimeo's API examples and from other websites too but none work - at least not for me!
All I need is for someone to show a good old Hello World alert when a video has finished playing - I can do the rest from there! I have been sat here for three hours trying to get a simple alert to flash up but alas to no avail!
The Js that runs the thumbnail-to-vimeo animation and loadup is directly in the head of the document - the code inside the onComplete function for the ajax updater under the comment // Vimeo Auto close after finish is the last version I have tried that didn't work. I have been putting the code in there as the iframe doesn't exist in the Dom until the Ajax Updater has loaded the video into the div that grew when the thumbnail was clicked.
I used this code in the end - got it working at about 9am this morning!
$f($('armoury_vid')).addEvent('ready', ready);
function ready(player_id) {
// Keep a reference to Froogaloop for this player
var container = document.getElementById(player_id).parentNode.parentNode;
froogaloop = $f(player_id);
froogaloop.addEvent('finish', function(data) {
document.body.removeChild($('armoury_vid').parentNode);
});
}
I placed the code into the onComplete callback for the Ajax.Updater call thats loads the vimeo video into the page.
I believe that it was because I was not wrapping the $(prototypecall) in the Froogaloops $f() function - mistake noted!
The above script was built using the Prototype framework - It would take very little work to adapt it to use the jQuery framework - its down to personal preference - they both do the same, just slightly different syntax!