We Keep Coding

Recording in HD - Ziggeo Recorder v2 JS

I am having difficulty capturing HD video with the Ziggeo Recorder.
I have set up a Recorder, basically, it’s a clone of Ziggeo's hosted solution:
<script>
$(document).ready( function() {
//assigning the event handler for click on the Next button on first screen
$("#step1 button").on("click", function() {
//hide first screen
$("#step1").hide();
//show second screen
$("#step2").show();
//add our embedding to the page
var recorder = new ZiggeoApi.V2.Recorder({
//we find the element with id="recorder" to attach v2 recorder to it
element: document.getElementById("recorder"),
attrs: {
//we make the recorder responsive
responsive: true,
//we set the max time for recording to 120 seconds
timelimit: 2 * 60,
theme: "modern",
video_width: 1920,
video_height: 1080,
video_profile_transcoding: "HDcapture",
hd: true,
//we add name and email to the video as a custom data
"custom-data": {
name: $("#name").val(),
email: $("#email").val()
}
}
});
//we activate the recorder
recorder.activate();
recorder.on("verified", function() {
//once video is uploaded and seen that it can be processed the verified event fires we show the
// button to Submit the form
$("#step2 button").show();
});
});
//When Submit button is clicked
$("#step2 button").on("click", function() {
//hide second screen showing recorder
$("#step2").hide();
//show the "Thank you" screen
$("#step3").show();
});
});
</script>
I’ve tried the following in the attrs array with no avail.
video_width: 1920,
video_height: 1080,
video_profile_transcoding: "HDcapture",
hd: true,
I set up a video transcoding profile (and made it default), but it isn’t catching.
All videos are coming through at:
video_width: 640,
video_heigh: 480,
hd: false,
These Ziggeo support resources don’t seem to answer how to record HD (w/ v2 & JS)...
https://support.ziggeo.com/hc/en-us/articles/206452028-How-do-I-record-in-HD-
https://ziggeo.com/blog/record-video-in-hd/
And I don't see reference to HD anywhere here:
https://ziggeo.com/docs/api
Thanks in advance for any help or guidance. The promise of the Ziggeo product is awesome–I just need to get it to deliver HD!

It is awesome that you included the links and the codes Jon. Looking at them I can see why it is not working for you. My suggestion would be to check out the code from one of your links: https://support.ziggeo.com/hc/en-us/articles/206452028-How-do-I-record-in-HD-
This is the code currently shown there:
<ziggeorecorder
ziggeo-recordingwidth=1280
ziggeo-recordingheight=720
ziggeo-theme="modern"
ziggeo-themecolor="red"
ziggeo-video-profile="_name_of_your_hd_profile">
</ziggeorecorder>
The key parameters for recording HD videos would be setting recordingwidth and recordingheight to the values you wish to use. The default would be 640x480.
The HTML codes require ziggeo- prefix, while JavaScript one does not.
So changing the above example would result in the code that would look like so:
var recorder = new ZiggeoApi.V2.Recorder({
//we find the element with id="recorder" to attach v2 recorder to it
element: document.getElementById("recorder"),
attrs: {
theme: "modern",
recordingwidth: 1920,
recordingheight: 1080,
'video-profile': "_HDcapture"
}
});
I have removed most other parameters to show the most basic parameters you need to set.
Now, in the above code you can also notice that I used underscore before the video profile name resulting in _HDcapture. This is because the tokens (IDs generated by our system) are used without underscore, however if you made the ID, this is then a key (your unique ID) and to make our system aware that it is a key, it will look for the underscore. So if you do not put the underscore in your embedding, then it will just ignore it.
You can see "identifier: _HDcapture" shown to you when you create video profile in the dashboard helping you to know what exactly you should use.
Now looking at the parameters you have used, I believe that you used them from the video data then adding them to your embedding.
This video data is just showing you what you can expect in the JavaScript functions like recorder.get() or what would come in webhook. For actual parameters that you can use you should check out the docs here.
One thing to point out: You can only record 1080 if your camera supports 1080. If you use 720 then your camera has to support 720. Most cameras support 640x480 and is the reason why it is our default. I am saying this because:
You need the camera to be able to record in resolution you wish
You might want to also have alternative for people that do not have HD cameras
For anything JavaScript and HTML related, I would suggest checking out the docs here: https://ziggeo.com/docs/sdks/javascript/. Still do post here, or reach out to the support team of Ziggeo, either over email (support#ziggeo.com) or through forum: https://support.ziggeo.com/hc/en-us/community/topics
PS: I am part of the Ziggeo team, we all like to help, and I hope the above is helpful to you and anyone else looking for the same :)

