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',