feat(player): ingest a player div for videojs

[gkatsev]

If the videojs embed code (a video element) is wrapped in a div with the
'data-vjs-player' attribute on it, that element will be used for the
player div and a new one will not be created. In addition, on browsers
like iOS that don't support moving the media element inside the DOM, we
will not need to clone the element and we could continue to re-use the
same video element give to us in the embed code.

This could also be extended in the future to change our embed code to a
div-only approach if we so choose.

[gkatsev]

I guess this needs some additional unit tests.

[mmcc]

Ah nice, this should help a lot for React folks

[misteroneill]

This is tentatively approved pending fixed tests and addition of a new test specifically for this feature. 😄

[gkatsev]

Fixing the tests we currently have is super easy. I forgot to check that tag.parentNode exists. Adding more tests is a bit more labor intensive, though.

[misteroneill]

Well, fixing the existing tests I think was more important, but I do think it'd be nice to have a positive test case for the functionality. We've gotten ourselves into trouble lately with low-level player initialization assumptions! 😆

[gkatsev]

First up are a set of tests for movingMediaElementInDOM and that Html5's createEl method does the right thing when used together with the playerElIngest tech option. Next up is a videojs test that makes sure that create a player wrapped properly the playerElIngest option is set up correctly for the the tech.

Added tests

[gkatsev]

@mmcc @misteroneill tests are written and passing, please review!

[VenkateshChekuri]

When I am trying to update the video by changing the source, it's not changing the video.
I am using video.js and React.js integration github code, but i am trying to change the video like this.
RenderVideo(path){
const videoJsOptions = {
autoplay: true,
controls: true,
sources: [{
src: '/path/to/video.mp4',
type: 'video/mp4'
}]
}

return <VideoPlayer { ...videoJsOptions } />

  {props.imgs[index].mediaType === 'VIDEO' && (
      <div className={styles.videoContainer}> 
             {RenderVideo(props.imgs[index].primaryLink)}
      </div>
    )}