Queuing YouTube Videos

I want to know how to add selected YouTube videos to a temporary playlist / playing queue?
I have an option where user have to select what all videos to be included in the playing queue.
Click on the ADD icon (black background box) and that selected video will be displayed in the purple background and it also has to be included in the playlist/Queue.
I am able to add the videos in the purple box but unable to add them in the queue.
I tried using this code
player.cuePlaylist({
list: ["83uA6kS_6LE", "RVYU9Be2RtA", "DkQRcjKTqiU", "5NUZtQRgLSQ"] //array of videos ID
});
After that when currently playing video ends I tried to play next video using
function onPlayerStateChange(event) {
if(event.data==0){ //when video ends event.data becomes 0
player.nextVideo();
}
But it neither do anything nor shows any error in the console.
I even tried replacing player.nextVideo(); with player.playVideo(); then instead of starting next video it re-plays the current one.
I tried looking for it in the YouTube documentation but couldn't find anything
https://developers.google.com/youtube/js_api_reference#Queueing_Functions
EDIT 1
TRIED with
cueVideoById(); loadVideoById();
But not working.
I would really appreciate if you guys can provide me an answer or a way to reach the correct audience for this question.

I think the issue is that you have a typo in your call to cuePlaylist. The argument is "playlist" and not "list". Try this:
player.cuePlaylist({
playlist: ["83uA6kS_6LE", "RVYU9Be2RtA", "DkQRcjKTqiU", "5NUZtQRgLSQ"]
});

Using JQueryUI as an audio Seek control, and rebinding a new slider to the same <audio> control when a song is changed

Thank you for looking at my question. Fiddle is HERE.
I am trying to implement an audio player for many songs on a page. This is using JQueryUI Slider and HTML5 Audio, with one Audio element and multiple sliders.
The problems right now are:
The slider does not animate with the audio.
The slider does not seek to the audio.
previously, when both of the above WERE working, once you chose a spot in the song, the slider would no longer animate.
I have created function to rebindSlider() when a new song is clicked. Inside this function, two things happen: a) the new slider is created, with slide and stop listeners defined, and b) the new slider is bound to the timeupdate event on the audio element for the new song. I feel like this should be all that I need, but the slider does not bind, and an undefined error can be seen when you try to drag the slider.
Using a single slider, and a single audio element, I have gotten this 90% the way there; as soon as I introduced multiple divs for the sliders though, problems started occurring.
Here is the code for rebindSlider:
function rebindSlider(sliderDiv) {
var createSeek = function() {
sliderDiv.slider({
value: 0,
step: 1,
orientation: "horizontal",
range: "min",
max: audioPlayer.duration,
animate: true,
slide: function() {
manualSeek = true;
},
stop: function(e, ui) {
manualSeek = false;
audioPlayer.currentTime = ui.value;
}
});
};
createSeek();
$(audioPlayer).bind('timeupdate', function() {
if (!manualSeek) {
sliderDiv.slider('value', audioPlayer.currentTime);
}
});
}
Further description is below.
There is a list of songs included on the page. Each song has a containing div, within which is an <a> that contains meta data (absent in the fiddle), as well as a div designated for the audio seek slider. There is a single audio element on the page, which has its source re-loaded as you click through the songs.
When a song is clicked, I would like to destroy the sliders bound to the playing audio (if necessary), and bind the new slider for the clicked song to the audio player.
The closest I have gotten was to have the slider 1) begin animating when the song plays 2) dragging of the slider moved to a different position in the song. Once the slider had moved though, it no longer animated. After a refactor, the slider no longer works, and though I could go to a previous commit to get the working code, the refactor was so drastic that I would prefer to present the current, non-working code, as it better represents what I would like to end up with.
Reasoning, and additional information.
I am making a web app, for which I have a concept for an audio player that I would rather build myself than modify anything that I have come across. That being said, if you know of something that I can implement, I would love suggestions.
The idea sounds simple enough, and most of it is done, but there is a very crucial part of it that I am having trouble with, which is setting up the slider to animate with, and seek to the desired spot in the audio track, and to be able to rebind a new slider to the audio when a song is clicked.

