Add VK.COM video support

README.md

@@ -334,6 +334,7 @@ ReactPlayer `v2.0` changes single player imports and adds lazy loading players.
 * DailyMotion videos use the [DailyMotion Player API](https://developer.dailymotion.com/player)
 * Vidyard videos use the [Vidyard Player API](https://knowledge.vidyard.com/hc/en-us/articles/360019034753-Using-the-Vidyard-Player-API)
 * Kaltura's `react-player` implementation uses the embed.ly [`Player.js`](https://github.com/embedly/player.js) API but Kaltura specific APIs are also available, see [Kaltura Player API](http://player.kaltura.com/docs/index.php?path=kwidget)
+* VK.com videos uses the [VK iFrame Player API](https://dev.vk.com/en/widgets/video)
 * [Supported file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats) are playing using [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) or [`<audio>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/audio) elements
   * HLS streams are played using [`hls.js`](https://github.com/video-dev/hls.js)
   * DASH streams are played using [`dash.js`](https://github.com/Dash-Industry-Forum/dash.js)

examples/react/src/App.js

@@ -356,6 +356,13 @@ class App extends Component {
                   {this.renderLoadButton('https://cdnapisec.kaltura.com/p/2507381/sp/250738100/embedIframeJs/uiconf_id/44372392/partner_id/2507381?iframeembed=true&playerId=kaltura_player_1605622336&entry_id=1_i1jmzcn3', 'Test B')}
                 </td>
               </tr>
+              <tr>
+                <th>VK</th>
+                <td>
+                  {this.renderLoadButton('https://vk.com/video-211679858_456239365', 'Test A')}
+                  {this.renderLoadButton('https://vk.com/video?q=orchestra&z=video-135295879_456241461%2Fpl_cat_trends', 'Test B')}
+                </td>
+              </tr>
               <tr>
                 <th>Files</th>
                 <td>

src/patterns.js

@@ -15,6 +15,7 @@ export const MATCH_URL_DAILYMOTION = /^(?:(?:https?):)?(?:\/\/)?(?:www\.)?(?:(?:
 export const MATCH_URL_MIXCLOUD = /mixcloud\.com\/([^/]+\/[^/]+)/
 export const MATCH_URL_VIDYARD = /vidyard.com\/(?:watch\/)?([a-zA-Z0-9-_]+)/
 export const MATCH_URL_KALTURA = /^https?:\/\/[a-zA-Z]+\.kaltura.(com|org)\/p\/([0-9]+)\/sp\/([0-9]+)00\/embedIframeJs\/uiconf_id\/([0-9]+)\/partner_id\/([0-9]+)(.*)entry_id.([a-zA-Z0-9-_].*)$/
+export const MATCH_URL_VK = /https:\/\/(?:[a-zA-Z0-9-]+\.)?(vk\.com|vk\.ru)\/.*video(-?\d+)_?(\d+)/
 export const AUDIO_EXTENSIONS = /\.(m4a|m4b|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i
 export const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)(#t=[,\d+]+)?($|\?)/i
 export const HLS_EXTENSIONS = /\.(m3u8)($|\?)/i
@@ -63,5 +64,6 @@ export const canPlay = {
   mixcloud: url => MATCH_URL_MIXCLOUD.test(url),
   vidyard: url => MATCH_URL_VIDYARD.test(url),
   kaltura: url => MATCH_URL_KALTURA.test(url),
+  vk: url => MATCH_URL_VK.test(url),
   file: canPlayFile
 }

src/players/VK.js

@@ -0,0 +1,127 @@
+import React, { Component } from 'react'
+
+import { callPlayer, getSDK } from '../utils'
+import { canPlay, MATCH_URL_VK } from '../patterns'
+
+const SDK_URL = 'https://vk.com/js/api/videoplayer.js'
+const SDK_GLOBAL = 'VK'
+
+export default class VK extends Component {
+  static displayName = 'VK'
+  static canPlay = canPlay.vk
+  callPlayer = callPlayer
+  duration = null
+  currentTime = null
+  secondsLoaded = null
+
+  componentDidMount () {
+    this.props.onMount && this.props.onMount(this)
+  }
+
+  getOID (url) {
+    return url.match(MATCH_URL_VK)[2]
+  }
+
+  getID (url) {
+    return url.match(MATCH_URL_VK)[3]
+  }
+
+  load () {
+    getSDK(SDK_URL, SDK_GLOBAL).then((playerjs) => {
+      if (!this.iframe) return
+      this.player = new playerjs.VideoPlayer(this.iframe)
+
+      this.player.on('inited', () => {
+        // An arbitrary timeout is required otherwise
+        // the event listeners won’t work
+        setTimeout(() => {
+          this.player.isReady = true
+          if (this.props.muted) {
+            this.player.mute()
+          }
+          this.addListeners(this.player, this.props)
+          this.props.onReady()
+        }, 500)
+      })
+    }, this.props.onError)
+  }
+
+  addListeners (player, props) {
+    player.on('started', props.onPlay)
+    player.on('resumed', props.onPlay)
+    player.on('paused', props.onPause)
+    player.on('ended', props.onEnded)
+    player.on('error', props.onError)
+    player.on('timeupdate', ({ time, duration }) => {
+      this.duration = duration
+      this.currentTime = time
+    })
+  }
+
+  play () {
+    this.callPlayer('play')
+  }
+
+  pause () {
+    this.callPlayer('pause')
+  }
+
+  stop () {
+    // Nothing to do
+  }
+
+  seekTo (seconds, keepPlaying = true) {
+    this.callPlayer('seek', seconds)
+    if (!keepPlaying) {
+      this.pause()
+    }
+  }
+
+  setVolume (fraction) {
+    this.callPlayer('setVolume', fraction)
+  }
+
+  mute = () => {
+    this.callPlayer('mute')
+  }
+
+  unmute = () => {
+    this.callPlayer('unmute')
+  }
+
+  getDuration () {
+    return this.duration
+  }
+
+  getCurrentTime () {
+    return this.currentTime
+  }
+
+  getSecondsLoaded () {
+    return this.secondsLoaded
+  }
+
+  ref = (iframe) => {
+    this.iframe = iframe
+  }
+
+  render () {
+    const style = {
+      width: '100%',
+      height: '100%',
+      border: 'none'
+    }
+
+    return (
+      <iframe
+        ref={this.ref}
+        src={`https://vk.com/video_ext.php?oid=${this.getOID(
+          this.props.url
+        )}&id=${this.getID(this.props.url)}&hd=2&js_api=1`}
+        style={style}
+        allow='autoplay; encrypted-media; fullscreen; picture-in-picture;'
+        referrerPolicy='no-referrer-when-downgrade'
+      />
+    )
+  }
+}

src/players/index.js

@@ -74,6 +74,12 @@ export default [
     canPlay: canPlay.kaltura,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerKaltura' */'./Kaltura'))
   },
+  {
+    key: 'vk',
+    name: 'VK',
+    canPlay: canPlay.vk,
+    lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerVK' */'./VK'))
+  },
   {
     key: 'file',
     name: 'FilePlayer',

src/props.js

@@ -37,6 +37,11 @@ export const propTypes = {
       embedOptions: object,
       onUnstarted: func
     }),
+    vk: shape({
+      playerVars: object,
+      embedOptions: object,
+      onUnstarted: func
+    }),
     facebook: shape({
       appId: string,
       version: string,
@@ -148,6 +153,17 @@ export const defaultProps = {
       embedOptions: {},
       onUnstarted: noop
     },
+    vk: {
+      playerVars: {
+        playsinline: 1,
+        showinfo: 0,
+        rel: 0,
+        iv_load_policy: 3,
+        modestbranding: 1
+      },
+      embedOptions: {},
+      onUnstarted: noop
+    },
     facebook: {
       appId: '1309697205772819',
       version: 'v3.3',