See this link: http://jitimanagementcoach.com/TC_test/tabbed4try.html
I've already got the videos to play and/or pause on one tab or another when a tab is clicked... but now I need the video on the Prelearn tab to "click" the Solution tab and play the video once the Prelearn video is finished. Here's the code:
<script>
var iframe1 = document.getElementById("prelearnvid");
var iframe2 = document.getElementById("solutionvid");
var player1 = $f(iframe1);
var player2 = $f(iframe2);
var prelearnBtn = document.getElementById("prelearnbtn");
prelearnBtn.addEventListener("click", function() {player1.api("play");player2.api("pause");});
var solutionBtn = document.getElementById("solutionbtn");
solutionBtn.addEventListener("click", function() {player2.api("play");player1.api("pause");});
player1.addEvent('ready', function() {player1.addEvent('finish', onFinish);});
function onFinish(id) {window.location.href = '#solution-tab';};
</script>
It all works fine until the very last two lines... where am I going wrong?
The ready event is not firing for your player. In order for the player's events to fire, you need to add a player_id parameter to your URL that includes the id of your <iframe>.
Change the src attribute of your <iframe> to this:
<iframe id="prelearnvid" src="http://player.vimeo.com/video/92349330?&player_id=prelearnvid"
From the Froogaloop documentation:
If you’re embedding and controlling multiple players on a page or
using our JS API library (Froogaloop), you should give each player a
player_id that matches the id of the iframe element.
This stackoverflow answer and this forum post helped uncover this solution.
Related
I am using Cincopa to embed my video into my website. The page that it is embedded in is hidden and navigation is removed. So I would like everyone to be redirected to the home page once the video is finished.
Here is my code:
<div id="cp_widget_55a42f1b-6e51-4738-87f9-eaf52dc6a826">...</div>
<script type="text/javascript">
var cpo = [];
cpo["_object"] = "cp_widget_55a42f1b-6e51-4738-87f9-eaf52dc6a826";
cpo["_fid"] = "AsBAj2M3MQOr";
var _cpmp = _cpmp || [];
_cpmp.push(cpo);
(function() {
var cp = document.createElement("script");
cp.type = "text/javascript";
cp.async = true;
cp.src = "//www.cincopa.com/media-platform/runtime/libasync.js";
var c = document.getElementsByTagName("script")[0];
c.parentNode.insertBefore(cp, c);
})();
</script>
<noscript>Powered by Cincopa <a href='http://www.cincopa.com/video-hosting'>Video Hosting for Business</a> solution.<span>Test</span><span>bitrate</span><span> 39961 kb/s</span><span>height</span><span> 1080</span><span>duration</span><span> 00:02:35.31</span><span>lat</span>:<span> +33.2269</span><span>long</span>:<span> 21-96.93</span><span>fps</span><span> 59.94</span><span>width</span><span> 1920</span><span>originaldate</span><span> 2015-06-06 19:08:58</span>
</noscript>
Cincopa embeds a video HTML tag, you have to add an event as explained here
Well, right now I'm not quite in the mood to make a complete test, so I'll just suggest a workaround which you will need to adapt.
In order to give you the exact code, I need to know:
What CMS are you using?
Can you add an id or a class to your video tag with cincopa?
Are you including jQuery?
Then you'll have to add this lines in the bottom of your script:
//Wait until the page is entirely loaded, and so you can access the rendered video tag (you'll need jQuery)
$( document ).ready(function() {
function goHomeYouAreDrunk(e) {
window.location.href = "http://url.to.your.home.page";
}
//I'm supposing that your video is the sole video tag in your page, if it's not, you'll have to get it by its id or class
document.find('video').addEventListener('ended',goHomeYouArDrunk,false);
});
Normally, that would be via an event listener on the <audio> or <video> element.
How to add Event Listeners | W3Schools : https://www.w3schools.com/Jsref/met_element_addeventlistener.asp
But a way I'd do it with Javascript just to be sure is:
// The interval clocks every .1 second(s).
setInterval(function() {
// If the element's current playback time is the playback duration (has reached the end).
if (audioElement.currentTime == audioElement.duration)
doSomething()
}, 100)
Although if you are wary about performance and don't want to use a setInterval() function, then stick with adding an event to the element.
By the way, to re-direct to another page, use the Javascript function location.assign("https://www.example.com.").
This code has been tested in https://www.cincopa.com/:
document.getElementById("video_iframe_id_in_your_page")
.contentWindow
.document.getElementsByTagName("video")[0]
.addEventListener("ended", function(args){
window.open("/", "_top");
});
wish can help you.
You can redirect to the home page by setting window.location="/"
I'm not sure how you're checking if the video has ended, you can add a listener like this.
Upon completion, you can call a handler function to redirect the user to the homepage.
document.getElementById('myVideo').addEventListener('ended',redirectToHomePage,false);
redirectToHomePage(){
window.location = "/";
}
Trying to call the vimeo api to pause video on a click event to hide it. And, on clicking to reveal the video again, play the video from its paused position.
There are various related questions on here, I can't find an answer to the simple "how to pause". I'm a jquery novice and can't make heads or tails of the froogaloop documentation.
Here's a FIDDLE, and my current jquery script to hide the video
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) {
$('#video').hide();
}
});
which hides it when an element without the "click" class is clicked. But the video plays on in the background. Froogaloop is loaded in the fiddle. Thanks everyone
Here's an updated FIDDLE that makes pause/play work as I'd imagined. Click the image to play the video; click outside or on empty space (you control this with classes) to pause it; click image again to play from paused position. Simple, no buttons, no excess jquery or froogaloop code.
Putting this here for those who might benefit from it. And a +1 to mbrrw for getting me started.
var iframe = $('#video iframe')[0];
var player = $f(iframe);
$('.showvideo').on('click', function(){
$('#video').show();
$('.image').hide();
player.api('play');
});
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
$('#video').hide();
$('.image').show();
player.api('pause');
}
});
Remember to append api=1 to the vimeo link. And the url must be https, not http.
froogaloop can be a pain in the arse.
The code to get you started is here:
https://developer.vimeo.com/player/js-api#universal-with-froogaloop
I've adapted that to get it working i think how you expect here:
https://jsfiddle.net/fLe5xs4v/
Setting it up like so:
var iframe = $('#video iframe')[0];
var player = $f(iframe);
Note that if you change the text in the play and pause buttons you will break this code:
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
Give it a shot it should get you going in the right direction at least. Good luck!
I'm just getting started here with javascript and have made this.
I have made a codepen that shows the two issues I am having
1) there are two duplicate videos being loaded in, when I delete one of the video tags it prevents the randomize button from working or any video from loading up. I am only trying to have one video load in.
2) In the codepen I have a button that clicks to randomize but instead I am trying to have the video wrapped with an tag so that the video can be clicked to initiate the randomize. Whenever I try and do this I get an undefined error or the videos will not load in =/
Play video
<div class="video-label"></div> <!-- loads in top video (only want one video) -->
<video loop autoplay> <!-- loads in bottom video (only want one video) -->
Your browser does not support the <code>video</code> element.
</video>
If you click on the codepen you will hopefully be able to see where the two videos are being loaded in and where the click tag is. Any help is greatly appreciated!! I've been trying to figure it out all night :/
Here is the codepen
Codepen
Thanks in advance!
You can create a html5 video tag using javascript by following this logic:
var videoelement = document.createElement("video");
videoelement.setAttribute("id", "video1");
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = "http://zippy.gfycat.com/SpottedDefensiveAbalone.mp4";
videoelement.appendChild(sourceMP4);
var sourceWEBM = document.createElement("source");
sourceWEBM.type = "video/webm";
sourceWEBM.src = "http://zippy.gfycat.com/MinorGregariousGrub.webm";
videoelement.appendChild(sourceWEBM);
$('.video-label').html(videoelement);
var video = document.getElementById("video1");
video.play();
This code is creating a video tag and including it into your div (.video-label), then the video starts automatically. This is working without the random stuff (the same url is used everytime), so you can update it at your convenience. Try to remove the video in you html file, it works now:
<video loop autoplay>
Your browser does not support the <code>video</code> element.
</video>
Here is a link where you can download your code updated with working solution (without randomization):
http://tests.krown.ch/Codepen.zip
Also when you click on your video div (.video-label), the video tag will be deleted and created back (but with same url, you just need to update video url with your randomize stuff)
In this line you find any video tags on the page and try to copy it's content into div:
var $video = $('video');
...
$('.video-label').html($video.get(0).outerHTML);
But if you delete video from the page there will be nothing to copy. You need to move video tag inside div in first place. Or create it dynamically, not by copying, when user clicks link.
I'm using the garnish theme for a site and when the visitors clicks on an item in the folio, it loads the post's content. The post is made of one or more videos from vimeo, called via iframe like this:
<iframe id="player_0" src="http://player.vimeo.com/video/57038297?title=0&byline=0&portrait=0&color=FF9A00&api=1&player_id=player_0" frameborder="0" width="632" height="356" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
I already have used vimeo's froogaloop to stop/unload videos from an external link (here's a very basic test). Here's the code for the control:
var vimeoPlayers = document.querySelectorAll('iframe'),
player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
}
else {
element.attachEvent(eventName, callback, false);
}
}
function ready(player_id) {
var container = document.getElementById(player_id),
froogaloop = $f(player_id);
$("a.stopvid").on('live', function(){ froogaloop.api('unload'); });
}
But this time i can't seem to manage to use the api as the video loads after an ajax call.
I've tryed to include the code above within an $(document).ajaxComplete(function(event, xhr, settings) { ... }); but with no luck.
Here's a test site to see it. The portfolio link in the menu, then click the first item. It'll load the content and a little cross on the top right corner that should stop the video, but doesn't.
Help would be highly appreciated, i'm pretty lost.
The first thing to do is to check if you don't have any javascript errors on your page.
Your iframe selector may be to generic and you may catch other iframe used by other "plugins" such as Facebook.
To work, the froogaloop ready fonction require an id on the iframe. If there is no id on the iframe, your ready event won't receive anything and the player_id will be undefined.
Since you are using JQuery, change the first line of your script by :
var vimeoPlayers = $("iframe#player_0"), player;
With this line you will be sure to select only the iframe you want.
I am writing a Browser Plugin and need to find a way to get the current time a YouTube Video playing on YouTube using JavaScript. I have been playing around in the Chrome JavaScript Console and haven't had any luck.
It appears that the chrome API only works with embedded video players not a video that is playing on on youtube.com. One option I looked into is in the share section of a video their is an input box for the "start at:" time that contains the current time of the video. I have tried using .value and .text on this input box and they both return undefined? Does anyone have any ideas?
ytplayer = document.getElementById("movie_player");
ytplayer.getCurrentTime();
See the api
Update: if it didn't work, also try player.playerInfo.currentTime (codepen live example)
Depends on what you want
player.getCurrentTime():Number
Returns the elapsed time in seconds since the video started playing.
player.getDuration():Number
Returns the duration in seconds of the currently playing video. Note
that getDuration() will return 0 until the video's metadata is loaded,
which normally happens just after the video starts playing.
http://code.google.com/apis/youtube/js_api_reference.html
Finally I found how to make it work on iOS (and Android too).
Actually, the whole youtube js api was broken for me if run on mobile browser.
Problem solved by creating player using new YT.Player as described in YouTube IFrame API.
Please note: only creating <iframe> from <div> placeholder works for mobile browsers at the time. If you try to use existing <iframe> in new YT.Player call, as mentioned in IFrame API, this will not work.
After player created, it's possible to use player.getCurrentTime() or player.getDuration() with player instance created.
Note: I had no luck calling this methods on player obtained with
player = document.getElementById(...) (from #JosephMarikle answer).
Only created player instance worked in mobile browsers.
Useful links:
YouTube IFrame API
YouTube JavaScript API
YouTube Player Demo
You can use Html5 Video API on youtube.com
var htmlVideoPlayer = document.getElementsByTagName('video')[0];
htmlVideoPlayer.currentTime
Note: It's not gonna work on Youtube Iframe API because Iframes are isolated. You cannot access the context of a Youtube IFrame .
In 2020, this works:
player.playerInfo.currentTime
full code:
see it live on codepen
Just FYI, There is a new iframe API for the YouTube player:
https://developers.google.com/youtube/iframe_api_reference
document.querySelector('video').currentTime
Stop at specific time youtube video and show notification box in GWD
<script>
var yid = document.getElementById("gwd-youtube_1");
var idBox = document.getElementById("box1");
pausing_function = function(event) {
var aa = setInterval(function() {
if (yid.getCurrentTime() > 8.0 && yid.getCurrentTime() < 8.1) {
yid.pause(yid);
idBox.style.opacity = 1;
console.log(yid.getCurrentTime() + "playing")
clearInterval(aa);
yid.removeEventListener("playing", pausing_function);
}
}, 100)
}
yid.addEventListener("playing", pausing_function);
var pausing_function_1 = function() {
if (yid.getCurrentTime() > 8.1) {
console.log(yid.getCurrentTime() + "pause")
// remove the event listener after you paused the playback
yid.removeEventListener("playing", pausing_function);
}
};
</script>
play video and hide notification
<script type="text/javascript" gwd-events="handlers">
window.gwd = window.gwd || {};
gwd.pauseVideo = function(event) {
var idBox = document.getElementById("box1");
idBox.style.opacity = 0;
};
</script>
<script type="text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('gwd-youtube_1', 'playing', gwd.pauseVideo, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('gwd-youtube_1', 'playing', gwd.pauseVideo, false);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>