There are a few changes needed to get the slider working correctly. I'll cover them each, in order that they apply.
Invalid Slider Max Value
The first issue is that the slider's max value is set to the audioPlayer.duration, which would normally be all well and good, except that the HTML5 audio player loads the audio assets asynchronously. What this means is that even though you might have loaded the audio prior to setting the slider, the audio asset may not be loaded yet, and the audioPlayer.duration may be invalid (likely NaN).
Simply remove the max key (and value) from the slider initialization, and this will work. Et viola! The slider moves!
One caveat: the slider defaults to a max value of 100 units, and the duration of the audio is a little over 25 seconds, so the song finishes playing when the slider is 1/4th of the way along. We can set the max key to 25 (seconds), but that's a little inelegant, and wont work if we change the audio to use a different source.
Set the Slider Max Value
Capturing the audioPlayer.duration must be done be handling an event, once the asynchronous load has completed. Javascript provides such an event: onloadedmetadata. Let's install an event handler, and make this work:
audioPlayer.onloadedmetadata = function() {
$(".slider").slider("option", { max: Math.floor(audioPlayer.duration) });
};
Now, what this does is set the slider's max to the audioPlayer.duration once the audio asset has loaded. Actually, this is currently setting the max value for ALL of the sliders, but that shouldn't be a problem, since they're all hidden. If you have a very large number of songs, there might be a bit of a delay, and you may want to find the specific slider to update.
Smooth Sliding
Now, you may notice after these changes that the slider is somewhat jumpy. It pauses for a second, then jumps, then pauses, etc. This can be fixed very easily, by changing the step key to 0.1 in the slider initialization, like so:
sliderDiv.slider({
value: 0,
step: 0.1,
orientation: "horizontal",
The time updates occur every 50 to 250 milliseconds, but the slider could only move in 1-second increments. Now, with 1/10th of a second increments, the slider will move more smoothly. You can decrease that slightly if you like, but don't make the number too small; 0.01 is the practical lower bound.
Update the End-of-Play State
When the song has finished, the "Play" button is left in play state, even though there's no longer anything playing. There's an event for that, as well: onended. We'll use that event to update the UI, so that the user doesn't get confused:
audioPlayer.onended = function() {
playButton.removeClass('fa-pause-circle-o');
playButton.addClass('fa-play-circle-o');
};
Now, when the song finishes, the Play button will go back to the "play" state, and the user will know that clicking on it will play the song.
Refactor Play Button State
Since there are now 3 places that update the state of the Play button, and this involves duplication, we can refactor the state handling. This function will definitively set the state of the Play button:
function setUIState() {
if (audioPlayer.paused || audioPlayer.ended) {
playButton.removeClass('fa-pause-circle-o');
playButton.addClass('fa-play-circle-o');
} else {
playButton.removeClass('fa-play-circle-o');
playButton.addClass('fa-pause-circle-o');
}
}
Now, calling it from the other functions, you end up with the onended event handler:
audioPlayer.onended = function() {
setUIState();
};
The changeUI function:
function changeUI(selectedSong) {
setUIState();
var sliderDiv = selectedSong.parent().find('.slider');
rebindSlider(sliderDiv);//Bind the desired slider
$('.slider').hide(); //Hide all sliders
sliderDiv.show();//Show only the desired slider
}
And, the Play button click handler:
$(".playButton").click(function() {
if (audioLoaded === true) {
if (!audioPlayer.paused) {
audioPlayer.pause();
} else {
audioPlayer.play();
}
setUIState();
} else {
alert("Please click a song");
}
return false;
});
This makes the UI state management for the button simple to deal with, and keeps the state from creeping out through the app. You can already see how the refactored code is noticeable clearer and will be easier to maintain. Plus, as a bonus, we got to use the cool audioPlayer.ended attribute, which you don't see used much.
But Wait, There's More!
With the changes above, you're well on your way to having a very functional audio player. But that's certainly not the end of the line for feature functionality. There's always room to grow!
I've create a jsFiddle that includes all of these changes, as well as a few other mods to the original code. You can find the most recent version at: https://jsfiddle.net/mgaskill/mp087adp/. Additional features are likely to keep popping up, but the jsFiddle already includes these additional features:
Volume control (slider)
Time display
Dynamically generated HTML for audio controls (keeps the HTML simpler)

Play Mp3 sound clip on mouseclick using jplayer?

Actually this the first time I'm gonna use jplayer plugin, so all I need is to play a sound clip (2 sec) when I click on a div, and I don't know how to use jplayer!
I also need to load the sound clip file in cache as well as the page is loading, so when I click that div the sound clip plays immediately without loading it when clicking
btw, is it possible to do that without using jplayer, jquery maybe?!

If you want to stick with jPlayer, try setting warningAlerts and errorAlerts to true.
$(id).jPlayer( { warningAlerts: true, errorAlerts: true } );
This may solve your problem.
But as long as you only need sound (no video), SoundManager 2 might be a better fit for you. Its really robust and provides extensive debugging output.
soundManager.url = './swf/'; // directory where SM2 .SWFs live
var mySound;
soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
mySound = soundManager.createSound({
id: 'someSound',
url: '/path/to/some.mp3'
});
});
//....
//if(xhr-stuff)
if(mySound)
mySound.play();
Use soundmanager2.js for testing and soundmanager2-nodebug-jsmin.js for production. If you have further questions, don't hesistate to ask.

