Video player fails to play signed urls about amplify-video HOT 8 CLOSED

@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.

from amplify-video.

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
          }
        }
      }
    }}
  />

from amplify-video.

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>
    );
  }
}

from amplify-video.

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

from amplify-video.

@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.

from amplify-video.

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

from amplify-video.

@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
  }
}

from amplify-video.

#323

from amplify-video.