Multi Video Support

[yisusans]

Instead of defaulting to find the first video element in the dom, pass in a videoID as the 4th argument to the HOC so that this.videoEl is the selected video based on videoId. Default to first video element when the argument is not passed.

I've already added this & would like to make a PR.

[mderrick]

Hi, thanks for the issue. May I ask for an example use case of this? I'm trying to understand why anyone would need to do this :)

[yisusans]

I'm setting up a split player where I have 2 videos side by side. I have one controller that syncs both videos & controls the state of both videos. My SplitPlayerView component has two video tags in it & I want to be able to control both video elements.

I'd have two connects like this:

/**
 * The first video element on the dom.
 */
const VideoContainerOne = videoConnect(
  SplitPlayerView,
  mapStateToProps,
  mapVideoElToProps,
  defaultMergeProps,
  'split-player__video1',
);

/**
 * The second video element on the dom.
 */
export default videoConnect(
  VideoContainerOne,
  mapStateToPropsTwo,
  mapVideoElToPropsTwo,
  defaultMergeProps,
  'split-player__video2',
);

lmk if you need more clarification!

[mderrick]

Are you then using MapStateToProps to pass the video prop into your SplitPlayerView as two different props? e.g video1, video2? I guess theres no harm in being able to select a video a different way.

[yisusans]

yep! How does this work? Can I get permission to submit a PR?

[mderrick]

Feel free to submit a PR for me to look at!