YouTube JavaScript player starts to play the video when seekTo is called - javascript

Accordring to the YouTube IFrame Player API the seekTo method should start to play the video unless the player state is "paused". That would be OK if there was any way to put the player in this state. Here is a fiddle that calls pauseVideo to put the player in the "paused" state. Then it calls seekTo. The video starts playing.
Do I read the docs wrong in any way? Or is this a bug in the YouTube player?
http://jsfiddle.net/lborgman/r46ofyz0/6/

With youtube it seems paused means that you have requested the video to pause, unlike HTML5 video where paused simply means "not playing"
You can check the state with instance.getPlayerState(). Anything except 2 (paused) should trigger playing. In this case it seems to be video cued (5).
I created an issue for what I think is the real problem (pauseVideo doesn't do anything), using a fork of your jsfiddle. It may not be considered to be a bug though. We'll see.

Related

Content script for pausing youtube videos

I am currently working on a google chrome extension that features a content script for altering youtube pages. I have done some work with altering the DOM already and all of that works, however, I have been looking for solutions to have the youtube video pause when the page loads.
I initially thought perhaps I could simulate a keystroke as the spacebar pauses youtube videos. I also tried using javascript to pause the video but I don't think it works with Youtube's custom video player.
Don't feel obligated to write any code for this but if someone could point me in the right direction I would be very grateful.
On the main page of a video, the HTML5 video element playing the video has a specific class, so you can target that; and as an HTML5 video element, it has the play() and pause() methods already.
document.querySelectorAll('.html5-main-video').forEach(vid => vid.pause());
That will pause all HTML5 main videos on the page. Helpfully enough, that's the same class used by the little autoplaying video on some channel pages, so it should work for those as well :)
(Don't worry about Flash videos; YouTube hasn't supported those for years now.)

HTML5 - Check if autoplay is allowed

My website plays background music with autoplay. I made it use my custom controls for play and pause. Now, I'd like to set the initial state according to what is going on. If the music is about to play for real, it should show pause icon, otherwise (e.g. on mobile) play icon.
I would use audio.paused boolean value, but it's always false before the audio is loaded.
I would use audio.autoplay value, but it's always true for me, even on devices that don't support it.
Is there any clean way to know whether the audio will be played? I would like to keep it in sync with autoplay attribute, so if I decided to remove it, the state should always show play icon in the beginning.
Just playing or even buffering songs isn't especially fair, when there is the slightest chance people can be on the site for other reasons, like for example to check for updates, to share the link. people can be on the page with a mobile network, with limited bandwidth and downloads of those sizes shouldn't ever start sneaky behind their back.
edit: a few additional references
Here is an overview over the reasons not to have music on autoplay
And contrary, a website I personally like a lot with a great use of background music on autoplay
But if you are already building your own player and want that to be a feature of the page, setting that player to autoplay would not only devalue your own work, totally break your design. Instead you could just trust that people who want to hear the music will identify your audio player and use it.
To fully implement your custom player GUI you may want to listen for all audio events on the player element and update your view accordingly. The event you are looking for is "canplaythrough" but you probably want to react to at least most of the other events too. Those events are:
playing
waiting
seeking
seeked
ended
loadedmetadata
loadeddata
canplay
canplaythrough
timeupdate
play
pause
ratechange
volumechange
suspend
emptied
stalled
You currently may do something along the lines of
view.showPlayButton();
player.play();
but that breaks as soon as you at some point want to toggle your player in some other way or something else happens, like it gets stalled, so better listen to the event and update your GUI in one place, and control the playback (like start / stop the player) in another.

Loading tracks in the player

I'm looking for a way to load tracks in the Deezer player w/o playing then, especially when something is already playing.
http://developers.deezer.com/sdk/javascript/loadtracks#tracks simply shows how to play tracks
Or should I use something in the callback that prevents playing, but keeps playing what's currently running?
You can deactivate autoplay by setting a boolean as a parameter, for example DZ.player.playTracks([3135556, 1152226], false).
Another thing that would be of your interest: you can add songs to the player queue with DZ.player.addToQueue([list of track IDs]).

Video player suggestions similar to youtube player

What is the best way to create a video player similar to the youtube video player in that after the video has played, it shows a collection of further videos to watch?
The videos are not hosted on youtube.
Generating the video suggestions is not a problem. The problem is displaying them in the player after the video finished playing in such a way that if the user clicks one of the suggestions, the selected video page is opened and played.
Can I do this in html5 or jquery or flash or something else?
JWPlayer is a good HTML5 video player with a Flash fallback. It also has a decent API which supports related videos: http://www.longtailvideo.com/support/addons/related-videos/22352/related-videos-reference-guide/.
There are a few license options too: http://www.longtailvideo.com/jw-player/pricing/
Hope that helps.
Can be done in Flash. You could use the FLVPlayback Component to play the original video. Then use the Listener Class to listen for COMPLETE. You could then place thumbnails for each of the related videos on top of the FLVPlayback Component - these would then load the new video into the component and the process would continue.
Check this tutorial out for using the component and also the Listener Class for the component.

Detecting Youtube Seek Event

I'm writing a Chrome extension which controls background music (Pandora, Google Music, etc) in response to Youtube events.
I'm able to detect when the video is started, paused, or stopped by adding an event listener to the player. However, the video switches states from playing to paused when seeking. This causes the background music to respond (unpauses) when the user is skipping in the video.
Is there any way to catch this click-and-drag seek event from within Javascript? A workaround (which might be the correct behavior) is to only unpause background music when the video ends--not just pauses--but I was curious if anybody had tackled something like this before.
Seeking is normally a quite a short event, so make the music only start up again after a few seconds have elapsed after the player is paused.

Categories