Lose volume control when draggable enabled.

[jimeast]

When I display video with controls and draggable is on I can't independently control the volume.  If you run the pen with the JS commented out you can change the vol.  I would like to change if I could limit the draggable area just to the screen I think that would work.

See the Pen NdPrPY by jimeast (@jimeast) on CodePen

[jimeast]

If I knew ho to identify just the screen maybe I could use it as a trigger.  If I could create a trigger div that contains both screen and controls that's over the screen and also same dimensions as the screen.  Otherwise if I could manipulate the bubbling/capture properties of the control bar so it responds only as a control bar?

[PointC]

Hey Jim

 

I always use a 3rd party player (flowplayer) so I'm not terribly familiar with using the standard video controls, but I think you're on the right track. Preventing the bubbling or at least setting a different z-index seems like it would work. 

 

I wonder if this link might help with setting up your controls?

 

https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics

 

Sorry I can't be of more help, but maybe others will jump in here.

 

Happy tweening.

[Dipscom]

Interesting behaviour... I haven't got much time to muck about with this but I would suggest a quick and dirty way around it being creating an empty div as a parent of the video area, using that as the draggable trigger, make sure the video is taller than the div itself so that the controls are outside the div.

 

If it doesn't work as parent/child combo, it should as siblings.

[jimeast]

PointC I went to the flowplayer page it looks too pricy for me.  What player would pick if you couldn't afford much at all.

[PointC]

I've not used it, but you could try video.js. It's open source.

 

http://videojs.com/

 

I think flowplayer still allows free use too. (at least they used to) You'll just have their logo on the player. I don't have a whole lot of experience with other players as I've used flowplayer for many years. We produce a lot of videos and they're rock solid and always updating things. They're kind of like the GreenSock of video players.

 

Other than that, you can try rolling your own player and controls with that link I posted in #3 above. You'll also be able to find a lot of tutorials about creating your own with a quick Google search.  I wish I could offer more advice, but that's about all I have for now.

 

Good luck.

[Jonathan]

Hello jimeast

 

You can use all the various built in native API of the <video> element to control playback. And use GSAP to control those controls for volume and playback.

 

This way you can control parts of the video controls by clicking on custom HTML elements, like a custom UI for the <video> element. And then run code that triggers the <video> elements API using JS.

 

For example you can control the volume like this:

// event listener for controlling volume 
customVolumeBar.addEventListener("change", function() {
  // Update the video volume
  video.volume = customVolumeBar.value;
});

// or setting the volume
var videoElement = document.getElementById("video");
videoElement.volume = 0.5;

List of <video> element events:

 

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

 

<video> element spec:

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

 

The <video> element is widely supported in all modern browsers:

 

http://caniuse.com/#feat=video

 

And if you need to support older versions of browsers you can use mediaelements.js as a polyfill

 

[PointC]

Yep - Sir Jonathan has some solid advice there.

 

Here's a nice Diaco pen that shows video and audio controls with GSAP

 

See the Pen JXXMaB by MAW (@MAW) on CodePen

 

Happy tweening.

[jimeast]

I like it, I forked it.  Thanks!