moay / afterglow

HTML5 video player made easy.
http://afterglowplayer.com
MIT License
234 stars 47 forks source link

Multiple different videos on one single page causing problems and event tracking not working #83

Closed sagarthakar closed 5 years ago

sagarthakar commented 5 years ago

Hi,

I am facing a peculiar problem, here is what is happening -

  1. I am embedding multiple videos in one single page, now all these 3 videos are different, their id in video tag is myvideo, as per your documentation i am using myvideo to track events of the videos.
  2. But when I am embedding these 3 videos, since their id is same i.e. myvideo, the events are not getting tracked.
  3. So what I did I tried to set dynamic value to id instead of myvideo, but inspite of this the event tracking does not work.
  4. Please can you tell me how can I set id dynamic and use the same dynamic id to track videos.

P L E A S E H E L P !!!

Thanks

moay commented 5 years ago

Hi there.

Read here: http://docs.afterglowplayer.com/docs/mandatory-parameters - it is clearly stated, that the ID field needs to be unique for every video. You cannot name 3 videos on the same page with the same ID.

Other than that, I'd need to see some code in order to be able to help you. You'll of course need to track your stuff for the player ids you setup, but I cannot guess your error without seeing your code.

sagarthakar commented 5 years ago

hi moay,

thanks for your response, see below please -

  1. this is my embed script i have created -
<script src="http://www.app.vidmav.com/js/afterglow.min.js"></script>
<script src="http://www.app.vidmav.com/includes/bootstrap/js/jquery.min.js"></script>
<script type="text/javascript">
var vidPath ="http://s3.amazonaws.com/vidmav-1/video/xtigyhmm.mp4";
var splashPath="http://s3.amazonaws.com/vidmav-1/splashImage/xtigyhmm_002.jpg";
var vid="427";
var loginid="TVElM0QlM0Q%3D";
var source="EmbedScript";
var campId=0;</script>
<script src="http://www.app.vidmav.com/js/embed_script.js"> </script> 

<a class="afterglow" href="#myvideo">
    <img src="http://s3.amazonaws.com/vidmav-1/splashImage/xtigyhmm_play.jpg" width="700px" height="394px" />
</a>
<video id="myvideo" preload="metadata" width="700" height="394" data-contextmenu="false" data-overscale="false" controls poster="http://s3.amazonaws.com/vidmav-1/splashImage/xtigyhmm_002.jpg" playsinline data-skin='dark'>
    <source type="video/mp4" src="http://s3.amazonaws.com/vidmav-1/video/xtigyhmm.mp4" /></video>
  1. If you check the above code you will see this js - www.app.vidmav.com/js/embed_script.js

  2. I am tracking the events through this js, the id myvideo is referenced in the js.

  3. The problem i am facing is that i am not able to set dynamic id in the embed scrip js. And since the id is same for all the videos i use, the lightbox and other embed types i have created they fail.

  4. Please can you guide me how i can do this ?

P L E A S E H E L P

moay commented 5 years ago

Again, you will need a unique ID for every video you use. You will then need to track all events you want to track for every ID you are using.

There are more generic ways to achieve the things you do. You could for instance create a tracking function:

    enableTracking = function(videoId) {
        var events = ['play', 'paused', 'ended', 'lightbox-launched'];
        for (var i in events) {
            afterglow.on(videoId, events[i], function(){ /* ... do whatever you want ... */};
        }
    };

You could then use this method to enable tracking for all Ids you want (f.i. enableTracking('myvideo');, enableTracking('video01'); and so on.

It's actually really hard to help you without seeing the actual page setup, feel free to submit more info (also in private via email or facebook). You should definitely get into advanced javascript and read a lot concerning code style and how to structure a website. I dont see me giving you an easy answer for your questions, because your Javascript skill is (as far as I can see) not advanced enough for advanced usage of afterglow and understanding what I would be proposing. Learning javascript will make it easy for you to achieve what you want.

Also feel free to search for support in the afterglow community or on stackoverflow, the things you keep submitting are not actually issues or todos for afterglow.

sagarthakar commented 5 years ago

hi moay,

first of all thanks for your replies, it helped me to fix my code.

i am sorry to open issues here, and i understand what you say, i have a request is there any way you can open one more tab here to post queries just like these questions, so at least when you reply to such issues it can help me and many others like me.

once again thanks for all your replies.