Należy użyć interfejsu API odtwarzacza, ponieważ nie można wprowadzić kodu wewnątrz elementu iframe w domenie innej firmy.
Na podstawie dokumentacji dostarczonej dla player API t powinien wyglądać mniej więcej tak.
Working Example
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
var f = document.getElementsByTagName('iframe')[0],
url = f.src.split('?')[0];
// Listen for messages from the player
if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
}
else {
window.attachEvent('onmessage', onMessageReceived, false);
}
// Handle messages received from the player
function onMessageReceived(e) {
var data = JSON.parse(e.data);
switch (data.event) {
case 'ready':
onReady();
break;
case 'play':
onPlay();
break;
case 'finish':
onFinish();
break;
}
}
// Helper function for sending a message to the player
function post(action, value) {
var data = { method: action };
if (value) {
data.value = value;
}
f.contentWindow.postMessage(JSON.stringify(data), url);
}
function onReady() {
post('addEventListener', 'finish');
post('addEventListener', 'play');
}
function onFinish() {
_gaq.push(['_trackEvent', 'Vimeo Video', 'finish', url]);
}
function onPlay() {
_gaq.push(['_trackEvent', 'Vimeo Video', 'play', url]);
}
</script>
</head>
<body>
<iframe src="http://player.vimeo.com/video/27855315?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</body>
</html>
Powyższy kod może być uproszczone za pomocą API Vimeo Mogaloop wyodrębniająca Passing API dla ciebie wiadomość, kosztem ładowania Javascript z biblioteką.
Wtyczki Gotowy do użycia
Zauważ, że powyższy kod będzie działać tylko jako przykład, a jeśli masz kilka filmów na stronie może być trudniej uzyskać prawo. Alternatywnie możesz również użyć biblioteki GAS (Jestem tam głównym programistą), która ma plugin for tracking Vimeo Video.
Ostrzeżenie o zgodności
Uwaga ostrzeżenie o kompatybilności, myślę, że jeśli włożysz odtwarzacza za pomocą metody błyskowej można uzyskać szerszy zakres przeglądarek obsługiwanych ale zabić gracza całkowicie dla urządzeń iOS:
Za pomocą uniwersalnego kodu do umieszczania na stronie, jedynym sposobem na interakcję z odtwarzaczem jest użycie window.postMessage. PostMessage to stosunkowo nowa wersja , więc jest dostępna tylko w przeglądarkach Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome i Opera 9+.
Wydaje się, że strasznie dużo obejść, aby wziąć jeden film "grać". Dzięki za pomoc, bardzo pomocne. – Brett
Mam to działa na mojej stronie na scenie i środowiskach dev, ale nie wydaje się pracować nad produkcją. Strona produkcyjna jest w https, myślę, że to może być powód? – SirM