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.
Related
I've been struggling with this for a while now and I've tried a number of solutions but I'm totally stuck on this:
I have a number of embedded videos from YouTube on my Site and I have navigation buttons. I want the videos to be paused as soon as any of the buttons are clicked, no matter how many of them are playing at that time. I embedded them the classic way by using the iframe code that YouTube gives you when clicking "embed" and gave them the ".yt" class.
My function currently looks like this:
$(function () {
$('#shadingleft').on('click', function () {
rotateLeft();
reset();
selector = selector - 1;
if (selector <= -1) {
selector = 9;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingright').on('click', function () {
rotateRight();
reset();
selector = selector + 1;
if (selector >= 10) {
selector = 0;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingtop').on('click', function () {
rotateUp();
$('.clicked').toggleClass('clicked');
})
$('#shadingbottom').on('click', function () {
rotateDown();
$('.clicked').toggleClass('clicked');
})
$('.art').on('click', function () {
$(this).toggleClass('clicked');
})
});
As you can see I already managed to toggle the highlighted ".art" elements in my gallery using toggleClass. Unfortunately it doesn't seem to work for playing and pausing videos.
Whenever one of the four "shading..." elements is clicked I want my ".yt" elements to stop playing the embedded video.
Thanks for helping!
This is a actually a big limitation with iframes. Most browsers won't allow a page's scripts to interact with the content of its iframes for security reasons. So chances are that there is no way at all to do that.
One way you could stop videos would be to reload the youtube iframe entierly, but that would put it back to 00:00 as if it was never played.
Another would be to try and fetch the video stream from youtube on your server and then displaying it in a player of your own on your page. (Which is obviously way more complicated than using an iframe)
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 = "/";
}
I made trying to make my first addon but I have run into an issue. My addon is an addon to upload images and videos to a website. The images work fine, but with videos, it is a little off. Here is my code:
var contextMenu = require("sdk/context-menu");
var tabs = require("sdk/tabs");
contextMenu.Item({
label: "Upload to domain",
context: contextMenu.SelectorContext("img,video"),
contentScript:'self.on("click", function(node, data){self.postMessage(node.src);});',
onMessage: function(imgSrc){
tabs.open("http://domain.org/upload/?"+imgSrc);
}
});
If you play the video on the right here, the video url gets passed to the onMessage function fine. If you try it here, it doesn't pass a url. They are both webms. I am guessing that it just doesn't work with an html5 player. Am I correct? Is there a workaround for this?
your method of finding source does not always work with video element because, unlike img, the video element's source can be specified as child element source which is what is happening in the second case. To handle that scenario, your code must be something like:
self.on("click", function(node, data){
if(node.src){
self.postMessage(node.src);
}else if(node.nodeName.toUpperCase() === "video".toUpperCase()){
var sources = node.children; // or may be node.querySelector("source");
for(var i in sources){
if(sources[i].src && sources[i].nodeName.toUpperCase() === "source".toUpperCase()){
self.postMessage(node.src);
}
}
}
}
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.
I'm trying to recognize the onPlay, onPause, and onFinish event for vimeo using the froogaloop API. I've tried everything I could imagine with this thing, and no luck.
I get this error on Firefox:
And in Chrome:
Importing froogaloop from the CDN:
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
My JS:
$(function(){
var vimeoPlayer = document.querySelector('iframe');
$f(vimeoPlayer).addEvent('ready', ready);
function ready(player_id) {
froogaloop = $f(player_id);
function setupEventListeners() {
function onPlay() {
froogaloop.addEvent('play',
function(data) {
console.log('play event');
});
}
function onPause() {
froogaloop.addEvent('pause',
function(data) {
console.log('pause event');
});
}
function onFinish() {
froogaloop.addEvent('finish',
function(data) {
console.log('finish');
});
}
onPlay();
onPause();
onFinish();
}
setupEventListeners();
}
})
My HTML:
<iframe src="http://player.vimeo.com/video/3718294?api=1" width="623" height="350" frameborder="0" id="iframe-video"></iframe>
After hours and hours of frustration... I have found the solution.
Since I was using an ID on the iframe... apparently the vimeo API forces you to add the parameter to the URL you are fetching (player_id=iframe-id).
So the iFrame should look like this:
<iframe src="//player.vimeo.com/video/3718294?api=1&player_id=promo-vid"
width="623" height="350" frameborder="0"
id="promo-vid">
</iframe>
Special thanks to Drew Baker for pointing this out: http://vimeo.com/forums/topic:38114#comment_5043696
Got an error creating the player element when selecting the iframe with jQuery.
var iframe = $('#player1');
var player = $f(iframe);
Results in
TypeError: d[f] is undefined
Solution for me was to select the first element in the jQuery ID selector
var iframe = $('#player1')[0];
var player = $f(iframe);
I think you're violating the Same Origin Policy. You'll notice here that where you're doing a lot of event handling, they are using special froogaloop API calls.
I've never used froogaloop so I'm probably wrong. But that's my guess. The errors seem to suggest that the iframe is attempting to modify the URL in your browser, and that's now allowed by Same Origin. That's why the API wraps up window.postMessage for you.
I had a similar issue, but in this case after replacing Froggaloop with the Vimeo.Player, it still it was a new restriction in chrome. I was getting the error "play() failed because the user didn't interact with the document first...". After further research it looks like Chrome added some restrictions see here. The solution in my case was to add allow="autoplay" to the iframe.
Having had a similar issue, with Froggaloop2 - it appears that if the video is cached, the ready event will fire only once (on the initial load). The solution is to retrieve the iframe with changing src, as:
$(iframe).attr('src', $(iframe).attr('src') + '#timestamp='+(new Date()).getTime());