Video player fails to play signed urls

[pedramp20]

Describe the bug When signed url is passed to the suggested video player (video.js), it fails with: No compatible source was found for this media.

<VideoPlayer
    autoplay
    controls
    sources={[{
      src: 'https://xxxxxxxx.cloudfront.net/{path}/{path.m3u8}{token}',
      type: 'application/x-mpegURL'
    }]}

[nathanagez]

Hi @pedramp20, please can you provide the VideoPlayer component source code ?

[pedramp20]

@nathanagez I actually realised that for signed urls the right way of passing source and token is as follows:

<VideoPlayer
    autoplay
    controls
    sources={[{
      src: 'https://xxxxxxxx.cloudfront.net/{path}/{path.m3u8}',
      type: 'application/x-mpegURL'
    }]}
    token={token}
  />

However, now I am getting the following error:

VIDEOJS: WARN: Problem encountered with playlist 0-http://localhost:3000/undefined. Trying again since it is the only playlist.

Here is the videoplayer component code:

import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default class VideoPlayer extends React.Component {
  componentDidMount() {
    this.player = videojs(this.videoNode, this.props);
  }

  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    return (
      <div>
        <div data-vjs-player>
          <video ref={(node) => { this.videoNode = node; }} className="video-js"></video>
        </div>
      </div>
    );
  }
}

Ps. Since video setup got stuck in adding video js to package.json, I manually added the package and called setup again.

[nathanagez]

@nathanagez I actually realised that for signed urls the right way of passing source and token is as follows:

<VideoPlayer
          autoplay
          controls
          sources={[{
            src: 'https://xxxxxxxx.cloudfront.net/{path}/{path.m3u8}{token}',
            type: 'application/x-mpegURL'
          }]}
          token={token}
        />

However, now I am getting the following error:

VIDEOJS: WARN: Problem encountered with playlist 0-http://localhost:3000/undefined. Trying again since it is the only playlist.

@pedramp20 token have to be append to each requests, I'll provide you the correct snippet of code but I'm not in front of my computer FTM. I'll ping you ASAP.

[pedramp20]

@nathanagez do you mean this? https://gist.github.com/wizage/1523dd1f6928e0d852042e6adbaf54cd It didn't work for me

[pedramp20]

I resolved the issue using React Player. if anyone else is having problem with playing HLS with credentials. here is how to play it with react player:

<ReactPlayer
    url={source} //this your source url WITHOUT APPENDED TOKEN: https://xxxxxxxx.cloudfront.net/{path}/{path.m3u8}
    controls={true}
    config={{
      file: {
        hlsOptions: {
          xhrSetup: function xhrSetup(xhr, url) {
            xhr.setRequestHeader(
              "Access-Control-Allow-Headers",
              "Content-Type, Accept, X-Requested-With"
            );
            xhr.setRequestHeader(
              "Access-Control-Allow-Origin",
              "*"
            );
            xhr.setRequestHeader(
              "Access-Control-Allow-Credentials",
              "true"
            );
            xhr.open('GET', url + token); // this is your token: ?Policy=foo&Key-Pair-Id=bar&Signature=foobar
          }
        }
      }
    }}
  />

[nathanagez]

https://gist.github.com/wizage/1523dd1f6928e0d852042e6adbaf54cd

Yes but instead of using Hls use Vhs since Hls is deprecated.

import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default class VideoPlayer extends React.Component {
  componentDidMount() {
    videojs.Vhs.xhr.beforeRequest = (function (options) {
      options.uri = `${options.uri}${this.props.token}`;
      return options;
    }).bind(this);
    this.player = videojs(this.videoNode, this.props);
  }

  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    return (
      <div>
        <div data-vjs-player>
          <video ref={(node) => { this.videoNode = node; }} className="video-js"></video>
        </div>
      </div>
    );
  }
}

[pedramp20]

@nathanagez I am having problem playing videos using both react player and video js on iOS (Safari). Is there a specific config that needs to be set? I have already tried this but didn't work

{
  html5: {
    hls: {
      overrideNative: overrideNative
    },
    nativeVideoTracks: !overrideNative,
    nativeAudioTracks: !overrideNative,
    nativeTextTracks: !overrideNative
  }
}

[pedramp20]

https://github.com/awslabs/amplify-video/issues/323