I need to track how much of an embedded youtube video the user has watched on my site. I need it to fire a tag at 25%, 50%, 75% and 100% of the length of the video. It should work similarly as a scrolling page track.
The only access I have to the site is through Googletag manager, so any solution would have to be through there.
I´ve researched and aparently there are ways to do this using youtube api. I even tried this step-by-step guide: http://www.cardinalpath.com/youtube-video-tracking-with-gtm-and-ua-a-step-by-step-guide/ But it didn´t work.
I guess the problem is that the site uses fancybox the play the video. Here is a pick of the website´s code:
I have no idea where to start.
Please take a look at
Track YouTube Video Playback with jQuery and Google Analytics Events
https://developers.google.com/youtube/js_api_reference
You need to track the current playback time, get the total playing time and then convert it to percentages.
Use the chromeless player and use the youtube js api. See the Playback_status method. I agree with putting a timer. However, there are methods and callbacks available at the js api that I highly recommended for you to use.
You will probably have to use
onStateChange event
getDuration()
getCurrentTime()
and you probably need those inside the onStateChange wrapper or something better.
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
function onytplayerStateChange(newState) {
alert(ytplayer.getDuration()+ytplayer.getCurrentTime());
}
At the player state change, you may fire your own methods inside.
It's not a working example, but I hope that you get my answer. The modal / popup boxes is not related in getting the data needed. You just need to use the chromeless player and the YT js api working in harmony with your jQuery plugins. There are some jQuery plugins that is an API wrapper for multiple video sharing technologies.
Bower and Google is your friend!
http://bower.io/search/?q=youtube
Another option worth looking into, if YouTube is not your only options, I'm pretty sure both Vimeo and Wistia have these capabilities built in and are very simple to embed
what you can do is when getting the you tube video request the length of the video. Then divide that number accordingly to 25%, 50%, 75% and 100%.
You can attempt this by setting a timer at the same time the video plays and then calling the tag at the different times which were calculated before hand.
Hope this helps!
Related
I am deciding whether or not I should use the full YouTube API (registering for an API key, calling the YouTube JS and building the player from scratch) or if I should just register for an YouTube account, build a playlist and load this playlist on a client's website as is (using the iframe embed code, seen below):
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/videoseries?list=XXXXXXX
&autoplay=1&rel=0&loop=1&shuffle=1" frameborder="0" allowfullscreen>
</iframe>
The embed code is easy enough, but from viewing earlier videos on YouTube Playlist settings, YouTube has removed quite a bit of functionality from basic playlist settings (autoplay, shuffling videos on play, start/stop times of each video in playlist, etc.)
I would imagine the switch for shuffle should be as easy as "&shuffle=1" or something like that. I'm not sure why YouTube makes it so difficult to comprehend new settings after having removed such a powerful feature from such a simple embed code.
Any ideas?
Here's an actual solution:
function onPlayerReady(event) {
event.target.playVideo();
setTimeout(setShuffleFunction, 1000);
}
function setShuffleFunction(){
player.setShuffle(true);
}
You have to use javascript to load the player.setShuffle(true) event, just after the first video starts (solution given here: YouTube API playlist shuffle). I didn't create it but I tried it and it worked for me too. I went two years thinking the feature was deprecated and no longer possible with embedded playlists. Seeing as this is the primary response when you google this issue, figured I'd help out.
You can find all the embed parameters YouTube supports here.
When displaying a Dailymotion (DMCloud) video in an iframe on my page, how can I use JavaScript to interact with video - get current playing time, for example?
Dailymotion have a JS SDK for this (docs), but I can't find how to use the SDK to interact with an existing iframe rather than create a new one.
So, assuming I have something like:
<iframe src="https://api.dmcloud.net/embed/4e5bf73e94a6f629c900461b/4fcbcc1a06361d0dda000267?auth=1571064530-0-6tpgjq7u-30443abdac10acef6cf336eb89412713& id="foo"></iframe>
Using JS, how can I get the current playing time of the video?
it looks like your are mixing DM cloud and Dailymotion.com
The APIs are different and the documentation for the cloud player can be found at https://www.dmcloud.net/doc/api/player-video_player.html
There is a working example at the bottom of the page: http://api.dmcloud.net/static/dmplayer/dmplayer-sdk.html
Anyway, I think you're missing the code you're refering to but I confirm you cannot control or interact with an iframe that wasn't created using the API.
Well it seems possible #Dailymotion, the iframe needs to be loaded with &api=postMessage, then you get a DOM reference to the iframe and do:
iframe.contentWindow.postMessage('play', '*');
And it works.
I have an asp.net page with an iframe in it that shows a youtube video. I have buttons that use the youtube api to control the video. I'm finding that often the video doesn't show up, and I have to do a view-refresh to make it work. This problem is limited to Internet Explorer, I believe that Google chrome does not have the same problem.
I've been told not to use iframes at all by a tech support person at the server company that hosts my site. They say people are moving away from iframes, and that I should use other methods of embedding youtube videos.
I could certainly do that, but youtube recommends using iframes, because they are more flexible.
If I could make the 'refresh' problem predictable, I would submit it to Microsoft, but I can't figure out why it happens sometimes, but not other times.
I could also force a refresh.
My question is, does anyone have a clue why this bug is happening.
Thanks.
This happens a lot with IFRAME content. I believe it's to do with the way that Internet Explorer caches stuff, but to be perfectly honest, I'm not sure on the details.
What I can share is an old trick we used to use with dialog boxes.
Say your src attribute is "http://www.youtube.com/watch?v=1wL7RHoDnxs"
You can bang an extra parameter onto that GET string, like:-
"http://www.youtube.com/watch?v=1wL7RHoDnxs&doesntmatter=203933"
See the extra doesntmatter parameter there? The value is random, or based on a timestamp. Your choice. The trick is to give a different URL to IE each time. This'll stop it from trying to use a cache for your IFRAME content.
I have been investigating how to annotate video using Flex or AIR. Similar to how it is being done on YouTube. I am not getting much joy. Wondered if anybody might have any insight?
Thanks
--Matt
This could actually be simpler than you thought.
Here's what I would do:
Play the video
When you see a spot you want to add an annotation for click the annotation button or the video to stop it and add an annotation
When you click that button you grab the timecode from the video
Save the timecode and your annotation details in a database
The next time you play the video, you load the annotations and their timecodes from the database
Before the video start playing you add cuepoints to it using the CuePointManager class in Flex
Add an event listener to the video player that will listen for these cuepoints
When the cuepoint hits you can show your annotation at the correct time code etc
Hope this helps.
Serge-
Matt you can refer the Youtube AS3 API's at
http://code.google.com/apis/youtube/flash_api_reference.html
You can check some demo examples from the link above to get an understanding how you can start off. You can also do this with Javascript API's if you are interested.
We have used Youtube AS3 API for enriching videos for content companies and it was fairly straightforward to built it - check demo at onion.tv
I am working on a webpage where i have to include an embedded video.The video is hosted on some other domain.I am able to embed the video and autoplay once the web page is loaded.However i have a requirement where i have to remove the div displaying the video once it is played , and in place of the video i have to now display some text.
The problem is i am able to do autoplay by the autostart variable in the embed tag...but how do i know that the video has ended.The hosting company only provides an embed tag and they donot have any player apis to use.
One way (or rather a workaround) that i feel is to start a eventlistener in the background and see for the total time of the video and when that time is reached remove the content.But the problem is what if the user pauses the video, then also the div would be deleted.
I am new to flash.Are there some standard variables or actions that we can pass as flashvars to a swf file to stop a running player or to know the state of the player (Note we are only getting an embed tag from the video hosting site so we donot own that code and they donot have much documenation to help me out with the code).
Thanks for your help.
If you know that the content is a movie, and thus probably has a linear frame progression, you could use the Flash javascript API. Pseudocode for one possibility:
everyHalfSecond {
currentFrame = movie.TCurrentFrame("/");
totalFrames = movie.TotalFrames();
if (currentFrame + 1 == totalFrames) {
doMovieComplete() // switch out your div
}
}
WRT your undefined object variable, that sounds like standard browser Javascript issues. To resolve that, can use your own browser-specific "getSWF" function (see getFlexApp in this blog entry for an example), or you can use something like swfobject.