I'm stuck on a piece of JavaScript code that applies an event on the Youtube API. The goal is when you click on the appropriate button, the video moves backwards by 5s, 10s or 30s or advances by 5s, 10s or 30s.
My problem is that I have six functions that are alike but do not have the same time values. (in this example I put only two of the functions: rewind5() to back up 5 seconds and rewind10() to back up 10 seconds).
I am looking for a charitable soul that could help me to combine these two functions (rewind5() and rewind10()) into a single function. Once I have the right structure I could create the four other functions using the single function.
My JS file :
// Rewind 5s
function onPlayerReady(event){
if(player.getPlayerState()===1 || player.getPlayerState()===2){
$('#s5back').prop('disabled', false);
$( '#s5back' ).click(function() {
rewind5();
});
} else {
$('#s5back').prop('disabled', true);
}
}
function rewind5() {
var currentTime = player.getCurrentTime();
player.seekTo(currentTime - 5, true);
player.playVideo();
};
// Rewind 10s
function onPlayerReady(event){
if(player.getPlayerState()===1 || player.getPlayerState()===2){
$('#s10back').prop('disabled', false);
$( '#s10back' ).click(function() {
rewind10();
});
} else {
$('#s10back').prop('disabled', true);
}
}
function rewind10(){
var currentTime = player.getCurrentTime();
player.seekTo(currentTime - 10, true);
player.playVideo();
};
My HTML file :
<div id="video-placeholder"></div>
<script type="text/javascript">
var player,
time_update_interval = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: '100%',
height: '625px',
videoId: 'ID URL YOUTUBE',
playerVars: {
color: 'white',
controls: 0,
rel: 0,
showinfo: 0
},
events: {
onReady: initialize,
onStateChange: onPlayerReady
}
});
}
</script>
Why not have just a single seekBy function, and pass it the desired number of seconds to rewind?
function seekBy(secs){
var currentTime = player.getCurrentTime();
player.seekTo(currentTime + secs, true);
player.playVideo();
}
and implement it with, for example
$('#s10back').click(function() {
seekBy(-10);
});
or 5 seconds, or 30, or 60. To go forward, pass a positive number instead:
$('#s10forward').click(function() {
seekBy(10);
});
Related
I have a player with a for loop counter underneath.
When I set the window to onload, the for loop works, but the youtube video does not display.
http://jsfiddle.net/ajLg0wf9/
When I set the window to no wrap - bottom of <head>, the youtube player works but the for loop doesn't.
http://jsfiddle.net/b8rha571/1/
What's the best way to resolve this?
You need to place youtube api functions at global level not inside onLoad event, something like this:
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'wQxmK1CZwik',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
loopStart();
player.playVideo();
}
function loopStart() {
player.seekTo(7); // Start at 7 seconds
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
setTimeout(loopStart, 30000); // After 5 seconds, restart the loop
}
}
document.addEventListener("DOMContentLoaded", function(event) {
var button = document.getElementById("clickme"),
count = 0;
button.onclick = function() {
count += 1;
button.innerHTML = "Click me: " + count;
};
});
</script>
I'm not sure how to do it correctly in jsfiddle but this works: http://jsfiddle.net/ajLg0wf9/10/
I have a div in html
<div id="player"></div>
In the JS file I have the following code
var player = new YT.Player("player", {
height: '0',
width: '0',
playerVars: {
'showinfo': 0,
'rel': 0
},
events: {
'onStateChange': onPlayerStateChange
}
});
$scope.playVideo = function(videoURL) {
player.loadVideoByUrl($sce.getTrustedResourceUrl(videoURL));
};
function fullScreen() {
var e = document.getElementById("player");
e.requestFullscreen();
}
function onPlayerStateChange(event) {
switch (event.data) {
case -1:
fullScreen();
break;
default:
break;
}
};
The problem is that when I click on a button, I call the playVideo() function. It eventually calls the fullScreen() function and the video runs fullscreen.
The video starts from the beginning and not from the specified start time in the URL.
Example call:
$scope.playVideo("https://www.youtube.com/embed/Xy_7q1xMnOg?start=60");
I expect the video to start playing from 61st second and in fullscreen.
It is playing in fullscreen but it is starting from the beginning.
Am I missing something? Or please let me know if you need more information.
I'm currently working with the youtube iframe API.
var player,
time_update_interval = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 600,
height: 400,
videoId: 'Xa0Q0J5tOP0',
playerVars: {
color: 'white',
playlist: 'taJ60kskkns,FG0fTKAqZ5g'
},
events: {
onReady: initialize
}
});
}
function initialize(){
// Update the controls on load
updateTimerDisplay();
updateProgressBar();
// Clear any old interval.
clearInterval(time_update_interval);
// Start interval to update elapsed time display and
// the elapsed part of the progress bar every second.
time_update_interval = setInterval(function () {
updateTimerDisplay();
updateProgressBar();
}, 1000);
$('#volume-input').val(Math.round(player.getVolume()));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
...<br>
<div id="video-placeholder"></div>
<br>...
So far it all works great but I want to display the latest video of a specific channel. I know it's something with user_feed but I don't know how exactly to do it as I'm a complete js/api beginner.
Thanks
So I'm writing a TamperMonkey script that sends specific videos to YouTube's embedded player however I want to automatically send them back once the video is finished.
So for example, video http://youtube.com/watch?v=XXXXX it would redirect to http://youtube.com/v/XXXXX. And then, once the video is complete, it would use window.history.go(-2) (as -1 would go to the normal page causing a loop).
The problem I'm having is that I haven't been able to get the second part, the function that runs when the video finishes, to work.
I have tried following the api and looking at other peoples problems and seeing what helped them but I can't seem to get it.
At the moment this is the code I have.
$(document).ready( function() {
var loc = document.location.href;
var l = loc.split('/');
var s = l[4];
var id = s.split('?')[0]
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
alert('spotted');
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
window.history.go(-2);
}
}
});
I would appreciate it if someone would work with me to get this script working.
Thanks.
What is the best way to fade out volume on pause for mediaelementJS player?
It works fine to set media.volume = 0.0, and then use jQuery to animate the volume up for play listener. But for the pause listener, audio is paused before I get any chance to fade the audio out.
var volumeSet = 0.8; //Default volume
var player = new MediaElementPlayer('video,audio',{
success: function (media, domObject) {
//This works fine
media.addEventListener('play', function() {
media.volume = 0;
$('video,audio').animate({volume: volumeSet}, 1000, "swing");
}, false)
//This 'works', but lags as its needed to be re-played after pause
media.addEventListener('pause', function(e) {
if (media.volume>0) {
volumeSet = media.volume;
media.play();
$('video,audio').animate({volume: 0.0}, 1000, "swing", function(){
media.pause();
});
}
}, false);
}
});