How could we do this using video.js My initial thoughts are we can trigger play when the video ends.
pseudo code
for (int i = number_of_times_to_loop, i>=0, i--) {
see if the timer of the video reached the end {
trigger play from start
}
}
You can play the video on the ended event to loop. Then it's just a matter of tracking how many times you have played it already.
var max = 3,
i = 1;
videojs("home_video").on('ended', function(event) {
if (i < max) {
this.play();
i++;
}
});
Related
I have a WebRTC stream which is sending audio/video, I am displaying the volume in a meter widget which is retrieved from a getStats call on the peerConnection.
getStats(function (stats) {
var results = stats.result()
for (let i=0; i < results.length; i++) {
var res = results[i]
if (res.type == 'ssrc') {
volume = parseInt(res.stat('audioInputLevel'))
}
}
})
This is working fine, the issue is when I run replaceTrack to update the streams audio/video the above getStats returns 0 for the audio level.
navigator.mediaDevices.getUserMedia(media)
.then(stream => {
const tracks = stream.getTracks()
peerConnection.getSenders()
.forEach(sender => {
const newTrack = tracks.find(track => track.kind === sender.track.kind)
sender.replaceTrack(newTrack)
})
})
The local stream get's updated, the remote user get's updated and audio / video is working. But getStats is no longer returning the audioInputLevel.
Would anyone be able to help me understand why? Or what a fix maybe.
Thanks
audioLevel is broken in spec-stats, see https://bugs.chromium.org/p/chromium/issues/detail?id=920630#c16 and the linked bugs.
Hi I am using more than one clips on my site with video.js player. My problem is than, if you click on another clip the first one still runs.
How do I have to set the player only to run the selected clip?
I gave all clips unique IDs but this doesn't solve it.
Any ideas?
Thanks katasun
When starting a video clip, you need to check all other clips and stop them, if running. You could do this in JavaScript like this:
playerIDs = ['id1', 'id2'];
var length = playerIDs.length;
for (var i = 0; i < length; i++) {
var myPlayer = videojs(playerIDs[i]);
myPlayer.on("play", function() {
for (var a = 0; a < length; a++) {
if(playerIDs[i] != playerIDs[a]) {
var otherPlayer = videojs(playerIDs[a]);
otherPlayer.pause();
}
}
});
}
I have a winJS where I am recording video. While I can make it work, I want to stop the camera recording automatically after 15 seconds. Currently the cam records more than 15 secs then trims out 15 secs from the video. I want the camera turned off/stop recording after 15secs automatically. I have the following code:
function captureVideo() {
WinJS.log && WinJS.log("", "sample", "status");
// Using Windows.Media.Capture.CameraCaptureUI API to capture a video
var dialog = new Windows.Media.Capture.CameraCaptureUI();
dialog.videoSettings.allowTrimming = true;
dialog.videoSettings.format = Windows.Media.Capture.CameraCaptureUIVideoFormat.mp4;
dialog.videoSettings.maxDurationInSeconds = document.getElementById("txtDuration").value;
dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.video).done(function (file) {
if (file) {
var videoBlobUrl = URL.createObjectURL(file, {oneTimeOnly: true});
document.getElementById("capturedVideo").src = videoBlobUrl;
localSettings.values[videoKey] = file.path;
} else {
WinJS.log && WinJS.log("No video captured.", "sample", "status");
}
}, function (err) {
WinJS.log && WinJS.log(err, "sample", "error");
});
}
The CameraCaptureUI that you are using sacrifices power for the ease of use and standard interface. If you need more power such as the ability to start and stop the recording, you should use the MediaCapture object. See my mediacap demo in codeSHOW. In it I am using the MediaCapture for recording audio, but you can likely figure out how to record video instead and add your concept of timing.
I added this script in my site to reproduce video playlist.
<script type="text/javascript" src="swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var params = { allowScriptAccess: 'always',
allowFullScreen: 'true' };
var atts = { id: 'myytplayer' };
swfobject.embedSWF("https://www.youtube.com/v/videoseries?listType=playlist&list=PLBA9E733B5C8314DE&autoplay=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "640", "360", "8", null, null, params, atts);
function onYouTubePlayerReady(myytplayer) {
ytSwfPlayer = document.getElementById( 'myytplayer' );
ytSwfPlayer.setShuffle(1);
}
</script>
the setShuffle function don't work!!!
You can suggest me a solution?
This appears to be a bug in the player. I've reported this bug to the team. In the future you can report bugs at https://code.google.com/p/gdata-issues/issues/entry?template=YouTube%20(Defect%20Report)
As a work around you could use the JS api to shuffle it yourself. When a video ends you can call playVideoAt and pass a random number.
The problem is that if you've loaded a playlist queue in the Youtube player, the next track will automatically start at the end of the current playing one.
So you should bind track ended event (which is event.data = 0) and then make the youtube player make two things:
stop playing
play a new track with a random index by calling playVideoAt method.
A simple solution to avoid repeating the same track more times is to store the played idx in a list. Then, you should have a function, like shuffle that generates a random integer between 0 and the queue length:
function getRandomId() {
var random_id = 0
while(played_idx.indexOf(random_id) != -1) {
random_id = Math.floor(Math.random * playlist.length)
}
return random_id
}
Then, simply call playVideoAt(random_id).
I've noticed that setShuffle does work if you launch the command a little later. Something like this:
function onPlayerReady(event) {
event.target.mute();
setTimeout( function() {
event.target.setShuffle(true);
event.target.setLoop(true);
}, 2000);
}
If you launch it directly, it will definitely not work (I have noticed, to my frustration).
Is it possible through the YouTube API to fire an event when the video reaches a specified time? e.g. when the video reaches 20 sec. fire the event.
Thanks,
Mauro
not sure if you still need an answer to this (as I'm finding it 4 months later) but here's how I accomplished this with youtube's iframe embed api. It's ugly in that it requires a setInterval, but there really isn't any kind of "timeupdate" event in the YouTube API (at least not in the iframe API), so you have to kind of fake it by checking the video time every so often. It seems to run just fine.
Let's say you want to start up your player as shown here with YT.Player(), and you want to implement your own onProgress() function that is called whenever the video time changes:
In HTML:
<div id="myPlayer"></div>
In JS:
// first, load the YouTube Iframe API:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// some variables (global here, but they don't have to be)
var player;
var videoId = 'SomeYoutubeIdHere';
var videotime = 0;
var timeupdater = null;
// load your player when the API becomes ready
function onYoutubeIframeAPIReady() {
player = new YT.Player('myPlayer', {
width: '640',
height: '390',
videoId: videoId,
events: {
'onReady': onPlayerReady
}
});
}
// when the player is ready, start checking the current time every 100 ms.
function onPlayerReady() {
function updateTime() {
var oldTime = videotime;
if(player && player.getCurrentTime) {
videotime = player.getCurrentTime();
}
if(videotime !== oldTime) {
onProgress(videotime);
}
}
timeupdater = setInterval(updateTime, 100);
}
// when the time changes, this will be called.
function onProgress(currentTime) {
if(currentTime > 20) {
console.log("the video reached 20 seconds!");
}
}
It's a little sloppy, requiring a few global variables, but you could easily refactor it into a closure and/or make the interval stop and start itself on play/pause by also including the onStateChange event when you initialize the player, and writing an onPlayerStateChange function that checks for play and pause. You'd just need to seperate the updateTime() function from onPlayerReady, and strategically call timeupdater = setInterval(updateTime, 100); and clearInterval(timeupdater); in the right event handlers. See here for more on using events with YouTube.
I think you may have a look at popcorn.js.
It's an interesting mozilla project and it seems to solve your problem.
Not sure if anyone agrees here but I might prefer to use setTimeout() over setInterval() as it avoids using event listeners, eg:
function checkTime(){
setTimeout(function(){
videotime = getVideoTime();
if(videotime !== requiredTime) {
checkTime();//Recursive call.
}else{
//run stuff you want to at a particular time.
//do not call checkTime() again.
}
},100);
}
Its a basic pseudocode but hopefully conveys the idea.