VideoJS playing video automatically one time only - video.js

We have a VideoJS video player installed on the front page of our website and finding it quite annoying how it plays every time we visit the front page.
a) We do want it to play automatically
b) Is it possible for it to only play the 1st time a visitor comes and then when they go to the front page again it does not play which would mean that they would need to hit the play button?

As hinted to by Bruno, I would think the best solution for this would be to use some scripting and a browser cookie.
For example, in PHP you could use this instead of the <video> tag:
<?php
echo("<video *your parameters*");
$visited=$_COOKIE['seenvideo'];
if ($visited===NULL) {
setcookie('seenvideo','yes',0);
} else {
echo(" autoplay");
}
echo (">"); ?>
(Replace *your parameters* above as needed) And then use your normal source tags and closure after it.

Related

join() function onload page not working on mobile

Join function works when click on join button but not working on loading page my code for the click button is
$(document).ready(function(){
setTimeout(function() {
$( "#join" ).trigger( "click" );
}, 5000);
});
The reason for your issue is rooted in how most browsers are now handling video elements auto play functionality. (chrome, Firefox,safari).
TLDR; The browsers will block auto play on any videos that have sound enabled unless the user interacts with the page via click. For this reason it works when you have joinChannel via click, it meets the criteria for a user initiated interaction with the page and so the browser allows the video to play.
This is the recommended behavior, as it ensures the user is ready to view the content. Take a look at Google Hangouts/Meet for a commercial product that implements this logic
There is another option, which is technically possible (but not recommended). You could start the video with the audio muted. The reason this isn't recommended is there is no telling if in the future browsers will block auto play functionality all together so this could break again.

Flattr button only shown after page reload

I've followed the instructions in here to add an embedded flattr button to my site but it's only being shown after reloading the page. This is the page: http://nipanipa.com/en/donations/new. Actually, if you visit that url directly, the button will be shown but if you visit it throught the "Donate" link in the header it will not! I get this behaviour in both Firefox and Chromium.
What am I missing? Probably this has something to do with my poor knowledge of javascript... :S
Thanks a lot!!
Your website (or framework if you are using one) is bundling all javascripts in to one neat package that is only loaded on the first page load. The flattr javascript is automatically triggered onLoad, but unless you are actually on the donate page during the initial page load, there will be no flattr button to initialize.
One way of solving this is to call FlattrLoader.setup() somewhere on the Donation page.
But since you are only interested in having one Flattr button for one url there is a much easier way to add it.
Remove all Flattr related code from your source code and then use the embed tool to generate the button specific html/javascript and paste that code where you want the button to appear.
Hope this helps :)

Track calls as conversions

I've got a responsive website that changes to match the screen resolution of the user. One of the changes is a "call us" button that shows up when the website is viewed on a smart phone. When a user clicks the button (it's a <a href="tel:000-000-0000"> style link), I need to be able to track that as a conversion in both Adwords and Google Analytics.
Would it work to implement a redirect to another page that contains tracking code, before redirecting back to the tel: link?
Easier to use a virtual pageview with an javascript onclick event eventhandler:
<a onclick="_gaq.push(['_trackPageview', '/tel/0000-000-0000']);return false" href="tel:000-000-0000">
However I'm not sure that those links can be consideres pageviews (since they have not content), so maybe it's better to count them as events (works pretty much the same but with an _trackEvent-Call instead _trackPageview).
Virtual Pageview Documentation:
https://developers.google.com/analytics/devguides/collection/gajs/asyncMigrationExamples#VirtualPageviews
Event Tracking Documentation
https://developers.google.com/analytics/devguides/collection/gajs/asyncMigrationExamples#EventTracking

Google+ : Multiple +1 on same page, different content

I've tried to find an answer to this (both in the dev docs and here), but with no luck.
The "+1 button" works fine on normal pages (where there's just the single +1). But I have a page with multiple entities (to use the terms of Drupal: A View displaying multiple nodes) where I'd like to add "share buttons". So far I've added Twitter and Facebook.
Twitter is the simplest as it just takes the string you give it..
Facebook takes an url, but you can specify your own url.
When I try to specify my own url for +1 I get this Error:
Unsafe JavaScript attempt to access frame with URL http://one80.seasites.se/whats-up from frame with URL https://plusone.google.com/_/+1/hover?hl=sv&url=http%3A%2F%2Fone80.seasites.se%2Fwhats-up%2Fl%25C3%25B6rdag&t=1342724634133&source=widget&isSet=false&referer=http%3A%2F%2Fone80.seasites.se%2Fwhats-up&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3Dr4LFRxx-_oY.sv.%2Fsv%3D1%2Fam%3D!ZCfx2q5v6YmYvWjcTQ%2Fd%3D1%2Frs%3DAItRSTNI50TT3SY8R9klRLc_1sBJ5_Rp3g#id=I3_1342724634541&parent=http%3A%2F%2Fone80.seasites.se&rpctoken=619983104&_methods=mouseEvent%2CtrackingEvent%2ConVisibilityChanged%2C_onopen%2C_ready%2C_onclose%2CcloseOrHideThisBubble%2C_close%2C_open%2C_resizeMe%2C_renderstart. Domains, protocols and ports must match.
rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:173
ec.a.v rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:173
xh rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:203
q.get rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:211
ec.w rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:173
Rh rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:208
q.w rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:220
Rb rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:30
Xg rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:187
(anonymous function) rs=AItRSTOQ10u7fGwgD-LqzsOa-fsgdlhDCg:226
To explain why I want to use separate URL:
every node is something like an event, every node has it's own url (which contains an image and text/info). So when you click Like (for FB) it gets the title, info & image and includes it in the post (So it says "What's up - Gathering", instead of a generic "What's up" and no/the same image).
I'd like to accomplish the same with G+.
Is there a way to accomplish this for G+?? Have I missed something??
I guess one way to do this is by using an iframe for each of the nodes and pull in a special version of the "node page" with just the g+-button. But that's a pretty nasty hack (and not that fun to set up).
Any ideas are welcome!
The error you're seeing is actually due to an issue in Chrome. The +1 button should automatically recover.
You can explicitly specify target pages by using the href attribute. Your markup will look like this in practice:
<g:plusone href="http://example.com/targeturl"></g:plusone>
Or like this with HTML5 syntax:
<div class="g-plusone" data-href="http://example.com/targeturl"></div>
If these don't work, can you share a link to a page where you're seeing it not work? I can take a look :)

How to load two websites in one page?

I don't want to use frame or iframe because most websites are busting it nowdays.
what are the possible methods to do this?
The intended behaviour is as if like two browser controls loaded in a website.
What is wrong with an iframe? What do you mean by busting (lots of websites are full of iframes)? You do not want to use iframes within an email but that is a different point!
The advantage is when people click on links within an iframe the content of the iframe gets refreshed, while if you pull the content of a webpage and then display it within a div the user will be moved on loosing the rest of the page.
you can pull it via script (PHP / curl) and display the code from there.
or you can use good old frames, although i wouldn't recommend it.
If you do not want frames, then another option is to do it server side - make your server access the pages and combine them into one response stream.
You can also so this client side using Javascript and DHTML
fopen() returns a file pointer:
$file = fopen("http://www.site.com/", "r");