-snip-
scratch that... there's an api
http://www.jplayer.org/latest/developer-guide/#jPlayer-play
Use
$("#jpId").jPlayer("play");

Seek in flowplayer on page load

I want to seek a flowplayer at the page load.
I have tried:
$(document).ready(function() {
$f(0).seek(5);
});
and
$(document).ready(function() {
while(!$f(0).isLoaded()) {
$f(0).seek(5);
}
});
and
$(document).ready(function() {
$f(0).onLoad(function() {
$f(0).seek(5);
});
});
and this one gave result, for a while
$f(0).onLoad(function() {
$f(0).seek(5);
});
The last one moved the pointer to 5 seconds, and back to the start right after.
I want it to stand there.
Any suggestions?

official answer:
http://flowplayer.org/forum/3/101287#post-101528
looks like I was downvoted for just putting a link, and that is understandable as flowplayer has changed their forum URLS!
https://web.archive.org/web/20120629142246/http://flowplayer.org/forum/3/101287
Here is the OP
Found this old question on stack overflow...
http://stackoverflow.com/questions/5034858/seek-in-flowplayer-on-page-load
Wondering what the official answer is? How do you seek on load?
and the response
The onLoad event (of the player) is to early an event to seek a clip.
So you cannot seek onLoad.
You can seek once a clip is loaded and in play or pause state.
Move the seek in the onStart event of the clip - always assuming that you deploy via a streaming server.

I think in some cases it would help to pause the player, jump to the prefered position and the start again. When you have Flowplayer configured to auto buffer it will start playing and pause at the first frame. That could maybe explain the behavior you are seeing (seek to 5, jump to 0 and jump to 5 again. But I think your fix using the load event pretty well solves it, I've used a similar trick to wait for duration to become available.

Solved it!
Used
$f(0).onLoad(function() {
$f(0).seek(5);
setTimeout('$f(0).seek(5)',1000);
}
Then it seeked to 5, jumped back to zero for some reason, and seeked to 5 again.