As demonstrated in the standard jPlayer demo, when the track ends, the player resets time to zero. Is there any way to make it stay at the end of the track?
Use the ended() event in conjunction with the playHead method to keep the play head at the end when it ends.
Modifying the example, here's what I got:
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga: "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3, oga",
ended : function(){
console.log("ended");
$(this).jPlayer("playHead",100);
}
});
});
JSFiddle: http://jsfiddle.net/wjsKa/2/
Reference: http://jplayer.org/latest/developer-guide/
jPlayer is opensource, so you can tweak code as you desire. I suggest getting jquery.jplayer sources and removing lines 973 and 974 from jquery.jplayer.js. Then you just save your own copy and compress it if you desire to do so.
Or you can play around with _updateInterface method so it doesn't move seek bar when called from "ended" event handler.
Sorry for incomplete answer, can't test it right now.
Related
I have a YouTube video link which I am trying to supply parameters to:
https://www.youtube.com/embed/wU4DgHHwVCc?autoplay=1&start=20&end=25&loop=1
Everything else works perfectly except for the loop parameter. The video doesn't loop. According to Google Developer's page:
This parameter has limited support in the AS3 player and in IFrame embeds, which could load either the AS3 or HTML5 player. Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter.
So even though my Chrome browser is not using AS3, as I've disabled flash, I added the playlist parameter to the URL just to see what would happen.
https://www.youtube.com/embed/wU4DgHHwVCc?autoplay=1&start=20&end=25&loop=1&playlist=wU4DgHHwVCc
Now the video does loop but both start and end parameters are ignored and the video starts at 00:00 instead of 00:20 as specified in the URL.
Why do I need to specify the playlist parameter when I am not using AS3 player?
Why does it ignore the start and end parameters on loop?
OS: Ubuntu 16.04 LTS
Chrome version: 60.0.3112.90 (64-bit)
Looking at Youtube documentation... You can modify their shown i-frame API example code like below to get a looping effect.
The trick is :
Set Start Time of video at 20 seconds
Listen for playback begin event and handle with onPlayerStateChange() function, which itself starts a timer of a 5 seconds countdown (ie: 5000 millisecs).
When timer reaches zero it triggers function handleVideo() which itself starts a new timer of 5 seconds. Then auto-seeks back to 20 second (start time) in video's timeline. The timer now creates a feedback loop.
Try my example code below in a new html page. Can also test it here.
Code was tested on Windows/Chrome.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady()
{
player = new YT.Player('player',
{
width: '100%',
height: '800',
videoId: 'wU4DgHHwVCc',
startSeconds:20,
//endSeconds:25,
events:
{
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event)
{
event.target.seekTo(20);
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(handleVideo, 5000);
done = true;
}
}
// Custom function to LOOP
// Moves playhead back to 20 seconds
function handleVideo()
{
setTimeout(handleVideo, 5000);
player.seekTo(20);
}
</script>
</body>
</html>
It is simple. For single video to loop, you need to have it twice.
Try this out.
https://www.youtube.com/embed/wU4DgHHwVCc?playlist=wU4DgHHwVCc&autoplay=1&rel=0&loop=1
Note that "rel" must be set to "0" for any videos that might have them linked as they break the loop.
I made a page for testing HERE if you like to test.
So, I've got this:
$('header').fadeIn(1000, function() {
// Animation complete
});
$('#intro').fadeIn(3000, function() {
// Animation complete
});
And now I want the second one to come in later, so with a delay. But where in the code do I put this?
EDIT: Got it, thanks!
If you want to start the second animation after the first one, you should do this
$('header').fadeIn(1000, function() {
$('#intro').fadeIn(3000, function() {
// Animation complete
});
});
jQuery maintains a queue of effects per element. You are animating 2 elements so they will fire simultaneously.
More info: http://api.jquery.com/queue/
You can nest the functions but that's going to get difficult if you want 10 effects.
Here's a good solution:
https://stackoverflow.com/a/11354378/907253
I'm trying to catch jPlayer full screen event using the following code:
mainPlayer.bind($.jPlayer.event.resize, function(event) {
alert("size changed");
});
But the event isn't fired neither when I press full screen button nor when I press ESC to exit full screen mode.
Check your mainPlayer variable and make sure it references the jQuery jPlayer object. For troubleshooting, try:
$('#yourJPlayerID').bind($.jPlayer.event.resize, function(event) {
alert("size changed");
});
I have created a chrome extension which does something after its button is clicked.
However I dont want it be abused so I need the its code to be executed after some time.
How can I surround this code with a timeout in order to achieve this?
Thank you for reading me!
chrome.tabs.getSelected(null,function(tab) {
var Mp=tab.url.substring(0,23);
if(Mp=='https://www.example.com')
{
onWindowLoad();
chrome.extension.onMessage.addListener(function(request, sender) {
if (request.action == "getSource")
{
...Working here
}
});
}
else
{
message.innerHTML='<span style="color: #f00">This is not a valid page</span>';
}
});
function onWindowLoad()
{
var message = document.querySelector('#message');
chrome.tabs.executeScript(null, {file: "getPagesSource.js"});
}
I had to make a compromise so just after the getSelected I added the following line:
chrome.browserAction.disable(tab.Id);
It disables the action button thus it cant be clicked while the script sends the data to the server, as with this extension I grab the tab url in order to store it in my database.
After the ajax response and adding the following
if(xhr.readyState==4)
{
message.innerHTML=xhr.responseText;
chrome.browserAction.enable(tab.Id); /////<---THAT LINE
}
the button gets ready again to be clicked.
I couldnt find the way to add a specific delay in seconds, this way seems stupid but its working, as the response's delay from my server is enough for switching the 2 states of the action button.
With this, however another problem came up, which Ill write in different question.
I want to load sound placed in sounds folder.
Code is
var my_sound = new Sound();
my_sound.loadSound("sounds/sound1.mp3");
my_sound.onLoad = function(success:boolean){
if(success){
my_sound.start();
}
}
This plays sound when flash is open and pressing CTRL+ENTER(Test Movie).
but when we plays the swf it won't play sound.
for this problem i found one solution.
i made off onLoad function. and the Test Movie. Now the opposite things happend.
It dosen't play when press CTRL+ENTER (TestMovie);
but it plays when swf is playing.
Is there any other way of loading sound.
Try:
var my_sound:Sound = new Sound();
my_sound.onLoad = function(success:Boolean)
{
if (success)
{
my_sound.stop();
}
};
my_sound.loadSound("sounds/sound1.mp3", true);
This will stop the sound as soon as it's loaded.
Whenever you want to start the sound, just call this function:
my_sound.start();