I am looking for a good video player to display video ads on my site. We want to make these ads in standard IAB sizes. I would like to use html5 when possible, and have a fall back for browsers that do not support it.
The player needs to have a onclick function that can be set or overwritten so that a person clicking on the ad will be taken to a page for the ad.
I tried setting up HTML5 video tags and giving it a onclick event shown below, but the flash file I used for fallback does not work with the onclick event.
<script>
$('video').click(function() { window.open('http://mydomain.com','_newtab');
});
</script>
Does anyone know of a good player for this?
Related
I'm planning to modernize the photo gallery on my website. Currently I use the Colorbox plugin to open the large image and legend in a lightbox after clicking on a thumbnail. Google indexes the pictures and legends yet optimal.
My new photo gallery should be responsive and I want to show not only the photo and legend inside of the lightbox, but also further information like date, location, camera, tags, etc. That's why I will use the Ajax option rather than the standard gallery option of the lightbox plugin.
The thumbnails are compiled dynamically based on filtering and sorting settings and the information about the photos is stored in a database. So I will use a PHP script to get the necessary information and to set up the HTML code for the Ajax call dynamically. That should be no problem.
My question is: Will the contents that is loaded via Ajax in the Magnific Popup be indexed by Google?
Unfortunately I do not think so, because if I make a Google search for a part of the text which is displayed in the Ajax Lightbox on http://dimsemenov.com/plugins/magnific-popup/, this page does not appear in the Google results...
Is there a solution? Or can you recommend another responsive Lightbox wherein the Ajax content will be indexed?
Thank you for any suggestion!
Michelle
I want to track a vimeo video inside the following iframe:
<div class="embed-container"><iframe src="//player.vimeo.com/video/108361627?title=0&api=1&portrait=0&badge=0" class="vimeoplayer" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
I understand that I need to push data into the data layer to do this. How can I use the piece of code below to track a click on this iframe? Somewhere outside of the iframe I suppose? Can I give the .embed-container div an extra element with this event in some way?
onClick="_gaq.push(['_trackEvent', 'Video', 'Play', 'intro-video']);"
You'll have to use the Vimeo JavaScript API to listen for player events. When the player events fire, call your GA tracking code.
Vimeo has a library call Froogaloop to help listen for events.
I've found that the vimeo.ga.js library is the best way to wire up GA to Vimeo. It works with Classic Analytics, Universal Analytics and Google Tag Manager.
I have a question that is similar to this question here:
Prevent scrolling on HTML5 <video> element on iOS
Basically, I've used document.ontouchmove & e.preventDefault() to disable the scrolling on a page destined for the ipad/iphone. No worries, that works great and there's a bunch of fixed elements that play nicely. One of the things that is embedded in the site is the iframe-embed code from Vimeo. My problem comes from the fact that, since the iframe content comes from a different domain and is in a different document, my document.ontouchmove & e.preventDefault() script is ignored within the iframe. The default page scrolling behaviour returns when the iframe is touched, and the page starts acting weird as elements that aren't supposed to move, do.
I don't think there's any way to apply javascript from the parent page through to the contents of the iframe, but does anyone know of a way to prevent all native scrolling as a general effect? (or maybe zero-out the scrolling as it happens?)
I might have to go to a more traditional, non-ajax-y view for this particular page in my site, but that ruins the overall look-and-feel.
The site hasn't gone live yet, so I can't post the address, but I can post code snippits on request.
TIA
I have a problem:
I want to play a video from a full screen web app, not using html embed, but using an image banner which redirects to the video url (for example url: http://example.com/media/vid.mp4),
because this can't be done using hrefs, i'm just calling a javascript event:
HTML:
<img src='http://example.com/media/banner01.jpg' id='play_video' />
JavaScript:
<script>
$("#play_video").click(function(){
window.location = "http://example.com/media/vid.mp4";
});
</script>
But because it's just an AJAX page, once video finishes playing, the user is back to the 1st page, however, I have a unique url for each page (for social networking), but how can I inject it to the browser's history, or perhaps some other method of playing the video?
I've been through a similar thing recently, and have found jQuery.address to be a great solution. It handles changing the URL in an AJAXy way, lovely.
Of course, if your users are running in standalone full-screen mode, you'll need to implement some controls for navigating the site without the usual browser chrome.
I'm creating a website in wordpress. I have a music player in it as its for a music artist. But I want the player to continue playing while the users move through the website. I dont want to use iframe as i want the url updated so the page can be bookmarked. Or is there any way to update the url and use iframe?
Somebody on the Wordpress forum asked the same question.
The best way (technically) to do this is indeed to use a CMS that supports surfing the site without page-refreshes, so using AJAX, as #jonny suggested.
jango.com seems to do this as does another site I can't remember.
If you load every page via AJAX, there's probably gonna be a drawback if you care about search-ranking .
any way to update the url and use iframe
maybe you need something like this
main.html
<script type="text/javascript">
function change_parent_url(url)
{
document.location=url;
}
</script>
player.html
after each click (how?): parent.change_parent_url (new_url_here);
I am not sure, but I've seen similar, iframe approach on weborama.ru:
look for window.location=, maybe it helps
If you change the URL fragment (the part after the #) on each page change, the URL in the address bar can always be bookmarked. If you do this with a frame (probably the easiest way), every page load would update the URL fragment of the parent document. If an incoming link has this fragment set you open the frame not with the homepage, but with the requested content page.