On this page http://kimcolemanprojects.com/djangolive_1.html there are five videos.

When you click on each video the next video scrolls up into view with jQuery.

Because of this jQuery effect, I had to disable the video controls. So I decided to put a play/pause button to the left of each video.

However, I now need some help with making a script that will change the button when each new video scrolls into view. I have a piece of script that changes the titles as the different videos scroll into view, which is also on the left of each video, please see script below.

1. $(window).load(function () { // Scroll to titles on click 
2. $('a').on('click', function () {
3. var target = $(this).attr('href');
4. $('html,body').animate({
5. scrollTop: $(target).offset().top
6. }, 'slow');
7. return false;
8. });
9. // jQuery `inView`-expression 
10. $.extend($.expr[':'], {
11. inView: function (el) {
12. var width = $(el).width(),
13. height = $(el).height(),
14. offset = $(el).offset(),
15. vp_dimensions = {
16. height: $(window).height(),
17. width: $(window).width()
18. }, y_offset = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop),
19. x_offset = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
20. return(offset.top < (y_offset + vp_dimensions.height) && offset.left < (x_offset + vp_dimensions.width) && (offset.top + height) > y_offset && (offset.left + width) > x_offset);
21. }
22. }); // Change the titles on scroll
23. $(window).scroll(function () {
24. $('li').each(function () {
25. var self = $(this),
26. title = self.find('video').attr('title');
27. if(self.is(':inView')) {
28. $('#title').find('h2').text(title);
29. }
30. });
31. }).scroll();
32. });

Thanks for your time

Angela