I'm working with the Youtube Javascript API (iframe version) and I'm using start and end parameters in order to play a portion only of a video. While everything works fine, once the end is reach, the player stop (normal behavior). However, when clicking again on play, the player does not seems to considering the start option. It always restart playing from the beginning of the video. It ends however at the defined end value, always.
<iframe frameborder="0" src="https://www.youtube.com/embed/5lGoQhFb4NM?autoplay=1&autohide=1&modestbranding=1&showinfo=0&controls=0&vq=hd720&rel=0&start=60&end=100" style="width: 100%; height: 400px;"></iframe>
Do you guys have any idea on why it is happening?
Here's how I was able to have the replay button start over at the original start time, as well as prevent users from scrolling outside the start/end bounds of the playerVars:
function onPlayerStateChange(event) {
var isClip = playerOptions.playerVars.start && playerOptions.playerVars.end;
var start = isClip ? playerOptions.playerVars.start : null;
var end = isClip ? playerOptions.playerVars.end : null;
if (event.data == YT.PlayerState.PLAYING) {
if (isClip) {
var currentTime = event.target.getCurrentTime();
if (currentTime < start || currentTime > end) {
event.target.seekTo(playerOptions.playerVars.start);
}
}
}
}
I've tried the above solution without succes (error console : "playerOptions is not defined")
But thx to this topic YouTube API - Loop video between set start and end times I've been able to successfully get the start/end parameters on replay :
<script>
// 5. The API calls this function when the player's state changes.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
var playButton = document.getElementById("play");
playButton.addEventListener("click", function() {
player.loadVideoById({
videoId: videoId,
startSeconds: startSeconds,
endSeconds: endSeconds
});
});
document.getElementById("play").style.cssText = "visibility:visible";
}
}
</script>
Explanations : in my case, I'm using a button id="play" to start the video. When the video is ENDED, the button #play is set to visibility:visible and the click event uses the player.loadVideoById corresponding parameters.
If you don't use the click event, the video will auto loop with the desired start/end values.
From Youtube API reference = https://developers.google.com/youtube/iframe_api_reference?hl=fr#Getting_Started
Related
I got an error and strange behavior inside template.onDestoyed;
I have code for infinite scroll subscribtion (it stored in special subscribtion-template) It work fine, until i switch to another route, and create a new instance of subscriber-template.
Code:
Template.subscriber.onCreated(function() {
var template = this;
var skipCount = 0;
template.autorun(function(c) {
template.subscribe(template.data.name, skipCount, template.data.user);
var block = true;
$(window).scroll(function() {
if (($(window).scrollTop() + $(window).height()) >= ($(document).height()) && block) {
block = false;
skipCount = skipCount + template.data.count;
console.log(template.data);
console.log("skip_count is "+skipCount);
template.subscribe(template.data.name, skipCount, template.data.user, {
onReady: function() {
block = true;
},
onStop: function() {
console.log('route switched, subscribtion stopped');
}
});
}
});
})
});
When i "scroll down" on a page, subscriber work fine, when i go in another page and "scroll down" first i get a data from old subscriber template (what must be destroyed in theory) in first time. In second time (scroll down again) new instance of subscriber starts works normally.
PIRNT SCREEN CONSOLE
What i doing wrong?
Owch!
The good guy from meteor forums helped me.
Actually the problem is in jquery.scroll event. It not cleaned up when template is destroyed. (Is it a bug? Or it is normal behavior?). I just needed to unbind the scroll event in onDestroyed section.
I have the following situation:
A polyline is added on the map and when the user clicks over it its state changes to editable. Also i have event where if the user clicks the last vertext of the polyline and starts moving the mouse to be able to extend the polyline with the mouse path the user is drawing.
However it seems that when i have an event and inside this event i try to add another one it simply does not work and i don't kwow why.
Just in case to make things simpler to undrstand i will paste a part of my code.
google.maps.event.addListener(polyLine, "mousedown", function(event){
if(polyLine.getEditable() === true)
{
if(typeof event.vertex !== "undefined")
{
if(event.vertex === polyLine.getPath().getLength() - 1)
{
polyLine.setEditable(false);
if(mouseMoveDrawingEvent === null)
{
map.setOptions({draggable:false});
polyLine.setOptions({clickable:false});
mouseMoveDrawingEvent = google.maps.event.addListener(map, "mousemove", function(event)
{
alert("1"); // <== this never fires
polyLine.getPath().push(event.latLng);
drawingLabel.setPoint(event.latLng);
drawingLabel.setContents("<div style='background-color:white'>" + (google.maps.geometry.spherical.computeLength(polyLine.getPath()) / 1000).toFixed(2) + " км.</div>");
});
}
map.getDiv().onmouseup = function(ev) {
polyLine.setOptions({clickable:true});
map.getDiv().onmousedown = null;
map.getDiv().onmouseup = null;
google.maps.event.removeListener(mouseMoveDrawingEvent);
mouseMoveDrawingEvent = null;
};
}
}
}
});
.....
thre is another event here that listens for 'mouseup'....
Do you guys have any idea how to make this peace of code works.
I found a solution to my questions.
The problem was that when i set the polyline {clickable:false} the api removes the event ( and obviously everyhing inside it:)
I am using youtube api iframe and just getting going with the sample code. When I issue:
player.loadVideoById("ytidNo1") the proper video starts ("ytidNo1" is a valid youtube id)
Then, say, 10 seconds later, if I issue another:
player.loadVideoById("ytidNo2") the 2nd video starts, but it starts at the point where the last one was playing at (eg 10 seconds in).
This is new behavior in the last day or so and I have not changed my code.
To correct the problem, I tried:
player.loadVideoById("ytidNo1",0)
then
player.loadVideoById("ytidNo2",0)
and issue still happens.
Anyone else have or just starting to have this issue?
I also had the same problem. Playing around I eventually got it to work.
I had to use seekTo(0); (see Jim's comments)
More details about the problem.
If the video actually played to the end I didn't need to do anything.
If the video was skipped part way through I had to call
player.seekTo(0);
on the old video before calling loadVideoByID("ytid", 0); on the next video.
I also had to handle the case where after calling loadVideoByID I got an error. (e.g. 150) If I had an error I could not call seekTo because it would cause the next video to play audio only.
hope this helps
I am trying to reproduce the issue using the official sample::
https://developers.google.com/youtube/iframe_api_reference
after the stop I am selecting another video in the same way, and seems to work well:
<!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 = "//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', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
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(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
player.loadVideoById("tYrND5hMY3A");
}
</script>
</body>
</html>
http://jsfiddle.net/5wxFv/3/
I have an asp.net page with an tag in it. If I enable controls (controls="controls") I can play the audio assigned to the tag. I just want to show my own button to play the audio, so I added a simple html button with a javascript function to hit the .play method:
<button id="LeftAudio" class="Audio" onclick="playAudio1()"></button>
function playAudio1() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
//debugger;
var oAudio = document.getElementById('dnn_ctr<%=ModuleId.ToString(CultureInfo.InvariantCulture) %>_ViewUFL_Book_audio1');
oAudio.volume = 1.0;
// Tests the paused attribute and set state.
if (oAudio.paused) {
oAudio.play();
debugger;
}
else {
oAudio.pause();
}
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}
The audio plays fine when I step through the javascript (Chrome/Windows), but will not play at all if I am not debugging. I tried putting the debugger; statement before the play command and stepping through the code, and putting it after the play command - both work. Just doesn't work if I let it run normally.
Any ideas??
I just made it on Fiddle and its working for me.
Here is the test on Fiddle: http://jsfiddle.net/jwCXV/4/
I have a web application with an iframe that needs to communicate with its hosting page. The iframe and the host are on different domains and protocols (the iframe is https, the main page http). I use postMessage to get a small bit of state (user tracking) from the outer page into the iframe.
When the iframe is loaded, it sends a short message out to the top page to ask for the visitorid:
if ($.w.top != $.w) $.f.postMessage($.w.top, 'Get visitorId');
($.f.postMessage(w, m) is just a wrapper around postMessage, that does nothing if typeof w.postMessage === 'undefined'). On the outer page, we have a message listener:
// Set up event listener so that we can respond when any iframes
// inside of us ask for our visitorId
$.f.listen($.w, 'message', giveVisitorId);
function giveVisitorId(event) {
$.w['zzzzz'] = event.source;
if (event.data === 'Get visitorId') {
alert('about to reply from '+window.location.href+' with visitorid, typeof event.source.postMessage is ' + typeof(event.source.postMessage));
event.source.postMessage('visitorId=' + $.v.visitorId, '*');
}
}
The inner frame has a listener registered for the response:
$.f.listen($.w, 'message', receiveVisitorId);
function receiveVisitorId(event) {
alert('receiveVisitorId called with: ' + event.data + ' in window '+window.location.href);
var s = event.data.split('=');
if (s[0] === 'visitorId' && s.length === 2) {
$.v.visitorId = s[1];
$.w.clearTimeout(giveUp);
rest();
}
}
This all works as it is supposed to on chrome and firefox on OSX (when the iframe is loaded we get two alerts, one from receiveVisitorId and one from giveVisitorId); however on IE8 on XP we only get the first alert (from giveVisitorId).
This is strange enough, since it seems that the postMessage going out works and the one going in doesn't; what's truly perplexing is that if we go to the console and run zzzzz.postMessage('hi', '*') the alert in receiveVisitorId happens just as expected! (Note that we saved event.source in window.zzzzz).
Does anyone have an idea why this might be happening?
PS: The definitions of $.w.listen and $.w.postMessage, for reference:
listen: function (el, ev, fn) {
if (typeof $.w.addEventListener !== 'undefined') {
el.addEventListener(ev, fn, false);
}
else if (typeof $.w.attachEvent !== 'undefined') {
el.attachEvent('on' + ev, fn);
}
},
postMessage: function(w, m) {
if (typeof w.postMessage !== 'undefined') {
w.postMessage(m, "*");
}
},
We resolved it. The problem was that we were calling $.f.listen after $.f.postMessage in the inner iframe; so when the outer window posted a message to the inner, the listener had not yet been attached. I don't know why this happened in IE and not chrome or firefox, but we just put it down to timing differences between the browsers.