I need to pause and resume a video.js video when I click two tabs.

I am going a bit crazy. Nothing seems to work.

I have a video.js video here: http://www.missionfamily.org/associations/associazioni-cristiane-lavoratori-italiani-119

There are two tabs: One entitled "L'associazione" and the other "Video & allegati".
If you click on video & allegati you can see the video there.
If a user clicks play on the video and while the video is playing, if he clicks on the first tab "L'associazione", I need the video to pause.
If the video was already playing before and I paused it, then when I click on the "video & allegati" tab again, I need the video to resume.

Any help would be appreciated.

thanks in advance
badwolfffAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I can help you with this but I am tied up right now. If you don't get any response from any of the other experts then nudge here and I will take a look.

You basically want to look at this sample (which I think you are already familiar with). You need to capture the click even on the video and add a class to the Video element - can be anything that does not affect the styling of the tab.
When a tab is clicked
a) Check to see if it is the video tab - if not - call the video stop method (Refer sample)
b) If it is the video tab - check to see if the video tag has the specified class - if it does then call the play method (as per sample) otherwise don't do anything.
0
badwolfffAuthor Commented:
I will try :)
Will keep you posted

thanks
0
badwolfffAuthor Commented:
Hi,

Can't get it to work unfortunately :(
I did try. The problem is that my html format is a bit different compared to his.

Could you please help?

thanks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
This might be tricker than previously thought - your video is in an iframe so going to need to look at that.
0
badwolfffAuthor Commented:
video js does it automatically
I did'nt maki it :(
0
badwolfffAuthor Commented:
Hi Julian, any updates?
I tried too but I can't get it to work within the iframe.

This is the way I am adding it to the page template:

<div id="vendor_video" class="cmsms_post_cont col-lg-6 col-sm-6 col-xs-12" <?php if(empty($gallery_link)) { echo ' style="display:none;" '; } ?>>
                    <h1>Video</h1><br>
                    <?php $parsed = parse_url($gallery_link); if(!empty($gallery_link))
                    {
                      echo '<script type="text/javascript">document.createElement("video");document.createElement("audio");document.createElement("track");</script><link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"><script src="//vjs.zencdn.net/4.12/video.js"></script>';
                      if( ($parsed['host'] == 'www.youtube.com') || ($parsed['host'] == 'youtu.be'))
                      {
                        $techorder = 'youtube';
                      }
                      else if( ($parsed['host'] == 'vimeo.com'))
                      {
                        $techorder = 'vimeo';
                      }
                      echo '<script src="http://www.missionfamily.org/script/vjs.'.$techorder.'.js"></script><video id="html5video" src="" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="522" height="294" data-setup=\'{ "techOrder": ["'.$techorder.'"], "src": "'.$gallery_link.'" }\'></video>';
                    }
                    ?>
</div>

Open in new window

0
badwolfffAuthor Commented:
This is a php adaptation of the code I got from the video js website. Do you think I should modify the php code so that the output is similar to the one on the example you showed me? If so, please suggest how

Thanks
0
Julian HansenCommented:
Apologies for not getting back to you - I suspect there is a way to do this through the video.js api - just have not had time to look into it.

Is there a specific reason you want to use video.js?
0
badwolfffAuthor Commented:
Well too late to change it now as it is in many places already integrated and fully working and it supports html5 video from Vimeo, YouTube, dailymotion and html5 audio from soundcloud out of the box

That example you showed me is it not also with video.js?
0
Julian HansenCommented:
That example you showed me is it not also with video.js?
No that is just using the html5 <video> tag.

All video.js really does is
a) Provide a single solution for browsers that support html5 and those that don't - not really that important anymore as the older browsers die out
b) A player skin etc

The API however should allow you to do what you want - I just have not had time to dive in and have a look.
0
badwolfffAuthor Commented:
Now you see why I need it? It is very versatile and it is working but it had this irritating problem. :(
0
Julian HansenCommented:
Understood - my applications with video are all very specific and video.js is just not the right tool. I will take a look at it again and see if I can dig out the relevant api calls to plug in to my solution.
0
badwolfffAuthor Commented:
Any update?
Thanks
0
Julian HansenCommented:
Unfortunately I have not had time to dig into video.js yet. Just had a look now and tested on your site

You can get access to your player like this
var video = videojs('html5video');
video.play();

Open in new window


So all you need to do is change the code I posted as follows.
PS I tried this out in the console and it works - you might need to modify it a bit to do a check to see if the video has been started or not but otherwise it seems to work.
<script>
$(function() {
  $('ul.nav.nav-tabs a').click(function(e) {
    e.preventDefault();
    var video = videojs('html5video');
    var action = $(this).attr('href');
    if (action == '#tab-specification') {
      video.play();
    }
    else {
      video.pause();
    }
  });
});
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
badwolfffAuthor Commented:
Il try it tonight and let You know
Thx
0
badwolfffAuthor Commented:
I am really sorry Juilian I was a bit away from this project. Now I am back. Will reply within tomorrow.

:(
0
badwolfffAuthor Commented:
pure genius!
And to think I was stumped because it was inside an iframe container... but this code works wonders!
0
Julian HansenCommented:
You are welcome.
0
badwolfffAuthor Commented:
What does that e.preventDefault() do?
0
Julian HansenCommented:
It prevents the default behaviour of the element. For instance an <a> elements default behaviour is to navigate to the link in the href, a <form>'s default behaviour is to submit.

In this case I don't want the <a> element to do any navigation - I am only interested in the click event so that I can manipulate the <video> element - after that I want the browser to stop processing the event.
0
badwolfffAuthor Commented:
very smart!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.