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]).
Related
I'm using ReactJS and I'm trying to display a video where the user is only allowed to continue after watching the entire video. I'm currently using a dependency called React-player, it has the option to check when it has ended, but then the user can just skip through the video.
Is there a way to check if the video was played for a certain duration? Or is it possible to disable forwarding?
This is my code currently:
<ReactPlayer
onEnded={() => setVideoEnded(true)}
url={
"https://...server.net/NodeUploadServer/public/" +
course.video
}
width="100%"
height="100%"
controls={true}
/>
<Button disabled={!videoEnded} >
Go to test
</Button>
Here are two possible solutions to your question:
Use a custom player UI
The first solution is to remove the default player controls which is rendering the timeline component. However, with this solution, you will need to create your custom UI.
Keep track of the played time
The react-native player does have an event to publish the elapsed time, but this isn't what you are looking for.
If you are using the HTML5 Video player, you could leverage the played property and verify if the video has been played a certain range.
If not, you will have to keep track of the time played using an interval or using the timeupdate event.
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.
I have a Netflix account and I have peeked under the hood at its video player running inside Google Chrome. Netflix calls its video player "Cadmium" and the javascript exposes all the functions and event handlers you might expect, such as play, stop, pause, mute, etc. I'm building a little Chrome extension that would enable me to call these Cadmium player function, but the hard part for me is figuring out how to create an instance of the player so I can start calling. The javascript is large, complex, and somewhat obscure. Once I can create an instance of that player, I'm thinking that making calls into the functions will be easy.
Here is a relevant chunk of js:
muteOn: function() {
this.savedVolume = this.getVolume(),
this.updateVolumeDisplay(0),
this.scrubber.updatePercent(0),
this.muted = !0,
this.videoPlayer.setMuted(this.muted)
}
In Chrome dev tools I can set a breakpoint inside that block, and execution hits the breakpoint when I click the Mute button on the netflix video player. The Netflix js is (unsurprisingly) heavily obfuscated via method renaming. I tried stepping through the code in the debugger and ended down a hundred rabbit holes, never able to find my way to the top of the stack, so that I could make that same call (at top of stack) to simulate the user clicking the mute button. I also tried the approach of programmatically clicking the mute button on the UI player, which would meet my needs equally well, but they have serious defensive mechanisms in there, spinning me like a top.
Since there are over 100K lines of javascript, and I'm uncertain which chunks exactly would be relevant for this post, I would like to suggest that you load Netflix in Chrome, open dev tools, play a movie, and inspect the pause or mute button. Interacting with those video player controls takes you into the maze of javascript which I'm trying to see how I can tap into to control aspects of the player programmatically (just from dev tools is fine for now). Another important thing I need to figure out is how to query the video player to determine the current elapsed time of the playing video.
Any ideas how I can crack this nut? (Thanks in advance!)
Using Chrome, I get playback using HTML 5 video.
Once you get a hold on the <video> tag element, you can use the HTML 5 video API:
Get the <video> element
var video = document.evaluate('//*[#id="70143639"]/video',document).iterateNext()
70143639 is the id of the video, as in https://www.netflix.com/watch/70143639
Remaining time (HH:mm)
document.evaluate('//*[#id="netflix-player"]/div[4]/section[1]/label', document).iterateNext().innerHTML
Elapsed time (seconds)
video.currentTime
Elapsed time updates
video.addEventListener("timeupdate",
function(e) {
console.debug("Seconds elapsed: ", e.timeStamp/1000/60);
}
);
Note that I don't get the same results as with video.currentTime, you may need to use an offset based on the difference. Also it may be something explained in the spec: https://www.w3.org/TR/html5/embedded-content-0.html
Play
video.play();
Pause
video.pause();
Go back and forth in time
Courtesy of rebelliard:
netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[1].handler(null, {value: 600, pointerEventData: {playing: false}}); where 600 is the number of seconds to seek.
Note that I ran into "Whoops, something went wrong..." using this:
video.currentTime += 60;
Even with pause and play calls. This is what this demo page does, you nay need to read the full spec on seeking.
Mute and get muted status
video.muted = true
Like video.currentTime, this is a writeable property.
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.
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.