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

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.

I will try :)
Will keep you posted

thanks

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

This might be tricker than previously thought - your video is in an iframe so going to need to look at that.

video js does it automatically
I did'nt maki it :(

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>

Select allOpen in new window

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

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?

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?

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.

Now you see why I need it? It is very versatile and it is working but it had this irritating problem. :(

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.

Any update?
Thanks

Il try it tonight and let You know
Thx

I am really sorry Juilian I was a bit away from this project. Now I am back. Will reply within tomorrow.

:(

pure genius!
And to think I was stumped because it was inside an iframe container... but this code works wonders!

You are welcome.

What does that e.preventDefault() do?

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.

very smart!